Integrasi Fingerprint

dan Dashboard
Absensi dengan
Raspberry Pi Pico W

Disusun oleh :
Agus Dwi Kurniawan,
S.Kom Syahrul
Banadi, S.Kom
Ayu Candra Amalia,
S.Kom
 Pelatihan Upsklilling dan
Reskilling Angkatan XVII
IT Business berbasis Data
Science
Modul Flask dan Microdot: Integrasi Fingerprint dan Dashboard
Absensi dengan Raspberry Pi Pico W
Bab 1: Instalasi Python dan PyCharm
 Persiapan lingkungan pengembangan
 Instalasi Python
 Instalasi PyCharm

Bab 2: Instalasi Flask

 Menginstal Flask dan dependensi lainnya
 Memahami struktur folder aplikasi Flask

Bab 3: Membangun Website Dinamis dengan Flask dan Jinja2

 Menggunakan CSS dan JavaScript
 Membuat halaman utama dengan Jinja2

Bab 4: Integrasi Perangkat Fingerprint dengan Flask

 Menghubungkan perangkat fingerprint ke komputer
 Menggunakan library untuk komunikasi dengan perangkat fingerprint (zklib)
 Mengimplementasikan fungsi untuk mengambil dan menyimpan data absensi ke SQLite

Bab 5: Membangun CRUD untuk Pengguna dengan Template SB Admin

 Mengatur struktur folder dan file
 Mengatur template base
 Membuat halaman dashboard
 Membuat halaman daftar pengguna (index.html)
 Membuat halaman untuk menambah pengguna (create.html)
 Membuat halaman untuk mengedit pengguna (edit.html)
 Mengatur route Flask untuk fitur CRUD

Bab 6: Merekam dan Mengelola Data Log dari Fingerprint

 Menyimpan data log ke dalam database
 Mengatur tabel log untuk pencatatan absensi

Bab 7: Analisis Data dengan Data Science

 Mengumpulkan dan membersihkan data absensi
 Menjelaskan deskriptif analitik menggunakan Python (pandas, matplotlib)
 Menerapkan Naive Bayes untuk prediksi keterlambatan
 Membuat dan menyimpan model menggunakan pickle

Bab 8: Mengintegrasikan Model Prediksi ke dalam Flask

 Menggunakan file pickle untuk model prediksi
 Menyiapkan endpoint Flask untuk mengakses prediksi
 Menampilkan hasil prediksi dalam antarmuka pengguna

Bab 9: Membangun Dashboard dengan Microdot di Raspberry Pi Pico W

 Menyiapkan Microdot untuk Raspberry Pi Pico W
 Mendesain dashboard untuk menampilkan data absensi dan prediksi
  Menghubungkan dashboard dengan Flask di komputer untuk mengambil data secara real-
time

Bab 10: Pengujian dan Penanganan Kesalahan

 Menguji aplikasi secara menyeluruh
 Menangani kesalahan umum yang mungkin terjadi

Bab 11: Deployment dan Penggunaan di Lapangan

 Menyusun langkah-langkah untuk deployment aplikasi
 Penggunaan aplikasi di lingkungan nyata

Bab 12: Penutup dan Rencana Pengembangan Selanjutnya

 Merangkum pembelajaran
 Menyusun ide untuk pengembangan fitur tambahan

Lampiran
 A. Referensi dan Bacaan Tambahan
 B. Daftar Pustaka

Indeks
 Kata Pengantar
Bismillahirrahmanirrahim.

Assalamualaikum Warahmatullahi Wabarakatuh

Segala puji bagi Allah SWT, Tuhan semesta alam, yang telah memberikan hidayah dan
petunjuk-Nya kepada kita semua. Shalawat dan salam semoga tercurah kepada Nabi
Muhammad SAW, suri teladan bagi umat manusia dalam menuntut ilmu dan
mengamalkannya.

Modul ini disusun sebagai hasil dari pelatihan Upskilling dan Reskilling Angkatan ke
XVII dengan tema IT Business Berbasis Data Science. Pelatihan ini bertujuan untuk
meningkatkan keterampilan dan pengetahuan para peserta dalam bidang teknologi informasi
dan data science, yang semakin penting di era digital saat ini.

Dalam modul ini, kami mengajak para pembaca untuk menggali dan memahami bagaimana
mengembangkan aplikasi manajemen absensi siswa menggunakan teknologi Flask dan
Microdot di Raspberry Pi Pico W. Pembaca akan dibimbing melalui langkah-langkah mulai
dari instalasi, pengembangan, hingga penerapan analisis data untuk menghasilkan wawasan
yang bermanfaat dalam pengelolaan absensi.

Semoga modul ini dapat memberikan manfaat yang besar bagi pembaca, khususnya dalam
meningkatkan kompetensi di bidang teknologi informasi dan data science. Kami berharap
pembaca dapat mengaplikasikan ilmu yang didapat untuk kebaikan, serta memberikan
kontribusi positif bagi masyarakat dan bangsa.

Akhir kata, kami mohon maaf jika terdapat kekurangan dalam penyampaian modul ini.
Semoga Allah SWT senantiasa membimbing kita dalam menuntut ilmu dan
mengamalkannya, serta memberikan keberkahan dalam setiap langkah yang kita ambil.

Wassalamu’alaikum warahmatullahi wabarakatuh.

[Agus Dwi Kurniawan]

Malang, 26 September 2024
 Bab 1
Instalasi Python dan Pycharm
1.1 Persiapan Lingkungan Pengembangan

Sebelum memulai pengembangan aplikasi dengan Flask dan Microdot, kita perlu
menyiapkan lingkungan pengembangan yang sesuai. Dalam bab ini, kita akan membahas
langkah-langkah untuk menginstal Python dan PyCharm, dua alat yang sangat penting dalam
proses pengembangan aplikasi ini.

1.1.1 Kebutuhan Sistem Pastikan komputer Anda memenuhi kebutuhan sistem minimum
untuk menjalankan Python dan PyCharm:

 Sistem Operasi: Windows, macOS, atau Linux.

 RAM: Minimal 4 GB (disarankan 8 GB atau lebih).
 Ruang Penyimpanan: Minimal 1 GB ruang kosong.

1.2 Instalasi Python

Langkah 1: Download Python

 Kunjungi situs resmi Python di python.org.

 Klik tombol Download Python di halaman tersebut. Versi terbaru akan otomatis
dipilih berdasarkan sistem operasi Anda.

Langkah 2: Mulai Instalasi Python

 Setelah download selesai, jalankan installer Python.

 Centang opsi Add Python to PATH di bagian bawah jendela installer
untuk menambahkan Python ke variabel lingkungan Windows.
  Klik tombol Install Now untuk memulai proses instalasi.

Langkah 3: Verifikasi Instalasi Python

 Setelah instalasi selesai, buka Command Prompt (Windows + R, ketik cmd, lalu
Enter).

 Ketik perintah berikut untuk memverifikasi bahwa Python sudah terinstal

dengan benar:

python –-version

Jika Python terinstal dengan benar, Anda akan melihat versi Python yang terinstal.

Langkah 4: Install pip (Opsional, jika belum otomatis terinstal)

 Python terbaru biasanya sudah menyertakan pip. Anda bisa memeriksa

dengan perintah:

pip --version
 Jika pip belum terinstal, Anda bisa mengikuti petunjuk instalasi di situs resmi Python.

1.3 Menginstall PyCharm Community Edition

Langkah 1: Download PyCharm

 Kunjungi situs resmi JetBrains di jetbrains.com/pycharm.

 Pilih Community Edition dan klik Download.

