10

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.

Gambar 3.1 Tahapan Kerja Sistem Secara Keseluruhan.

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.

11

Gambar 3.2 Gambaran Sistem Secara Keseluruhan.

12

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

13

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

14

Gambar 3.5 Tampilan Antar Muka Perangkat Lunak 2

15

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

16

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.

17

N

Y

Gambar 3.7 Cara Kerja Sistem Secara Keseluruhan.

Start

Masukan

absensi

Pengguna 1 atau

grup A

menerima pesan

Pengguna 2 atau

grup B, menerima

pesan, dst

Cek

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

18

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] :

Gambar 3.8 Diagram Real Time Events 1

Sambungkan alat

Daftarkan Real Time

Events

Start

End

19

N

Y

Gambar 3.9 Diagram Real Time Events 2

Start

Apakah

Real Time

Events

dipicu ?

Menerima nilai/data yang

kembali/didapatkan dari Real

Time Events yang dipicu

Menyimpan/mengirim data

ke komputer, database, dan

API telegram.

End

20

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.

21

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 :

22

N

Y

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 :

Start

Menunggu

perintah

End

Koneksi ke

database

Menjalankan

perintah (tulis,

ganti, hapus)

23

Gambar 3.11 Diagram Proses Pengiriman Pesan Telegram

Start

Absen

masuk

Bot mengirim pesan

sesuai perintah

End

Real Time

Events dipicu

Data dikirim ke

komputer dan database

Data diproses agar

sesuai API

API dikirim sebagai

perintah

24

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.