T1__BAB III Institutional Repository | Satya Wacana Christian University: Perancangan Sistem Absensi SekolahBimbel Menggunakan Sidik Jari dan Online Message Gateway T1 BAB III
BAB III
PERANCANGAN
Pada bab ini akan dijelaskan perancangan database, perancangan user interface pada
software yang dibuat, dan cara kerja dari sistem absensi sekolah/bimbel mengunakan sidik jari
dan online message gateway. Garis besar tahap perancangan sistem ini ditunjukkan pada Gambar
3.1.
Menghubungkan alat absensi dengan
komputer dan membuat program untuk
koneksinya.
Membuat program untuk mendapatkan data
absensi masuk secara real time (waktu riil).
Membuat database untuk menyimpan data
masuk dan input data telegram.
Menampilkan data pada user interface
(tampilan antar muka) program.
Membuat program untuk memproses data
yang masuk dari alat dan database agar sesuai
format API telegram lalu mengirimkannya
kepada bot/server telegram.
Melakukan ujicoba.
Gambar 3.1 Tahapan Kerja Sistem Secara Keseluruhan.
10
Gambar 3.2 Gambaran Sistem Secara Keseluruhan.
11
3.1.
Perancangan Database
Database yang dibangun akan digunakan untuk menyimpan data dari mesin presensi saat
terdapat absensi pada tabel Presensi serta data utama user seperti nama, alamat, id dan chat id
pada tabel Person.
Berikut desain tabel yang digunakan:
Tabel 3.1 Tabel Person.
Nama Kolom
Tipe Data
Keterangan
[ID Person]
int
Primary Key
Nama
varchar(50)
Allow Null
Alamat
varchar(50)
Allow Null
[ID Telegram]
varchar(50)
Allow Null
Tabel 3.2 Tabel Presensi
Nama Kolom
Tipe Data
Keterangan
[ID Person]
int
Foreign Key
[Tanggal dan Waktu]
varchar(50)
Not Allow Null
[Status Presensi]
varchar(10)
Not Allow Null
Berikut Hubungan antar table pada database
Gambar 3.3 Hubungan Tabel Pada Database
12
3.2.
Perancangan Software dan User Interface (UI)
Software/perangkat lunak ini di rancang untuk mengkoneksikan 2 alat Solution X100-C
dengan komputer lalu secara real-time/waktu sebenarnya menerima data dari alat terkoneksi, lalu
menyimpan dan memproses data tersebut, dan akhirnya mengirimkan data tersebut kepada orang
yang dituju melalui aplikasi pesan online Telegram
Software/Perangkat lunak yang dibuat memiliki UI/Tampilan Antar Muka sebagai
berikut:
Gambar 3.4 Tampilan Antar Muka Perangkat Lunak 1
13
Gambar 3.5 Tampilan Antar Muka Perangkat Lunak 2
14
Gambar 3.6 Tampilan Antar Muka Perangkat Lunak 3
Penjelasan 3 gambar tampilan antar muka di atas :
a) Kolom tulisan untuk mesin 1, masukan alamat ip mesin 1
b) Kolom tulisan untuk mesin 1, masukan port mesin 1
c) Tombol connect dan disconnect untuk mesin 1, klik tombol untuk koneksi dengan mesin.
d) Kolom tulisan untuk mesin 2, masukan alamat ip mesin 2
e) Kolom tulisan untuk mesin 2, masukan port mesin 2
f) Tombol connect dan disconnect untuk mesin 2, klik tombol untuk koneksi dengan mesin.
g) Label status koneksi mesin absensi 1
h) Label status koneksi mesin absensi 2
i) Tab Real Time Events , berisi list box yang akan mempilkan data.
j) List box real time events, menampilkan events yang terjadi secara real time.
k) Tab add/edit data, menampilkan tampilan untuk keperluan data yang di perlukan
15
l) Tab laporan, menampilkan laporan absensi yang terjadi.
m) Tampilan tabel person.
n) Label,dan textbox untuk menambah,menghapus, dan mengganti data.
o) Tombol add , digunakan untuk menambah data.
p) Tombol update, digunakan untuk mengubah data.
q) Tombol delete, digunakan untuk menghapus data.
r) Tabel laporan , menampilkan laporan absensi masuk.
3.3.
Gambaran dan Cara Kerja Sistem Secara Keseluruhan
Perancangan sistem dalam proposal skripsi ini terdiri dari dua Alat absensi sidik
jari(X100C), Local Area Network (LAN), komputer utama/server, dan komputer/smartphone
client. Alat absensi di hubungkan kepada komputer menggunakan Lan dan switch,
Laptop/komputer digunakan untuk menjalan program utama dan menampilkan UI, serta sebagai
server, program utama berfungsi untuk menarik data secara real-time, menyimpan data,
mengirim perintah kepada bot agar bot mengirim pesan kepada komputer atau ponsel pintar yang
dituju. Gambar diagram cara kerja secara keseluruhan terdapat pada gambar 3.2.
16
Start
Masukan
absensi
N
Cek
Y
Kirim ke PC,
database, dan
tampilan antarmuka
Sesuaikan dengan
format API Telegram,
lalu kirim ke bot
Telegram bot/server
menerima perintah lalu
mengirim pesan sesuai
perintah
Pengguna 1 atau
grup A
menerima pesan
Pengguna 2 atau
grup B, menerima
pesan, dst
Gambar 3.7 Cara Kerja Sistem Secara Keseluruhan.
17
3.3.1 Cara Kerja Real Time Events
Pada bagian ini dijelaskan mengenai cara kerja fungsi Real Time events pada sistem ini :
a) Koneksikan alat dan komputer
b) Daftarkan real time events yang akan dipicu
c) Cek apakah acara yang didaftarkan terjadi.
d) Jika benar terjadi, simpan nilai yang kembali dari acara yang terjadi.
e) Kirimkan data yang diperlukan ke database, api telegram, dan tampilan antarmuka
program.
Berikut diagram penjelasanya[7] :
Start
Sambungkan alat
Daftarkan Real Time
Events
End
Gambar 3.8 Diagram Real Time Events 1
18
Start
N
Apakah
Real Time
Events
dipicu ?
Y
Menerima nilai/data yang
kembali/didapatkan dari Real
Time Events yang dipicu
Menyimpan/mengirim data
ke komputer, database, dan
API telegram.
End
Gambar 3.9 Diagram Real Time Events 2
19
Berikut potongan kode untuk real time events :
If axCZKEM1.RegEvent(iMachineNumber, 65535) = True Then
AddHandler axCZKEM1.OnFinger, AddressOf AxCZKEM1_OnFinger
AddHandler axCZKEM1.OnVerify, AddressOf AxCZKEM1_OnVerify
AddHandler axCZKEM1.OnAttTransactionEx, AddressOf
AxCZKEM1_OnAttTransactionEx
End If
Private Sub AxCZKEM1_OnAttTransactionEx(ByVal sEnrollNumber As String, ByVal iIsInValid
As Integer, ByVal iAttState As Integer, ByVal iVerifyMethod As Integer, _
ByVal iYear As Integer, ByVal iMonth As Integer, ByVal iDay As
Integer, ByVal iHour As Integer, ByVal iMinute As Integer, ByVal iSecond As Integer,
ByVal iWorkCode As Integer)
lbRTShow.Items.Add("RTEvent OnAttTrasactionEx Has been Triggered,Verified OK")
lbRTShow.Items.Add("...UserID:" & sEnrollNumber)
Dim token As String = "379830121:AAFIYSe12o8_obkkhZfT9mCF68AWYVmN-ZA"
writedb(sEnrollNumber, iYear, iMonth, iDay, iHour, iMinute, iSecond, iAttState)
Dim id As String = getidtelegram(sEnrollNumber)
kirim(id, token, iYear, iMonth, iDay, iHour, iMinute, iSecond, iAttState,
sEnrollNumber)
Tampildata2()
End Sub
Penjelasan singkat fungsi-fungsinya, fungsi axCZKEM1.RegEvent digunakan untuk
mendaftarkan real time events yang ingin dipicu dan fungsi axCZKEM1.OnAttTransactionEx
digunakan untuk mendapat nilai kembali dari real time events.
20
3.3.2 Cara Kerja Koneksi Alat Absensi dan Komputer
Pada bagian ini akan dijelaskan bagaimana proses koneksi komputer dengan alat absensi.
Alat dihubungkan ke PC dengan kabel LAN dan Switch. Ip alat 1 di isi dengan nomer :
192.168.1.201, Ip alat 2 di isi dengan alamat : 192.168.1.202, ip pc di isi dengan alamat :
192.168.1.1 , Subnet mask kedua alat dan pc di isi dengan alamat : 255.255.255.0 . Kedua alat
berhasil terkoneksi secara bersamaan, jika alat lebih dari 2, maka cukup menjalankan 2 program
secara bersamaan atau lebih, lalu di koneksikan ke masing-masing alat sesuai alamat ip yang di
isikan pada alat.
Berikut potongan kode untuk koneksi ke mesin/alat absensi :
bIsConnected = axCZKEM1.Connect_Net(txtIP.Text.Trim(),
Convert.ToInt32(txtPort.Text.Trim()))
If bIsConnected = True Then
btnConnect1.Text = "Disconnect"
btnConnect1.Refresh()
lblState.Text = "Current State FP1 : Connected"
iMachineNumber = 1 '
Else
axCZKEM1.GetLastError(idwErrorCode)
MsgBox("Unable to connect the device,ErrorCode=" & idwErrorCode,
MsgBoxStyle.Exclamation, "Error")
End If
Penjelasan singkat fungsinya, fungsi axCZKEM1.Connect_Net digunakan untuk
menghubungkan alat dan komputer.
3.3.3 Aplikasi Koneksi ke Database
Pada bagian ini akan dijelaskan tentang database pada sistem skripsi ini. Agar database
dapat bekerja pada program, database perlu disambungkan dengan program terlebih dahulu,
setelah tersambung proses yang inginkan dapat berjalan, contohnya : tulis ke database, tampilkan
data dari database pada tabel, dan ambil data dari database.
Berikut diagramnya :
21
Start
Koneksi ke
database
N
Menunggu
perintah
Y
Menjalankan
perintah (tulis,
ganti, hapus)
End
Gambar 3.10 Diagram Database
3.3.4 Cara Kerja Pengiriman Pesan Telegram
Pada bagian ini akan dijelaskan tentang proses pengiriman pesan memalui telegram. Saat
ada absensi masuk, real time evetns akan terpicu, real time value di simpan pada database,
kemudian program mengambil/menggunakan data dari database dan real-time value untuk di
proses menjadi format yang sesuai api telegram, setelah format perintah sesuai dengan api
telegram, perintah tersebut dikirim menuju telegram bot. Lalu bot akan mengirim pesan sesuai
perintah yang diterima. Pengiriman pesan dapat tertunda jika terdapat masalah pada koneksi
internet dikarenakan pengiriman bergantung pada internet. Berikut gambar diagram prosesnya :
22
Start
Absen
masuk
Real Time
Events dipicu
Data dikirim ke
komputer dan database
Data diproses agar
sesuai API
API dikirim sebagai
perintah
Bot mengirim pesan
sesuai perintah
End
Gambar 3.11 Diagram Proses Pengiriman Pesan Telegram
23
Berikut potongan kode untuk mengirim perintah kepada bot telegram :
Dim uri As String = "https://api.telegram.org/bot"
Dim pesan As String = token & "/sendmessage?chat_id=" & id & "&text=Pemberitahuan
Bahwa " & sEnrollNumber & " , " & Tanggal & " -- Telah Melakukan Presensi " & Status
uri = uri + pesan
Try
Dim fr As System.Net.HttpWebRequest
Dim targetURI As New Uri(uri)
fr = DirectCast(Net.HttpWebRequest.Create(targetURI),
System.Net.HttpWebRequest)
If (fr.GetResponse().ContentLength > 0) Then
Dim str As New
System.IO.StreamReader(fr.GetResponse().GetResponseStream())
str.Close()
End If
Catch ex As System.Net.WebException
'Error in accessing the resource, handle it
End Try
Penjelasan singkat, uri adalah variabel untuk menyesuaikan data yang didapat dari
database dan alat agar sesuai format perintah/API. Lalu pengiriman menggunakan fungsi hhtp
web request.
24
PERANCANGAN
Pada bab ini akan dijelaskan perancangan database, perancangan user interface pada
software yang dibuat, dan cara kerja dari sistem absensi sekolah/bimbel mengunakan sidik jari
dan online message gateway. Garis besar tahap perancangan sistem ini ditunjukkan pada Gambar
3.1.
Menghubungkan alat absensi dengan
komputer dan membuat program untuk
koneksinya.
Membuat program untuk mendapatkan data
absensi masuk secara real time (waktu riil).
Membuat database untuk menyimpan data
masuk dan input data telegram.
Menampilkan data pada user interface
(tampilan antar muka) program.
Membuat program untuk memproses data
yang masuk dari alat dan database agar sesuai
format API telegram lalu mengirimkannya
kepada bot/server telegram.
Melakukan ujicoba.
Gambar 3.1 Tahapan Kerja Sistem Secara Keseluruhan.
10
Gambar 3.2 Gambaran Sistem Secara Keseluruhan.
11
3.1.
Perancangan Database
Database yang dibangun akan digunakan untuk menyimpan data dari mesin presensi saat
terdapat absensi pada tabel Presensi serta data utama user seperti nama, alamat, id dan chat id
pada tabel Person.
Berikut desain tabel yang digunakan:
Tabel 3.1 Tabel Person.
Nama Kolom
Tipe Data
Keterangan
[ID Person]
int
Primary Key
Nama
varchar(50)
Allow Null
Alamat
varchar(50)
Allow Null
[ID Telegram]
varchar(50)
Allow Null
Tabel 3.2 Tabel Presensi
Nama Kolom
Tipe Data
Keterangan
[ID Person]
int
Foreign Key
[Tanggal dan Waktu]
varchar(50)
Not Allow Null
[Status Presensi]
varchar(10)
Not Allow Null
Berikut Hubungan antar table pada database
Gambar 3.3 Hubungan Tabel Pada Database
12
3.2.
Perancangan Software dan User Interface (UI)
Software/perangkat lunak ini di rancang untuk mengkoneksikan 2 alat Solution X100-C
dengan komputer lalu secara real-time/waktu sebenarnya menerima data dari alat terkoneksi, lalu
menyimpan dan memproses data tersebut, dan akhirnya mengirimkan data tersebut kepada orang
yang dituju melalui aplikasi pesan online Telegram
Software/Perangkat lunak yang dibuat memiliki UI/Tampilan Antar Muka sebagai
berikut:
Gambar 3.4 Tampilan Antar Muka Perangkat Lunak 1
13
Gambar 3.5 Tampilan Antar Muka Perangkat Lunak 2
14
Gambar 3.6 Tampilan Antar Muka Perangkat Lunak 3
Penjelasan 3 gambar tampilan antar muka di atas :
a) Kolom tulisan untuk mesin 1, masukan alamat ip mesin 1
b) Kolom tulisan untuk mesin 1, masukan port mesin 1
c) Tombol connect dan disconnect untuk mesin 1, klik tombol untuk koneksi dengan mesin.
d) Kolom tulisan untuk mesin 2, masukan alamat ip mesin 2
e) Kolom tulisan untuk mesin 2, masukan port mesin 2
f) Tombol connect dan disconnect untuk mesin 2, klik tombol untuk koneksi dengan mesin.
g) Label status koneksi mesin absensi 1
h) Label status koneksi mesin absensi 2
i) Tab Real Time Events , berisi list box yang akan mempilkan data.
j) List box real time events, menampilkan events yang terjadi secara real time.
k) Tab add/edit data, menampilkan tampilan untuk keperluan data yang di perlukan
15
l) Tab laporan, menampilkan laporan absensi yang terjadi.
m) Tampilan tabel person.
n) Label,dan textbox untuk menambah,menghapus, dan mengganti data.
o) Tombol add , digunakan untuk menambah data.
p) Tombol update, digunakan untuk mengubah data.
q) Tombol delete, digunakan untuk menghapus data.
r) Tabel laporan , menampilkan laporan absensi masuk.
3.3.
Gambaran dan Cara Kerja Sistem Secara Keseluruhan
Perancangan sistem dalam proposal skripsi ini terdiri dari dua Alat absensi sidik
jari(X100C), Local Area Network (LAN), komputer utama/server, dan komputer/smartphone
client. Alat absensi di hubungkan kepada komputer menggunakan Lan dan switch,
Laptop/komputer digunakan untuk menjalan program utama dan menampilkan UI, serta sebagai
server, program utama berfungsi untuk menarik data secara real-time, menyimpan data,
mengirim perintah kepada bot agar bot mengirim pesan kepada komputer atau ponsel pintar yang
dituju. Gambar diagram cara kerja secara keseluruhan terdapat pada gambar 3.2.
16
Start
Masukan
absensi
N
Cek
Y
Kirim ke PC,
database, dan
tampilan antarmuka
Sesuaikan dengan
format API Telegram,
lalu kirim ke bot
Telegram bot/server
menerima perintah lalu
mengirim pesan sesuai
perintah
Pengguna 1 atau
grup A
menerima pesan
Pengguna 2 atau
grup B, menerima
pesan, dst
Gambar 3.7 Cara Kerja Sistem Secara Keseluruhan.
17
3.3.1 Cara Kerja Real Time Events
Pada bagian ini dijelaskan mengenai cara kerja fungsi Real Time events pada sistem ini :
a) Koneksikan alat dan komputer
b) Daftarkan real time events yang akan dipicu
c) Cek apakah acara yang didaftarkan terjadi.
d) Jika benar terjadi, simpan nilai yang kembali dari acara yang terjadi.
e) Kirimkan data yang diperlukan ke database, api telegram, dan tampilan antarmuka
program.
Berikut diagram penjelasanya[7] :
Start
Sambungkan alat
Daftarkan Real Time
Events
End
Gambar 3.8 Diagram Real Time Events 1
18
Start
N
Apakah
Real Time
Events
dipicu ?
Y
Menerima nilai/data yang
kembali/didapatkan dari Real
Time Events yang dipicu
Menyimpan/mengirim data
ke komputer, database, dan
API telegram.
End
Gambar 3.9 Diagram Real Time Events 2
19
Berikut potongan kode untuk real time events :
If axCZKEM1.RegEvent(iMachineNumber, 65535) = True Then
AddHandler axCZKEM1.OnFinger, AddressOf AxCZKEM1_OnFinger
AddHandler axCZKEM1.OnVerify, AddressOf AxCZKEM1_OnVerify
AddHandler axCZKEM1.OnAttTransactionEx, AddressOf
AxCZKEM1_OnAttTransactionEx
End If
Private Sub AxCZKEM1_OnAttTransactionEx(ByVal sEnrollNumber As String, ByVal iIsInValid
As Integer, ByVal iAttState As Integer, ByVal iVerifyMethod As Integer, _
ByVal iYear As Integer, ByVal iMonth As Integer, ByVal iDay As
Integer, ByVal iHour As Integer, ByVal iMinute As Integer, ByVal iSecond As Integer,
ByVal iWorkCode As Integer)
lbRTShow.Items.Add("RTEvent OnAttTrasactionEx Has been Triggered,Verified OK")
lbRTShow.Items.Add("...UserID:" & sEnrollNumber)
Dim token As String = "379830121:AAFIYSe12o8_obkkhZfT9mCF68AWYVmN-ZA"
writedb(sEnrollNumber, iYear, iMonth, iDay, iHour, iMinute, iSecond, iAttState)
Dim id As String = getidtelegram(sEnrollNumber)
kirim(id, token, iYear, iMonth, iDay, iHour, iMinute, iSecond, iAttState,
sEnrollNumber)
Tampildata2()
End Sub
Penjelasan singkat fungsi-fungsinya, fungsi axCZKEM1.RegEvent digunakan untuk
mendaftarkan real time events yang ingin dipicu dan fungsi axCZKEM1.OnAttTransactionEx
digunakan untuk mendapat nilai kembali dari real time events.
20
3.3.2 Cara Kerja Koneksi Alat Absensi dan Komputer
Pada bagian ini akan dijelaskan bagaimana proses koneksi komputer dengan alat absensi.
Alat dihubungkan ke PC dengan kabel LAN dan Switch. Ip alat 1 di isi dengan nomer :
192.168.1.201, Ip alat 2 di isi dengan alamat : 192.168.1.202, ip pc di isi dengan alamat :
192.168.1.1 , Subnet mask kedua alat dan pc di isi dengan alamat : 255.255.255.0 . Kedua alat
berhasil terkoneksi secara bersamaan, jika alat lebih dari 2, maka cukup menjalankan 2 program
secara bersamaan atau lebih, lalu di koneksikan ke masing-masing alat sesuai alamat ip yang di
isikan pada alat.
Berikut potongan kode untuk koneksi ke mesin/alat absensi :
bIsConnected = axCZKEM1.Connect_Net(txtIP.Text.Trim(),
Convert.ToInt32(txtPort.Text.Trim()))
If bIsConnected = True Then
btnConnect1.Text = "Disconnect"
btnConnect1.Refresh()
lblState.Text = "Current State FP1 : Connected"
iMachineNumber = 1 '
Else
axCZKEM1.GetLastError(idwErrorCode)
MsgBox("Unable to connect the device,ErrorCode=" & idwErrorCode,
MsgBoxStyle.Exclamation, "Error")
End If
Penjelasan singkat fungsinya, fungsi axCZKEM1.Connect_Net digunakan untuk
menghubungkan alat dan komputer.
3.3.3 Aplikasi Koneksi ke Database
Pada bagian ini akan dijelaskan tentang database pada sistem skripsi ini. Agar database
dapat bekerja pada program, database perlu disambungkan dengan program terlebih dahulu,
setelah tersambung proses yang inginkan dapat berjalan, contohnya : tulis ke database, tampilkan
data dari database pada tabel, dan ambil data dari database.
Berikut diagramnya :
21
Start
Koneksi ke
database
N
Menunggu
perintah
Y
Menjalankan
perintah (tulis,
ganti, hapus)
End
Gambar 3.10 Diagram Database
3.3.4 Cara Kerja Pengiriman Pesan Telegram
Pada bagian ini akan dijelaskan tentang proses pengiriman pesan memalui telegram. Saat
ada absensi masuk, real time evetns akan terpicu, real time value di simpan pada database,
kemudian program mengambil/menggunakan data dari database dan real-time value untuk di
proses menjadi format yang sesuai api telegram, setelah format perintah sesuai dengan api
telegram, perintah tersebut dikirim menuju telegram bot. Lalu bot akan mengirim pesan sesuai
perintah yang diterima. Pengiriman pesan dapat tertunda jika terdapat masalah pada koneksi
internet dikarenakan pengiriman bergantung pada internet. Berikut gambar diagram prosesnya :
22
Start
Absen
masuk
Real Time
Events dipicu
Data dikirim ke
komputer dan database
Data diproses agar
sesuai API
API dikirim sebagai
perintah
Bot mengirim pesan
sesuai perintah
End
Gambar 3.11 Diagram Proses Pengiriman Pesan Telegram
23
Berikut potongan kode untuk mengirim perintah kepada bot telegram :
Dim uri As String = "https://api.telegram.org/bot"
Dim pesan As String = token & "/sendmessage?chat_id=" & id & "&text=Pemberitahuan
Bahwa " & sEnrollNumber & " , " & Tanggal & " -- Telah Melakukan Presensi " & Status
uri = uri + pesan
Try
Dim fr As System.Net.HttpWebRequest
Dim targetURI As New Uri(uri)
fr = DirectCast(Net.HttpWebRequest.Create(targetURI),
System.Net.HttpWebRequest)
If (fr.GetResponse().ContentLength > 0) Then
Dim str As New
System.IO.StreamReader(fr.GetResponse().GetResponseStream())
str.Close()
End If
Catch ex As System.Net.WebException
'Error in accessing the resource, handle it
End Try
Penjelasan singkat, uri adalah variabel untuk menyesuaikan data yang didapat dari
database dan alat agar sesuai format perintah/API. Lalu pengiriman menggunakan fungsi hhtp
web request.
24