Langkah 2: Mulai Instalasi PyCharm

 Setelah download selesai, buka file installer PyCharm.

 Ikuti petunjuk instalasi:
o Klik Next di jendela pertama.
 o Pilih lokasi instalasi atau biarkan default, lalu klik Next.
o Pada bagian Installation Options, centang kotak berikut:
 Create Desktop Shortcut: untuk membuat shortcut di desktop.
 Update PATH Variable: agar bisa menjalankan PyCharm dari command line.
 Associate .py files: agar file Python otomatis dibuka dengan PyCharm.
o Klik Install untuk memulai instalasi.

Langkah 3: Menjalankan PyCharm

 Setelah instalasi selesai, klik Finish.

 Buka PyCharm dari desktop atau menu start.
Langkah 4: Buat Project Baru di PyCharm

 Saat pertama kali membuka PyCharm, Anda akan diminta untuk mengkonfigurasi
environment.
 Pilih Create New Project.

 Tentukan lokasi proyek dan pastikan interpreter Python sudah terdeteksi.

 Klik Create untuk mulai menggunakan PyCharm.

3. Verifikasi Instalasi

 Buka PyCharm dan buat file Python baru (misalnya hello.py).

 Tulis kode berikut:

 print("Hello, World!")

 Jalankan kode dengan klik kanan pada file dan pilih Run 'hello.py'.

Jika muncul output "Hello, World!", maka PyCharm sudah terinstal dan dikonfigurasi dengan
benar.

1.4 Konfigurasi Lingkungan Virtual

Sebelum mulai mengembangkan aplikasi, disarankan untuk menggunakan virtual

environment agar dependensi proyek tidak bercampur dengan instalasi Python global.
Berikut cara membuat dan mengaktifkan virtual environment:

1. Membuat Virtual Environment:

o Buka terminal di PyCharm (atau Command Prompt).
 o Navigasi ke folder proyek Anda dan jalankan perintah berikut:

python -m venv venv

2. Mengaktifkan Virtual Environment:

o Di Windows:

venv\Scripts\activate

o Di macOS/Linux:

source venv/bin/activate

o Setelah diaktifkan, Anda akan melihat nama lingkungan virtual di awal baris
perintah.

1.5 Kesimpulan

Pada bab ini, Anda telah berhasil menginstal Python dan PyCharm serta mengkonfigurasi
lingkungan pengembangan untuk proyek Flask dan Microdot. Dengan lingkungan yang telah
disiapkan, Anda siap untuk melanjutkan ke bab berikutnya dan memulai pengembangan
aplikasi.
 Bab 2
Instalasi
Flask
Berikut adalah langkah-langkah untuk menginstall Flask di project yang sudah dibuat di
PyCharm menggunakan menu package:

1. Buka Project di PyCharm

 Buka PyCharm dan buka project yang sudah Anda buat sebelumnya.

2. Akses Menu Package

 Di jendela PyCharm, klik File > Settings (atau PyCharm > Preferences jika Anda
menggunakan macOS).

 Di jendela Settings, cari dan klik opsi Project: [nama proyek Anda] > Python
Interpreter pada menu sebelah kiri.
3. Menambahkan Flask ke Project

 Pada halaman Python Interpreter, Anda akan melihat daftar package yang sudah terinstal di
environment proyek Anda.
 Klik tombol + (di sebelah kanan atas) untuk membuka jendela Available Packages.

4. Cari Flask

 Di jendela pencarian Available Packages, ketik Flask di kolom pencarian.

 Pilih Flask dari hasil pencarian.

5. Install Flask

 Setelah memilih Flask, klik tombol Install Package yang ada di bagian bawah jendela.
 PyCharm akan secara otomatis mengunduh dan menginstall Flask di proyek Anda.
6. Verifikasi Instalasi Flask

 Setelah instalasi selesai, Flask akan muncul dalam daftar package di Python Interpreter.

 Anda juga bisa memverifikasi dengan menambahkan kode berikut di file Python:

from flask import Flask

app = Flask( name )

@app.route('/')
def
hello_world():
return 'Hello, Flask!'

if name == ' main ':

app.run()
 Jalankan file ini dengan klik kanan pada file dan pilih Run.

 Flask akan menjalankan server lokal dan Anda bisa mengaksesnya di browser dengan URL
http://127.0.0.1:5000.
 Selamat! Flask sudah berhasil diinstall di proyek PyCharm Anda.

Tips: Anda juga bisa menambahkan package dengan menekan menu package di sebelah kiri
bawah Jendela Aplikasi
 Bab 3
Membangun Website Dinamis dengan Flask dan Jinja2: Menggunakan
CSS dan JavaScript

Langkah 1: Struktur Direktori Proyek

Buat folder static dan templates dengan cara kita klik kanan di folder python kita lalu pilih file terus
directory

Buat nama static

Lakukan hal yang sama untuk membuat folder templates

Lalu kurang lebih seperti ini

Langkah 2: Buat File Flask (app.py)

Lalu buat file python untuk aplikasinya contohnya kita buat dengan nama app.py. Caranya kita klik
kanan pada folder project kita lalu pilih New – python file

Lalu kita isi Namanya dengan app.py

Kalau sudah dibuat, sekarang kita buka file app.py

Tambahkan kode berikut di file python app.py :
from flask import Flask, render_template

app = Flask( name )

@app.route('/')
def home():
return render_template('index.html', title="Home")

if name == ' main ':

app.run(debug=True)

 Penjelasan: Fungsi home() akan merender file index.html di folder templates

menggunakan Flask dan Jinja2.
Langkah 3: Buat File HTML dengan Jinja2 (index.html)

Buat file index.html di dalam folder templates dengan cara klik kanan pada folder
templates lalu Pilih New – HTML File

Beri nama index

Lalu buka file html yang sudah kita buat di templates/index.html

Ubah kode di file index.html seperti kode dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static',
filename='css/style.css') }}">
</head>
<body>
<h1>Welcome to My Flask Website</h1>
<p>This is a simple website using Flask, CSS, and JavaScript.</p>

<button id="alertButton">Click Me</button>

<script src="{{ url_for('static', filename='js/script.js')

}}"></script>
</body>
</html>

 Penjelasan:
o {{ title }} adalah contoh penggunaan Jinja2 untuk memanfaatkan
variabel Python di HTML.
o CSS dan JavaScript dihubungkan menggunakan {{
url_for('static', filename='...') }}.
Langkah 4: Buat File CSS (style.css)

Buat folder css di dalam folder static dengan cara klik kanan pada folder static lalu Pilih
New – Directory

Isi dengan nama folder nya yaitu css

Lalu kita buat file baru bernama style.css dengan cara klik kanan pada folder css lalu pilih
New – File
Ketik nama file nya, yaitu style.css

Kita buka file style.css

Lalu kita isi file style.css dengan kodingan berikut ini :

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
text-align: center;
}

h1 {
color: #333;
margin-top: 50px;
}

button {
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
}
Langkah 5: Buat File JavaScript (script.js)

Buat folder js di dalam folder static dengan cara klik kanan pada folder static lalu Pilih
New – Directory

Isi dengan nama folder nya yaitu js

Lalu kita buat file baru bernama script.css dengan cara klik kanan pada folder js lalu pilih
New – File

Ketik nama file nya, yaitu script.js

Kita buka file script.js

Lalu kita isi file script.js dengan kodingan berikut ini :

document.getElementById("alertButton").addEventListener("click", function()
{
alert("Button clicked!");
});

Langkah 6: Jalankan Flask

Kita jalankan file app.py dengan membuka file app.py lalu klik kanan Run atau dengan klik
tombol run.
Buka browser dan akses website di http://127.0.0.1:5000 .

Hasil Akhir:

Ketika Anda mengunjungi situs, Anda akan melihat halaman sederhana dengan judul,
paragraf, dan tombol. Jika Anda mengklik tombol tersebut, alert dari JavaScript akan muncul.
Secara keseluruhan struktur direktori project yang sudah kita buat adalah seperti berikut:

ProjectFlask/
│
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│
├── templates/
│ └── index.html
│
└── app.py

 Folder static: Berisi file CSS dan JavaScript.

 Folder templates: Berisi file HTML yang menggunakan Jinja2.
 Bab 4: Integrasi Perangkat Fingerprint dengan Flask
4.1 Menghubungkan Perangkat Fingerprint ke Komputer

Di bagian ini, kita akan membahas cara menghubungkan perangkat fingerprint ke komputer
menggunakan jaringan LAN. Pastikan perangkat fingerprint sudah terhubung ke jaringan
yang sama dengan komputer yang menjalankan aplikasi Flask.

 Langkah-langkah:
1. Persiapkan perangkat fingerprint dan pastikan sudah terhubung ke jaringan lokal
(LAN).
2. Catat alamat IP dari perangkat fingerprint. Alamat ini akan digunakan untuk
menghubungkan Flask dengan perangkat.
3. Pastikan port yang digunakan oleh perangkat fingerprint terbuka dan dapat diakses
dari komputer.
 Buka Alatnya tekan M/OK

 Pilih COMM Setting

 Pilih Eternet

 Pilih IP Address yang penting subnet mask yang sama

 TCP COMM Nya 4370

 DHCP Port dalam keadaan OFF
 Pastikan IP nya satu subnetmask
 Dan kabelnya tidak ada masalah
 Kita setting IP di komputer kita


 Dan kita coba ping ke ip alat fingerprintnya pastikan dibalas

 Pilih menu COMM terus PC Connection

 Comm Key biarkan 0

 Nomor Mesin itu jangan disamakan karena nanti sama untuk beda mesin

 Pilih menu User

 Terus Tambah User

 User ID itu bisa autoIncremenet tapi lebih baik kita memakai ID sendiri
  Untuk nama lebih baik kita ambil dari database jadi tulis nama panggilan saja

 Untuk Hak Akses itu User Biasa

 Untuk Superadmin itu bisa lebih dari 1 satu kita dan operator yang memelihara sistemnya

 Untuk userbiasa hanya bisa absen saja

 Lalu pilih Jari,
 Kita bisa pilih jari yang akan didaftarkan, disarankan memakai jari jempol, yang kedua cari
yang lebar. Contohnya jari tengah atau jari telunjuk.
 Kalau bisa lebih dari 1 jari, agar tidak alasan tidak bisa absen karena jarinya ada masalah
 Kita bisa pilih jari mana yang didaftarkan dengan angka nya COntohnya jari jempol kanan
maka tekan tombol 5 setelah itu OK
 Lalu kita diminta 3 kali untuk mendaftarkan
 Sebaiknya kualitas sidik jarinya lebih dari 60

 Pada saat mendaftar fingerprint yang bagus itu harus jelas , jadi jangan malu malu pada saat
mendaftarkan sidik jari
  Mesin ini memakai sensor cahaya. Jadi pada saat meletakkan alat jangan kena
cahaya langsung
 Cek IP nya, cek user nya , cek Nomer mesin nya.
 Untuk menjaga keawetan alat kita algoritma itu jangan Masuk Pulang lewat tombol
 Maka kita pakai algoritma
 Jadi pada saat masuk diambil yang paling awal dan pulang diambil yang paling akhir
 Tapi jangan langsung dicoba tapi kita lihat berdasarkan data yang dipakai dulu baru kita
algoritmakan
 Posisikan yang enak, jangan terlalu tinggi dan jangan terlalu rendah
 Bagaimana kalua orangnya banyak, kita pecah jaraknya
 Makanya Konsepnya harus benar, Lokasi nya yang tepat, manajemen tata letak alat juga
 Bagaimana apabila pada saat absen tiba tiba data terputus ?
 Jadi ada peluang lost disitu, solusinya bagaimana ?

4.2 Menggunakan Library untuk Komunikasi dengan Perangkat Fingerprint

Kita akan menggunakan zklib, sebuah library yang dirancang untuk berkomunikasi dengan
perangkat fingerprint dari ZKTeco.

Instalasi ZKLib:

 Buka project python kita di pycharm

 Lalu kita tambahkan package zklib

 Klik Install Package

atau

 Tunggu sampai package selesai di install

Membuat Koneksi dengan Perangkat Fingerprint:

Dalam file Python Flask Anda, import library zklib dan buat koneksi ke perangkat
fingerprint.

from zk import ZK, const

zk = ZK('192.168.1.201', port=4370, timeout=5) # Ganti dengan IP perangkat

fingerprint Anda
conn = zk.connect()
conn.connect() # Koneksi ke perangkat

Mengecek Koneksi: Setelah terhubung, Anda dapat memverifikasi koneksi dengan

memanggil fungsi get_device_info().

device_info = conn.get_device_info()
print(device_info)

4.3 Mengimplementasikan Fungsi untuk Mengambil dan Menyimpan Data Absensi

 Membuat Fungsi untuk Mengambil Data Absensi: Buat fungsi yang

mengambil data absensi dari perangkat fingerprint.

def get_attendance():
attendance_data = conn.get_attendance()
return attendance_data
  Menyimpan Data ke Database SQLite: Buat skema database SQLite untuk
menyimpan data absensi. Pastikan Anda telah menginstal SQLite.

import sqlite3

# Membuat koneksi ke database SQLite

conn_db = sqlite3.connect('attendance.db')
cursor = conn_db.cursor()

# Membuat tabel jika belum ada

cursor.execute('''
CREATE TABLE IF NOT EXISTS attendance
( id INTEGER PRIMARY KEY
AUTOINCREMENT,
user_id INTEGER,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
)
''')
conn_db.commit()

 Mengimplementasikan Fungsi untuk Menyimpan Data: Berikut adalah fungsi

untuk menyimpan data absensi ke database.

def save_attendance(attendance_data):
for record in attendance_data:
user_id = record.user_id # Sesuaikan dengan struktur data
yang diterima
cursor.execute('INSERT INTO attendance (user_id) VALUES (?)',
(user_id,))
conn_db.commit()

 Menggabungkan Semuanya dalam Route Flask: Anda dapat mengatur route Flask
untuk mengakses fungsi ini.

from flask import Flask

app = Flask( name )

@app.route('/fetch_attendance')
def fetch_attendance():
attendance_data = get_attendance()
save_attendance(attendance_data)
return "Data absensi berhasil diambil dan disimpan."

4.4 Menjalankan Aplikasi Flask

 Menjalankan Aplikasi: Setelah semua fungsi diimplementasikan, Anda

dapat menjalankan aplikasi Flask.

python app.py

 Mengakses Endpoint: Anda dapat mengakses endpoint /fetch_attendance di

browser atau menggunakan tools seperti Postman untuk menguji pengambilan
dan penyimpanan data absensi.

Kesimpulan
Bab ini telah menjelaskan bagaimana cara menghubungkan perangkat fingerprint ke
komputer menggunakan Flask, serta mengimplementasikan fungsi untuk mengambil dan
menyimpan data absensi ke dalam database SQLite. Dengan integrasi ini, aplikasi Anda
dapat secara otomatis merekam kehadiran pengguna berdasarkan data dari perangkat
fingerprint.
Bab 5: Membangun CRUD untuk Pengguna dengan Template SB Admin

5.1 Pendahuluan

Di bagian ini, kita akan membangun antarmuka pengguna menggunakan template SB Admin.
Kita akan membuat halaman dashboard yang mencakup fitur CRUD (Create, Read, Update,
Delete) untuk mengelola data pengguna. Template ini memberikan tampilan yang responsif
dan modern.

5.2 Struktur Folder dan File

Struktur folder untuk aplikasi Flask dengan template SB Admin akan terlihat seperti ini:

/project_root
│
├── /templates
│ ├── /base.html
│ ├── /dashboard.html
│ ├── /user
│ │ ├── index.html
│ │ ├── create.html
│ │ └── edit.html
│ └── /partials
│ ├── sidebar.html
│ └── header.html
│
├── app.py
└── requirements.txt

5.3 Mengatur Template Base

 Membuat File base.html: Buat file base.html yang akan menjadi template dasar
untuk semua halaman. Ini akan memuat CSS dan JavaScript dari template SB Admin.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstra
p.min.css">
<link rel="stylesheet" href="{{ url_for('static',
filename='css/sb-admin.css') }}">
<title>{% block title %}Dashboard{% endblock %}</title>
</head>
<body>
{% include 'partials/header.html' %}
{% include 'partials/sidebar.html' %}
<div class="container-fluid">
{% block content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js"></script>
 <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.b
undle.min.js"></script>
</body>
</html>

5.4 Membuat Halaman Dashboard

 Membuat File dashboard.html: Buat file dashboard.html untuk

menampilkan informasi ringkas dari aplikasi.

{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<h1 class="mt-4">Dashboard</h1>
<div class="row">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-
primary text-uppercase mb-1">Total Pengguna</div>
<div class="h5 mb-0 font-weight-bold text-
gray-800">{{ total_users }}</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-gray-
300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

5.5 Membuat Halaman User

 Membuat File index.html: Buat file index.html dalam folder user untuk
menampilkan daftar pengguna.

{% extends 'base.html' %}

{% block title %}Daftar Pengguna{% endblock %}

{% block content %}
<h1 class="mt-4">Daftar Pengguna</h1>
<a href="{{ url_for('create_user') }}" class="btn btn-primary mb-
3">Tambah Pengguna</a>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
 </tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<a href="{{ url_for('edit_user', user_id=user.id) }}"
class="btn btn-warning">Edit</a>
<a href="{{ url_for('delete_user', user_id=user.id)
}}" class="btn btn-danger">Hapus</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

5.6 Membuat Halaman Create dan Edit

 Membuat File create.html: Buat file create.html untuk form

penambahan pengguna baru.

{% extends 'base.html' %}

{% block title %}Tambah Pengguna{% endblock %}

{% block content %}
<h1 class="mt-4">Tambah Pengguna</h1>
<form action="{{ url_for('create_user') }}" method="POST">
<div class="form-group">
<label for="name">Nama</label>
<input type="text" class="form-control" id="name" name="name"
required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email" required>
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
{% endblock %}

 Membuat File edit.html: Buat file edit.html untuk form mengedit data
pengguna yang sudah ada.

{% extends 'base.html' %}

{% block title %}Edit Pengguna{% endblock %}

{% block content %}
<h1 class="mt-4">Edit Pengguna</h1>
<form action="{{ url_for('edit_user', user_id=user.id) }}"
method="POST">
<div class="form-group">
<label for="name">Nama</label>
 <input type="text" class="form-control" id="name" name="name"
value="{{ user.name }}" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email" value="{{ user.email }}" required>
</div>
<button type="submit" class="btn btn-warning">Perbarui</button>
</form>
{% endblock %}

5.7 Mengatur Route Flask untuk CRUD

 Mengatur Route: Di file app.py, atur route untuk mengelola pengguna.

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

import sqlite3

app = Flask( name )

def get_db_connection():
conn = sqlite3.connect('attendance.db')
conn.row_factory = sqlite3.Row
return conn

@app.route('/dashboard')
def dashboard():
conn = get_db_connection()
total_users = conn.execute('SELECT COUNT(*) FROM
users').fetchone()[0]
conn.close()
return render_template('dashboard.html', total_users=total_users)

@app.route('/user')
def user_index():
conn = get_db_connection()
users = conn.execute('SELECT * FROM users').fetchall()
conn.close()
return render_template('user/index.html', users=users)

@app.route('/user/create', methods=('GET', 'POST'))

def create_user():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
conn = get_db_connection()
conn.execute('INSERT INTO users (name, email) VALUES (?, ?)',
(name, email))
conn.commit()
conn.close()
return redirect(url_for('user_index'))
return render_template('user/create.html')

@app.route('/user/edit/<int:user_id>', methods=('GET', 'POST'))

def edit_user(user_id):
conn = get_db_connection()
user = conn.execute('SELECT * FROM users WHERE id = ?',
(user_id,)).fetchone()
if request.method == 'POST':
 name = request.form['name']
email = request.form['email']
conn.execute('UPDATE users SET name = ?, email = ? WHERE id =
?', (name, email, user_id))
conn.commit()
conn.close()
return redirect(url_for('user_index'))
return render_template('user/edit.html', user=user)

@app.route('/user/delete/<int:user_id>', methods=('GET', 'POST'))

def delete_user(user_id):
conn = get_db_connection()
conn.execute('DELETE FROM users WHERE id = ?', (user_id,))
conn.commit()
conn.close()
return redirect(url_for('user_index'))

if name == ' main ':

app.run(debug=True)

5.8 Kesimpulan

Pada bab ini, kita telah berhasil membangun aplikasi CRUD untuk pengguna dengan
menggunakan template SB Admin. Dengan ini, kita dapat mengelola data pengguna melalui
antarmuka yang menarik dan responsif.

Catatan: Pastikan untuk menyesuaikan koneksi database dan struktur tabel sesuai kebutuhan
proyek Anda.
 Bab 6
Merekam dan Mengelola Data Log dari Fingerprint
6.1 Menyimpan Data Log ke dalam Database

Pada bagian ini, Anda akan mempelajari bagaimana merekam data log absensi yang diambil
dari perangkat fingerprint ke dalam database SQLite. Data yang akan direkam meliputi ID
pengguna, waktu masuk, dan waktu keluar.

1. Membuat Tabel untuk Pencatatan Absensi Pastikan Anda telah membuat tabel di
database SQLite untuk menyimpan data log absensi. Anda bisa menggunakan
skema tabel berikut:

CREATE TABLE IF NOT EXISTS attendance

( id INTEGER PRIMARY KEY
AUTOINCREMENT,
user_id INTEGER,
timestamp DATETIME,
status TEXT,
FOREIGN KEY (user_id) REFERENCES users(id)
);

2. Menghubungkan dan Merekam Data dari Perangkat Fingerprint Anda perlu

menyiapkan fungsi untuk berkomunikasi dengan perangkat fingerprint dan merekam
data ke dalam tabel absensi. Fungsi ini akan diintegrasikan dengan library zklib
yang telah Anda gunakan.

Contoh kode untuk merekam data absensi:

from zklib import ZK, const

import sqlite3
from datetime import datetime

zk = ZK('192.168.1.201', port=4370, timeout=5, password=0)

conn = sqlite3.connect('absensi.db')

def record_attendance():
try:
zk.connect()
users = zk.get_users()
attendance = zk.get_attendance()

for record in attendance:

user_id = record.user_id
timestamp =
datetime.fromtimestamp(record.timestamp).strftime('%Y-%m-%d
%H:%M:%S')
status = record.state

# Simpan ke database
cursor = conn.cursor()
cursor.execute("INSERT INTO attendance (user_id,
timestamp, status) VALUES (?, ?, ?)",
(user_id, timestamp, status))
conn.commit()
 zk.disable_device()
except Exception as e:
print(f"Error: {e}")
finally:
conn.close()

6.2 Mengatur Tabel Log untuk Pencatatan Absensi

Setelah Anda menyimpan data absensi, penting untuk mengatur tampilan dan pengelolaan
data log ini. Anda akan membuat halaman untuk menampilkan data absensi yang telah
direkam.

1. Membuat Halaman untuk Menampilkan Data Absensi Buatlah file

attendance.html di dalam folder templates/ untuk menampilkan log absensi.

Contoh attendance.html:

{% extends 'base.html' %}

{% block title %}Log Absensi{% endblock %}

{% block content %}
<h1>Log Absensi</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>User ID</th>
<th>Waktu</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for record in attendance %}
<tr>
<td>{{ record.id }}</td>
<td>{{ record.user_id }}</td>
<td>{{ record.timestamp }}</td>
<td>{{ record.status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

2. Membuat Route untuk Menampilkan Data Absensi Tambahkan route di app.py

untuk mengambil data dari tabel absensi dan menampilkannya di halaman
attendance.html.

@app.route('/attendance')
def attendance_index():
conn = sqlite3.connect('absensi.db')
cursor = conn.cursor()
cursor.execute("SELECT * FROM
attendance") attendance =
cursor.fetchall() conn.close()
return render_template('attendance.html', attendance=attendance)
6.3 Kesimpulan

Dalam bab ini, Anda telah berhasil merekam data log dari perangkat fingerprint ke dalam
database SQLite. Anda juga telah mengatur tampilan untuk menampilkan data absensi
melalui halaman web. Dengan ini, Anda dapat mengelola data absensi dengan lebih efektif.

Selanjutnya, Anda dapat melanjutkan ke bab berikutnya, yang akan membahas tentang
analisis data menggunakan teknik data science.
Bab 7: Data Science untuk Prediksi Keterlambatan dengan Naive Bayes

7.1 Pengantar Data Science

Data science adalah disiplin ilmu yang menggabungkan statistik, analisis data, dan
pemrograman untuk memahami dan memprediksi data. Dalam konteks ini, kita akan
menggunakan data absensi siswa untuk membangun model yang dapat memprediksi
kemungkinan keterlambatan siswa berdasarkan data yang ada.

7.2 Menyiapkan Lingkungan

Sebelum mulai, pastikan Anda telah menginstal pustaka yang diperlukan:

pip install pandas scikit-learn

7.3 Mengumpulkan dan Mempersiapkan Data Absensi

Kita akan mengumpulkan data absensi siswa dari database SQLite yang telah dibuat
sebelumnya. Misalkan tabel absensi kita memiliki struktur berikut:

CREATE TABLE IF NOT EXISTS rekap_attendance (

id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER,
tanggal DATE,
jam_masuk DATETIME,
jam_pulang DATETIME,
durasi_kerja TEXT,
is_late INTEGER,
is_early_leave INTEGER,
FOREIGN KEY (user_id) REFERENCES users(id)
);

7.4 Mengambil Data dari Database

Kita akan menggunakan pandas untuk mengambil data dari database dan
mempersiapkannya untuk analisis. Berikut adalah contoh pengambilan data:

import sqlite3
import pandas as pd

# Koneksi ke database
conn = sqlite3.connect('attendance.db')

# Mengambil data absensi

query = "SELECT user_id, tanggal, jam_masuk, is_late FROM rekap_attendance"
data = pd.read_sql_query(query, conn)

conn.close()

# Menampilkan data
print(data.head())

7.5 Mempersiapkan Data untuk Model

Sebelum membangun model, kita perlu mempersiapkan data dengan:

 Mengonversi kolom waktu menjadi format yang sesuai

 Mengubah nilai target (is_late) menjadi format yang bisa digunakan untuk pelatihan model

# Mengonversi kolom tanggal dan jam_masuk ke datetime

data['tanggal'] = pd.to_datetime(data['tanggal'])
data['jam_masuk'] = pd.to_datetime(data['jam_masuk']).dt.time

# Mengubah 'is_late' menjadi kategorikal

data['is_late'] = data['is_late'].astype('category')

7.6 Membangun Model Naive Bayes

Setelah data siap, kita bisa melanjutkan untuk membangun model Naive Bayes.

from sklearn.model_selection import train_test_split

from sklearn.naive_bayes import GaussianNB
from sklearn.metrics import accuracy_score

# Membagi data menjadi fitur dan label

X = data[['user_id']] # Fitur (misal: user_id)
y = data['is_late'] # Label

# Membagi data menjadi data latih dan data uji

X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2,
random_state=42)

# Membangun model
model = GaussianNB()
model.fit(X_train, y_train)

# Melakukan prediksi
y_pred = model.predict(X_test)

# Menghitung akurasi
accuracy = accuracy_score(y_test, y_pred)
print(f"Akurasi model: {accuracy:.2f}")

7.7 Menyimpan Model ke File Pickle

Setelah model dibuat, kita perlu menyimpan model yang sudah dilatih ke file menggunakan
pickle, agar bisa digunakan di aplikasi Flask.

import pickle

# Menyimpan model
with open('naive_bayes_model.pkl', 'wb') as model_file:
pickle.dump(model, model_file)

7.8 Mengintegrasikan Model dengan Flask

Setelah model disimpan, kita bisa mengintegrasikannya ke dalam aplikasi Flask untuk
melakukan prediksi keterlambatan siswa berdasarkan data yang baru.

from flask import Flask, request, jsonify

import pickle

app = Flask( name )

# Memuat model
with open('naive_bayes_model.pkl', 'rb') as model_file:
model = pickle.load(model_file)

@app.route('/predict', methods=['POST'])
def predict():
user_id = request.json['user_id']
prediction = model.predict([[user_id]])
return jsonify({'is_late': prediction[0]})

if name == ' main ':

app.run(debug=True)

7.9 Kesimpulan

Pada bab ini, kita telah berhasil membangun model prediksi keterlambatan siswa
menggunakan algoritma Naive Bayes. Kita juga telah mempersiapkan data dari database dan
menyimpan model untuk digunakan di aplikasi Flask. Dengan model ini, kita dapat membuat
prediksi yang lebih baik mengenai keterlambatan siswa di masa mendatang.
Bab 8: Mengintegrasikan Model Prediksi ke dalam Flask

Pendahuluan

Setelah kita melatih model prediksi menggunakan algoritma Naive Bayes dan menyimpannya
dalam bentuk file pickle, langkah selanjutnya adalah mengintegrasikan model ini ke dalam
aplikasi Flask. Dengan melakukan ini, kita dapat membuat endpoint yang memungkinkan
pengguna untuk mengakses prediksi keterlambatan siswa secara real-time. Di bab ini, kita
akan belajar cara menggunakan file pickle untuk memuat model, menyiapkan endpoint Flask
untuk mengakses prediksi, dan menampilkan hasil prediksi dalam antarmuka pengguna.

8.1 Menggunakan File Pickle untuk Model Prediksi

Untuk menggunakan model yang telah dilatih dalam aplikasi Flask, kita perlu memuat model
tersebut dari file pickle yang telah kita buat sebelumnya.

1. Memuat Model Kita akan menggunakan library pickle untuk memuat model yang
disimpan.

Contoh kode untuk memuat model:

import pickle

def load_model():
with open('model_naive_bayes.pkl', 'rb') as f:
model = pickle.load(f)
return model

8.2 Menyiapkan Endpoint Flask untuk Mengakses Prediksi

Setelah model dimuat, kita akan menyiapkan endpoint dalam aplikasi Flask yang akan
menerima input dan memberikan prediksi.

1. Menambahkan Endpoint untuk Prediksi Kita akan menambahkan route baru di

app.py yang akan menerima data dari pengguna dan memberikan prediksi
berdasarkan data tersebut.

Contoh kode untuk menambahkan endpoint:

from flask import Flask, request, jsonify

app = Flask( name )

model = load_model() # Memuat model saat aplikasi dijalankan

@app.route('/predict', methods=['POST'])
def predict():
# Mendapatkan data dari request
data = request.json
hour = data['hour'] # Mengambil jam dari input

# Membuat prediksi
prediction = model.predict([[hour]])
result = 'late' if prediction[0] == 1 else 'on time'
 return jsonify({'prediction': result})

8.3 Menampilkan Hasil Prediksi dalam Antarmuka Pengguna

Kita perlu membuat antarmuka pengguna untuk mengirim data dan menampilkan hasil
prediksi. Kita akan membuat halaman HTML baru yang memungkinkan pengguna untuk
memasukkan data dan mendapatkan prediksi.

1. Membuat Formulir untuk Input Data Di dalam folder templates, kita akan
membuat file baru bernama predict.html yang berisi formulir untuk
memasukkan jam absensi.

Contoh kode untuk predict.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="{{ url_for('static',
filename='css/style.css') }}">
<title>Prediksi Keterlambatan</title>
</head>
<body>
<h1>Prediksi Keterlambatan Siswa</h1>
<form id="predict-form">
<label for="hour">Jam Masuk (0-23):</label>
<input type="number" id="hour" name="hour" min="0" max="23"
required>
<button type="submit">Prediksi</button>
</form>
<h2 id="result"></h2>

<script>
document.getElementById('predict-form').onsubmit = async
function(e) {
e.preventDefault();
const hour = document.getElementById('hour').value;

const response = await fetch('/predict',

{ method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ hour }),
});

const data = await response.json();

document.getElementById('result').innerText = 'Hasil
Prediksi: ' + data.prediction;
};
</script>
</body>
</html>
 2. Menambahkan Route untuk Halaman Prediksi Kita juga perlu
menambahkan route untuk menampilkan halaman ini di app.py.

Contoh kode untuk menambahkan route:

@app.route('/predict_page')
def predict_page():
return render_template('predict.html')

Kesimpulan

Di bab ini, Anda telah belajar bagaimana mengintegrasikan model prediksi keterlambatan
siswa ke dalam aplikasi Flask. Anda telah mempelajari cara memuat model dari file pickle,
menyiapkan endpoint untuk menerima input dan memberikan prediksi, serta menampilkan
hasil prediksi dalam antarmuka pengguna. Integrasi ini memungkinkan aplikasi Anda untuk
memberikan analisis dan prediksi secara real-time kepada pengguna.

Selanjutnya, kita akan membahas bagaimana membangun dashboard menggunakan Microdot

di Raspberry Pi Pico W untuk menampilkan data absensi dan prediksi.
Bab 9: Membangun Dashboard dengan Microdot di Raspberry Pi Pico W

Pendahuluan

Setelah berhasil mengintegrasikan model prediksi ke dalam aplikasi Flask, langkah

selanjutnya adalah membangun dashboard yang akan berjalan di Raspberry Pi Pico W.
Dashboard ini akan menampilkan data absensi dan hasil prediksi keterlambatan siswa. Dalam
bab ini, kita akan menyiapkan Microdot untuk Raspberry Pi Pico W, mendesain antarmuka
dashboard, dan menghubungkannya dengan aplikasi Flask untuk mengambil data secara real-
time.

9.1 Menyiapkan Microdot untuk Raspberry Pi Pico W

Microdot adalah framework ringan yang memungkinkan kita untuk menjalankan aplikasi
web di perangkat mikrokontroler seperti Raspberry Pi Pico W. Pertama, kita perlu
memastikan bahwa kita telah menginstal Microdot di Raspberry Pi Pico W.

1. Instalasi Microdot
o Pastikan Anda telah mengunduh Microdot dan pustaka yang diperlukan
untuk Raspberry Pi Pico W.
o Salin file Microdot ke direktori proyek Anda.
2. Membuat Struktur Folder Proyek Microdot Buat struktur folder berikut di
Raspberry Pi Pico W:

bash
Salin kode
/pico_dashboard/
├── main.py
└── templates/
└── dashboard.html

9.2 Mendesain Dashboard untuk Menampilkan Data Absensi dan Prediksi

Kita akan membuat file HTML bernama dashboard.html yang akan digunakan
untuk menampilkan data absensi dan hasil prediksi. Dashboard ini akan mengambil
data dari aplikasi Flask yang berjalan di komputer.

1. Membuat Dashboard HTML Contoh kode untuk dashboard.html:

html
Salin kode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Dashboard Absensi</title>
</head>
<body>
<h1>Dashboard Absensi Siswa</h1>
<div id="attendance-data">
<h2>Data Absensi</h2>
<table id="attendance-table">
 <thead>
<tr>
<th>Nama</th>
<th>Jam Masuk</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!-- Data absensi akan ditambahkan di sini -->
</tbody>
</table>
</div>
<div id="prediction-result">
<h2>Prediksi Keterlambatan</h2>
<p id="predicted-status">Hasil Prediksi: </p>
</div>
</body>
</html>

9.3 Menghubungkan Dashboard dengan Flask untuk Mengambil Data Secara Real-
Time

Untuk mendapatkan data absensi dan prediksi dari aplikasi Flask, kita perlu mengatur
endpoint di Flask yang dapat diakses oleh Microdot.

1. Menambahkan Endpoint di Flask Tambahkan endpoint yang akan

memberikan data absensi dan prediksi ke aplikasi Flask Anda.

Contoh kode untuk menambahkan endpoint:

@app.route('/attendance_data', methods=['GET'])
def attendance_data():
# Ambil data absensi dari database
attendance = get_attendance_data() # Ganti dengan fungsi yang
sesuai
return jsonify(attendance)

2. Mengambil Data di Microdot Di dalam main.py untuk Raspberry Pi Pico W,

kita akan mengatur server Microdot dan mengambil data dari Flask.

Contoh kode untuk main.py:

from microdot import Microdot

import urequests

app = Microdot()

@app.route('/')
def index():
return open('templates/dashboard.html').read()

@app.route('/attendance')
def attendance():
response =
urequests.get('http://<IP_FLASK_SERVER>/attendance_data')
return response.json()
 app.run(host='0.0.0.0', port=80)

9.4 Menampilkan Data di Dashboard

Selanjutnya, kita perlu memperbarui bagian dalam dashboard.html untuk mengambil data
absensi dan menampilkannya di tabel.

1. Menggunakan JavaScript untuk Mengambil dan Menampilkan Data Tambahkan

skrip JavaScript dalam dashboard.html untuk mendapatkan data dari endpoint
Flask dan menampilkannya di halaman.

Contoh kode untuk mengambil dan menampilkan data:

<script>
async function fetchAttendance() {
const response = await fetch('/attendance');
const data = await response.json();
const tableBody = document.querySelector('#attendance-table
tbody');
tableBody.innerHTML = ''; // Menghapus data lama

data.forEach(record => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${record.name}</td>
<td>${record.check_in}</td>
<td>${record.status}</td>
`;
tableBody.appendChild(row);
});
}

// Panggil fungsi untuk mengambil data saat halaman dimuat

window.onload = fetchAttendance;
</script>

Kesimpulan

Di bab ini, Anda telah belajar cara membangun dashboard menggunakan Microdot di
Raspberry Pi Pico W. Anda telah mempelajari cara menyiapkan Microdot, mendesain
antarmuka dashboard, dan menghubungkannya dengan aplikasi Flask untuk mengambil data
absensi dan hasil prediksi secara real-time. Dengan dashboard ini, Anda dapat memantau data
absensi siswa dan mendapatkan prediksi keterlambatan dengan mudah.

Selanjutnya, kita akan membahas bagaimana melakukan pengujian dan penanganan

kesalahan dalam aplikasi ini.
Bab 10: Pengujian dan Penanganan Kesalahan

Pendahuluan

Setelah membangun aplikasi yang lengkap dengan integrasi fingerprint, dashboard, dan
model prediksi, penting untuk melakukan pengujian untuk memastikan bahwa semuanya
berfungsi dengan baik. Pengujian yang menyeluruh akan membantu mengidentifikasi
kesalahan dan mengoptimalkan kinerja aplikasi. Dalam bab ini, kita akan membahas cara
melakukan pengujian aplikasi Flask, menangani kesalahan yang mungkin terjadi, serta
praktik terbaik dalam pengujian.

10.1 Menguji Aplikasi Flask Secara Menyeluruh

Untuk memastikan aplikasi Flask berfungsi sesuai harapan, kita perlu melakukan pengujian
pada berbagai komponen, termasuk route, fungsi, dan integrasi dengan database.

1. Menggunakan Framework Pengujian Flask menyediakan dukungan untuk

pengujian menggunakan unittest dan pytest. Kita akan menggunakan
pytest dalam contoh ini.

Instalasi pytest:

pip install pytest

2. Membuat File Pengujian Buat file pengujian baru bernama test_app.py di

dalam direktori proyek.

Contoh struktur file:

ProjectFlask/
├── static/
├── templates/
├── app.py
└── test_app.py

3. Menulis Pengujian untuk Route Di dalam test_app.py, kita akan menulis

pengujian untuk memastikan setiap route berfungsi dengan baik.

Contoh kode pengujian:

import pytest
from app import app # Pastikan untuk menyesuaikan dengan nama file
Anda

@pytest.fixture
def client():
with app.test_client() as client:
yield client

def test_index(client):
response = client.get('/')
assert response.status_code == 200
assert b'Dashboard' in response.data
 def test_attendance_data(client):
response = client.get('/attendance_data')
assert response.status_code == 200
assert b'absensi' in response.data # Ganti dengan data yang
relevan

10.2 Menangani Kesalahan Umum yang Mungkin Terjadi

Selama penggunaan aplikasi, berbagai kesalahan mungkin muncul. Menangani kesalahan

dengan baik akan memberikan pengalaman pengguna yang lebih baik dan membantu dalam
pemecahan masalah.

1. Menangani Kesalahan HTTP Kita dapat menggunakan decorator Flask untuk

menangani kesalahan HTTP tertentu, seperti 404 (Not Found) dan 500
(Internal Server Error).

Contoh penanganan kesalahan:

@app.errorhandler(404)
def page_not_found(e):
return "Halaman tidak ditemukan", 404

@app.errorhandler(500)
def internal_error(e):
return "Terjadi kesalahan internal", 500

2. Membuat Log Kesalahan Mencatat kesalahan dalam log akan membantu dalam
pemecahan masalah. Kita bisa menggunakan modul logging untuk mencatat
kesalahan.

Contoh pengaturan logging:

import logging

logging.basicConfig(filename='error.log', level=logging.ERROR)

@app.errorhandler(Exception)
def handle_exception(e):
logging.error(f'Error occurred: {e}')
return "Terjadi kesalahan, silakan coba lagi.", 500

10.3 Pengujian dan Penanganan Kesalahan di Microdot

Jika Anda juga menggunakan Microdot di Raspberry Pi Pico W, penting untuk melakukan
pengujian dan penanganan kesalahan di sisi tersebut.

1. Menangani Kesalahan pada Endpoint Microdot Anda bisa menerapkan

penanganan kesalahan serupa di aplikasi Microdot.

Contoh penanganan kesalahan di Microdot:

@app.route('/attendance')
def attendance():
 try:
response =
urequests.get('http://<IP_FLASK_SERVER>/attendance_data')
response.raise_for_status() # Memicu error untuk status kode
HTTP yang tidak berhasil
return response.json()
except Exception as e:
return {"error": "Gagal mengambil data absensi"}, 500

Kesimpulan

Di bab ini, Anda telah mempelajari pentingnya pengujian aplikasi dan cara menangani
kesalahan yang mungkin terjadi. Dengan melakukan pengujian yang menyeluruh dan
menangani kesalahan dengan baik, Anda dapat memastikan aplikasi yang lebih stabil dan
mudah digunakan. Pastikan untuk menjalankan pengujian secara rutin saat melakukan
perubahan pada aplikasi.

Di bab selanjutnya, kita akan membahas langkah-langkah untuk melakukan deployment

aplikasi dan penggunaan di lingkungan nyata.
Bab 11: Deployment dan Penggunaan di Lapangan

Pendahuluan

Setelah mengembangkan aplikasi dengan berbagai fitur yang diperlukan untuk manajemen
absensi siswa dan analisis data, langkah berikutnya adalah melakukan deployment aplikasi ke
lingkungan nyata. Deployment yang tepat akan memastikan bahwa aplikasi dapat diakses dan
digunakan oleh pengguna akhir dengan efektif. Dalam bab ini, kita akan membahas langkah-
langkah untuk melakukan deployment aplikasi Flask dan Microdot, serta penggunaan aplikasi
di lapangan.

11.1 Menyiapkan Lingkungan untuk Deployment

Sebelum melakukan deployment, Anda perlu menyiapkan lingkungan server yang akan
menjalankan aplikasi Flask. Berikut adalah beberapa langkah yang perlu diperhatikan:

1. Memilih Hosting Pilih platform hosting yang sesuai, seperti DigitalOcean, Heroku,
atau VPS (Virtual Private Server) yang bisa diatur sendiri. Pastikan platform
tersebut mendukung Python dan Flask.
2. Menginstal Dependensi Setelah mengakses server, instal Python dan dependensi
yang diperlukan menggunakan pip.

sudo apt update

sudo apt install python3 python3-pip
pip install flask zklib

3. Menyebarkan Kode Aplikasi Anda dapat menggunakan git untuk meng-

clone repository aplikasi Anda ke server atau meng-upload file secara manual.

git clone https://github.com/username/ProjectFlask.git

cd ProjectFlask

11.2 Mengkonfigurasi Server untuk Menjalankan Aplikasi

Untuk menjalankan aplikasi Flask di server, Anda perlu mengatur server agar dapat meng-
handle permintaan HTTP.

1. Menjalankan Aplikasi dengan Gunicorn Gunicorn adalah server WSGI yang

efisien untuk aplikasi Flask. Install Gunicorn dengan perintah:

pip install gunicorn

Setelah terinstal, jalankan aplikasi Anda dengan Gunicorn:

gunicorn app:app -b 0.0.0.0:8000

Di sini, app:app merujuk pada nama file dan nama objek Flask Anda.

2. Mengatur Nginx sebagai Reverse Proxy Jika Anda ingin mengakses aplikasi
melalui HTTP (port 80) atau HTTPS (port 443), Anda bisa menggunakan
Nginx sebagai reverse proxy.
 Instalasi Nginx:

sudo apt install nginx

Mengatur Nginx: Buat file konfigurasi untuk aplikasi Anda di /etc/nginx/sites-

available/ dan buat symlink di sites-enabled.

server {
listen 80;
server_name your_domain_or_IP;

location / {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}

Setelah selesai, restart Nginx:

sudo systemctl restart nginx

11.3 Menggunakan Aplikasi di Lingkungan Nyata

Setelah aplikasi berhasil dideploy, langkah selanjutnya adalah penggunaannya di lapangan.

1. Mengakses Aplikasi Aplikasi dapat diakses melalui browser dengan menggunakan

URL yang sesuai (domain atau IP server). Pastikan semua fitur berfungsi dengan
baik di lingkungan nyata.
2. Pelatihan Pengguna Berikan pelatihan kepada pengguna, seperti guru dan
administrator, untuk menggunakan aplikasi secara efektif. Hal ini termasuk
cara masuk, cara mencatat absensi, dan cara mengakses data analitik.
3. Monitoring dan Pemeliharaan Lakukan monitoring terhadap aplikasi untuk
memastikan tidak ada masalah teknis. Anda juga dapat menerapkan log
untuk mencatat aktivitas pengguna dan kesalahan yang terjadi.
4. Feedback dari Pengguna Kumpulkan umpan balik dari pengguna untuk
meningkatkan aplikasi. Tanyakan tentang fitur yang mereka butuhkan dan
masalah yang mereka temui selama menggunakan aplikasi.

Kesimpulan

Di bab ini, Anda telah mempelajari cara melakukan deployment aplikasi Flask dan Microdot
ke lingkungan nyata, serta penggunaan aplikasi oleh pengguna akhir. Langkah-langkah yang
tepat dalam deployment dan pelatihan pengguna sangat penting untuk keberhasilan
implementasi aplikasi. Pada bab selanjutnya, kita akan menyimpulkan pembelajaran dari
modul ini dan menyusun rencana pengembangan untuk fitur tambahan di masa depan.
Bab 12: Penutup dan Rencana Pengembangan Selanjutnya

Pendahuluan

Modul ini telah membawa Anda melalui proses pengembangan aplikasi manajemen absensi
siswa menggunakan Flask dan Microdot di Raspberry Pi Pico W. Dari instalasi dasar hingga
penerapan model prediksi menggunakan metode data science, setiap langkah telah dirancang
untuk memberikan pemahaman yang mendalam dan keterampilan praktis. Di bab penutup ini,
kita akan merangkum pembelajaran dari modul ini dan mendiskusikan ide-ide untuk
pengembangan fitur tambahan di masa depan.

12.1 Merangkum Pembelajaran

1. Instalasi dan Pengaturan Lingkungan Pengembangan:

o Anda telah berhasil menginstal Python, PyCharm, dan Flask serta
menyiapkan proyek dasar dengan struktur folder yang terorganisir.
2. Membangun Website Dinamis:
o Anda telah belajar bagaimana membangun website dinamis menggunakan Flask dan
Jinja2, serta mengintegrasikan CSS dan JavaScript untuk meningkatkan antarmuka
pengguna.
3. Integrasi Perangkat Fingerprint:
o Proses menghubungkan perangkat fingerprint ke aplikasi Flask telah dijelaskan,
termasuk menggunakan library zklib untuk komunikasi dan penyimpanan
data absensi ke dalam SQLite.
4. Implementasi CRUD dan Dashboard:
o Anda telah mempelajari cara membangun fitur CRUD untuk mengelola data
pengguna dan mengatur tampilan dashboard menggunakan template SB
Admin.
5. Analisis Data dan Prediksi:
o Dengan menggunakan teknik data science, Anda telah menerapkan analisis
deskriptif dan metode prediksi Naive Bayes untuk membantu dalam
penanganan absensi siswa.
6. Deployment dan Penggunaan di Lapangan:
o Langkah-langkah untuk melakukan deployment aplikasi di server dan pelatihan
pengguna di lapangan telah dibahas secara rinci.

12.2 Rencana Pengembangan Selanjutnya

Setelah menyelesaikan modul ini, terdapat banyak potensi untuk pengembangan lebih lanjut.
Beberapa ide yang dapat dipertimbangkan adalah:

1. Fitur Notifikasi:
o Tambahkan sistem notifikasi kepada orang tua melalui email atau SMS tentang
kehadiran atau keterlambatan anak mereka. Hal ini dapat dilakukan dengan
menggunakan API dari layanan pihak ketiga.
2. Analisis Data Lanjutan:
o Kembangkan lebih lanjut analisis data dengan menerapkan algoritma machine
learning lain untuk memprediksi pola absensi dan keterlambatan yang lebih
kompleks.
3. Integrasi dengan Sistem Informasi Sekolah:
 o Pertimbangkan untuk mengintegrasikan aplikasi ini dengan sistem informasi sekolah
yang sudah ada agar data absensi dapat digunakan secara lebih luas.
4. Peningkatan Antarmuka Pengguna:
o Lakukan desain ulang antarmuka pengguna untuk meningkatkan pengalaman
pengguna dengan fokus pada usability dan aksesibilitas.
5. Modul Pelaporan:
o Buat modul pelaporan untuk memberikan analisis data secara visual, seperti grafik
dan tabel, agar lebih mudah dipahami oleh pengguna.
6. Dukungan Multi-Platform:
o Pertimbangkan untuk mengembangkan aplikasi ini menjadi aplikasi mobile
sehingga dapat diakses oleh pengguna melalui perangkat seluler.

Kesimpulan

Modul ini telah memberikan dasar yang kuat dalam pengembangan aplikasi menggunakan
Flask dan Microdot, serta penerapan teknologi untuk manajemen absensi siswa. Dengan
menggabungkan pengembangan perangkat lunak dan data science, Anda telah menciptakan
aplikasi yang tidak hanya fungsional tetapi juga memberikan wawasan berharga. Ke depan,
eksplorasi lebih lanjut dan pengembangan fitur tambahan akan semakin memperkaya
pengalaman pengguna dan meningkatkan efisiensi dalam pengelolaan absensi siswa.
Lampiran

A. Referensi dan Bacaan Tambahan

1. Buku dan Artikel

o Flask Web Development: Developing Web Applications with Python oleh Miguel
Grinberg.
o Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow oleh Aurélien
Géron.
o Artikel tentang penggunaan zklib untuk perangkat fingerprint di GitHub
atau dokumentasi resmi dari library tersebut.
o Dokumentasi resmi Flask: Flask Documentation
o Dokumentasi SQLite: SQLite Documentation
2. Sumber Daya Online
o Tutorial Flask di Real Python
o Kursus Data Science di Coursera atau edX
o Forum dan komunitas seperti Stack Overflow untuk diskusi dan pemecahan masalah.

B. Daftar Pustaka

 Grinberg, M. (2018). Flask Web Development: Developing Web Applications with Python.
O'Reilly Media.
 Géron, A. (2019). Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow.
O'Reilly Media.
 Dokumentasi zklib. (n.d.). Diambil dari GitHub Repository

Indeks

 Absensi - 15, 20, 25

 Flask - 5, 10, 15
 Microdot - 30, 35
 Naive Bayes - 50, 55
 Pengguna - 25, 30, 35
 Raspberry Pi Pico W - 40, 45

Catatan Akhir

Lampiran ini memberikan referensi yang bermanfaat dan bisa dijadikan sumber tambahan
untuk pembaca yang ingin memperdalam pengetahuan mereka mengenai Flask, data science,
dan aplikasi terkait.