lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/4811/3/bab iii.pdf ·...

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

14

BAB III

METODOLOGI DAN PERANCANGAN SISTEM

3.1 Metodologi Penelitian

Metode dan tahapan penelitian yang digunakan dalam penelitian ini adalah

sebagai berikut.

1. Tinjauan Pustaka

Bentuk kegiatan yang dilakukan dalam tahapan ini berupa pengumpulan segala

bentuk informasi seperti buku, referensi, data, ataupun jurnal-jurnal penelitian

yang terkait dengan penelitian yang dilakukan pada tugas akhir ini. Tahapan ini

menjadi tahap paling awal dalam proses penelitian yang dilakukan

2. Analisis Kebutuhan

Pada tahap analisis kebutuhan ini, dilakukan analisis terhadap algoritma, data,

dan proses apa saja yang digunakan pada penelitian ini. Proses analisis pada

Algoritma Eigenface dilakukan dimulai dari teori dan perhitungan yang

digunakan ke dalam sistem yang dibuat. Selain itu, bentuk data yang dibutuhkan

seperti input data dan alat bantu yang dibutuhkan dalam pembangunan sistem

juga dianalisis pada tahap ini.

3. Perancangan Sistem

Setelah proses pengumpulan bahan literatur dan analisis kebutuhan sistem,

maka dapat dibuat sebuah rancangan atau gambaran dasar mengenai sistem

yang dibuat. Fungsionalitas sistem ditentukan pada tahap ini sesuai dengan

spesifikasi yang sudah dirumuskan sebelumnya. Rancangan seperti halaman

antar muka dan struktur media penyimpanan (database) juga dilakukan pada

tahap ini.

Implementasi Algoritma...,Vincentius Kurniawan,FTI UMN,2017

15

4. Implementasi Sistem

Dalam tahap ini dilakukan proses implementasi dari rancangan yang telah

dilakukan pada ketiga tahap sebelumnya. Proses pembuatan sistem (coding)

sesuai spesifikasi dan fungsionalitas dilaksanakan. Berbagai komponen yang

dibutuhkan dalam sistem seperti tampilan antar muka, modul program,

Application Program Interface (API) dikerjakan pada tahap ini.

5. Pengujian dan Evaluasi Sistem

Sistem yang telah rampung dikerjakan diuji pada tahap ini untuk memastikan

terpenuhinya fungsionalitas yang telah ditentukan. Evaluasi dilakukan untuk

menentukan apakah sistem yang dibangun telah memenuhi tujuan dari

penelitian ini. Menurut Uma Sekaran (2006) mengutip Roscoe (1975)

berpendapat bahwa acuan umum unttuk menentukan ukuran sampel dalam

penelitian eksperimental disarankan menggunakan ukutan sampel kecil antara

10 sampai 20 dengan tujuan mencapai hasil yang dapat dikatakan sukses. Oleh

karena itu digunakan 15 citra wajah berbeda dalam pengujian sistem yang

dirancang dengan masing-masing lima citra wajah pelatihan.

6. Dokumentasi

Pada akhirnya penulisan laporan dilakukan pada tahapan ini dengan tujuan

mendokumentasikan segala bentuk proses penelitian serta menyimpulkan hasil

akhir yang didapat dari pengerjaan tugas akhir ini.

3.2 Analisis Sistem

Hasil analisis kebutuhan proses bisnis dalam sistem presensi menggunakan

pengenalan wajah ini dibagi menjadi dua bagian. Pertama, kebutuhan input dan


16

output sistem. Kebutuhan input atau masukan dari sistem presensi ini berupa data

diri pengguna baru untuk registrasi, lima sampai sepuluh data citra wajah pelatihan,

data citra untuk presensi, data waktu proses presensi yang diambil dari server, status

presensi untuk menentukan apakah melakukan presensi masuk atau keluar, data

koordinat lokasi yang diperbolehkan untuk melakukan presensi, dan data koordinat

lokasi pengguna.

Kedua, analisis dari segi fungsionalitas dan jenis pengguna yang memiliki

interaksi langsung dengan sistem. Hasil dari observasi sistem presensi yang umum

digunakan saat ini seperti mesin tapping, dibutuhkannya sebuah sistem dengan

minimal dua jenis hak akses yakni admin dan user. Fungsionalitas sistem presensi

diharapkan dapat melakukan registrasi pengguna baru. Pengguna baru yang telah

didaftarkan diharuskan dapat melakukan pelatihan citra wajah dirinya sendiri,

melakukan presensi menggunakan pengenalan wajah, dan melihat riwayat presensi

dirinya. Pengguna dengan hak akses admin dapat melakukan pengaturan data

presensi dan lokasi serta melakukan peninjauan riwayat kehadiran pengguna lain.

Hasil dari kebutuhan fungsionalitas yang telah dipaparkan, maka terdapat

kebutuhan untuk dua jenis basis sistem yang berbeda. Pertama adalah sistem

presensi berbasis web (back-end) untuk memenuhi fungsionalitas registrasi

pengguna baru, pengaturan data presensi dan lokasi yang hanya dapat diakses oleh

pengguna dengan hak akses admin. Kedua ialah sistem presensi berbasis mobile

(front-end) untuk memenuhi fungsionalitas proses presensi, pelatihan wajah, dan

melihat riwayat presensi.

Banyaknya aplikasi yang dapat memalsukan koordinat atau lokasi seorang

pengguna menjadi salah satu kendala dalam sistem ini. Oleh karena itu butuhnya


17

tindakan pencegahan dengan penambahan fitur pengecekkan apakah terdapat

aplikasi lain dalam perangkat mobile yang menggunakan atau mempengaruhi GPS

service. Dengan begitu penggunaan aplikasi seperti Fake GPS atau segala bentuk

tindakan GPS spoofing dapat dihindari.

Proses pelaksanaan pembuatan sistem ini diputuskan menggunakan

Algoritma Eigenface yang merupakan bagian dari Principal Component Analysis

(PCA) sebagai algoritma utama dalam sistem. Proses penggunaan algoritma akan

dilakukan bukan pada aplikasi Android yang dibuat melainkan pada API sistem

dalam bentuk aplikasi berbasis web pada web server. API pada sistem ini dibuat

berbasis web dengan Bahasa pemrograman PHP dan penggunaan basis data

MySQL untuk penyimpanan data pengguna maupun kumpulan citra pelatihan

untuk pengenalan wajah pada Algoritma Eigenface.

Sistem yang dibuat untuk perangkat mobile berbasis Android pada

penelitian ini menggunakan Android Studio, Android SDK, dan Android NDK.

Sistem dibangun menggunakan bahasa pemrograman Java dengan Java

Development Kit 8 (JDK 8 - 64 bit) dan ditujukan untuk perangkat Android dengan

sistem operasi maksimal Marshmallow (6.0.1 API 23). Selain penggunaan kamera

untuk pengambilan citra wajah pada Android, sistem mobile ini juga menggunakan

layanan lokasi atau Global Positioning System (GPS) untuk menentukan posisi

pengguna saat melakukan presensi. Hal ini bertujuan agar validasi presensi

seseorang tidak hanya dilihat dari waktu tapi juga tempat atau posisi pengguna

dapat dilacak riwayatnya.


18

3.3 Perancangan Sistem

Dari analisis yang telah dilakukan, maka dirancanglah sebuah sistem

presensi dengan beberapa fungsionalitas utama baik pada sistem mobile (front-end)

dan web (back-end). Beberapa fungsionalitas tersebut dijabarkan sebagai berikut.

a. Proses registrasi pengguna baru.

Fungsionalitas ini dapat dilakukan pada web (back-end) yang telah disediakan

dengan asumsi setiap pengguna baru yang hendak melakukan presensi harus

melakukan registrasi sebelumnya.

b. Proses pengambilan wajah untuk latihan

Proses ini memperbolehkan pengguna untuk mengambil citra sebanyak n

menggunakan smartphone diri sendiri dan mengirimkan citra wajah tersebut ke

web server.

c. Proses create, update, delete data presensi dan lokasi

Proses ini juga dilakukan pada web (back-end) sistem dimana hanya pengguna

dengan hak akses khusus yang dapat melakukan pengubahan atau penghapusan

pada data presensi yang ada.

d. Proses presensi

Proses presensi dapat dilakukan pada sistem mobile dan posisi pengguna sesuai

dengan koordinat lokasi yang telah ditentukan sebelumnya. Pengguna dapat

menentukan sendiri apakah proses presensi yang dilakukan adalah proses

masuk atau keluar. Apabila pengguna sudah melakukan proses presensi dengan

state masuk dan melakukan proses presensi ulang dengan state yang sama atau

tidak berubah, maka data yang telah tersimpan sebelumnya akan terhapus secara

otomatis dan mengganti data tersebut dengan data terbaru.


19

e. Proses peninjauan riwayat presensi dan searching

Pada proses ini, pengguna dapat melihat kembali riwayat presensi atau presensi

di sistem mobile. Sedangkan bagi pengguna dengan privilege yang lebih

memiliki fitur pencarian (searching) untuk melihat riwayat presensi pengguna

lain di satu divisinya.

Sistem yang dibangun pada penelitian ini dijabarkan dalam bentuk data flow

diagram (DFD) dan diagram alur kerja sistem (flowchart) untuk hasil analisis

perpindahan data dalam sistem. Selain itu, terdapat pula entity relationship diagram

(ERD), skema tabel database, dan struktur tabel untuk menampilkan relasi antar

tabel yang digunakan pada database sistem presensi ini.

3.3.1 Data Flow Diagram

Setelah mendeskripsikan fungsionalitas sistem maka dirancanglah sebuah

alur data yang ada pada saat sistem dijalankan. Alur data dalam bentuk Data Flow

Diagram (DFD) yang akan dijabarkan sebagai berikut. Pada Gambar 3.1

merupakan DFD Context Diagram sistem presensi menggunakan Algoritma

Eigenface yang menggambarkan aliran data secara keseluruhan.

Gambar 3.1 DFD Context Diagram Sistem Presensi


20

Pada DFD Context Diagram dapat dibagi menjadi 2 bagian proses besar

pada sistem yakni sistem berbasis web dan berbasis mobile seperti dijabarkan pada

Gambar 3.2.

Gambar 3.2 DFD Level 1 Sistem Presensi dengan Algoritma Eigenface

Proses pada sistem berbasis web terbagi kembali menjadi beberapa

subproses seperti Proses Login, Proses Pengaturan data presensi dan lokasi, serta

serta Proses registrasi pengguna baru. Proses-proses tersebut dapat dilihat pada

penjabaran pada Gambar 3.3. Pengguna dengan hak akses user dapat menggunakan

sistem terbatas pada fitur melihat riwayat presensi dirinya, sedangkan pengguna

dengan hak akses admin memiliki hak untuk melakukan pengaturan dari beberapa


21

fitur yang telah dijelaskan sebelumnya. Penggunaan data tabel-tabel yang terdapat

dalam sistem juga dijabarkan pada diagram ini seperti Tabel Access control, New

image log, Location, Presensi, Imageset, Employee, dan Eigenface.

Gambar 3.3 DFD Level 2 Sistem Presensi berbasis web

Pada ketiga subproses yang ada pada sistem presensi berbasis web, terdapat

alur data dari Proses Registrasi pengguna baru yang hanya dapat dilakukan oleh

pengguna dengan hak akses admin. Proses tersebut terbagi menjadi dua subproses

yaitu penyimpanan data pengguna baru ke dalam database dan proses generate

eigenface dan eigenvalue wajah pengguna baru. Alur data dalam Proses Registrasi

dijelaskan dalam diagram alur level tiga Proses Registrasi pada Gambar 3.4.


22

Gambar 3.4 DFD Level 3 Proses Registrasi

Pada Gambar 3.5 menjelaskan hasil dekomposisi diagram dari Proses

Pengaturan data Presensi dan Lokasi.

Gambar 3.5 DFD Level 3 Proses Pengaturan data presensi dan lokasi


23

Diagram tersebut menjabarkan secara detail proses tersebut dengan

membagi menjadi tujuh subproses yaitu menampilkan data presensi, menghapus

data presensi, mengubah data presensi, menampilkan data lokasi, menghapus data

lokasi, menyimpan perubahan data lokasi, dan pengaturan Tabel Imageset. Di

dalam DFD Level 2 Proses Pengaturan data Presensi dan Lokasi terdapat subproses

Pengaturan Imageset. Proses tersebut memiliki beberapa subproses hasil

dekomposisi yaitu menampilkan data imageset, perhitungan bobot wajah,

menyimpan perubahan data imagset, dan menghapus data imageset. Alur data

dalam proses-proses tersebut dijabarkan pada Gambar 3.6

Gambar 3.6 DFD Level 4 Proses Pengaturan Imageset

Setelah proses-proses yang terdapat pada sistem web dijabarkan, pada

sistem presensi berbasis mobile terbagi menjadi Proses Login, Proses Presensi,

Proses History dan Searching, dan Proses Training Wajah. Pada Proses Login


24

dilakukan pengecekan data nomor ID yang dimasukkan baik oleh admin ataupun

user ke dalam sistem dengan yang berada dalam Tabel Access control. Pengguna

dengan hak akses admin dapat menggunakan fitur searching pada sistem dengan

mengirimkan data nama pengguna lain untuk menampilkan riwayat kehadiran

pengguna tersebut. Hasil dekomposisi dari Level 1 sistem presensi yang telah

dijabarkan dapat dilihat pada Gambar 3.7.

Gambar 3.7 DFD Level 2 Sistem Presensi dengan Eigenface berbasis mobile


25

Pada Gambar 3.8 menjabarkan alur data proses presensi yang dapat

dilakukan pengguna.

Gambar 3.8 DFD Level 3 Proses presensi pada sistem mobile

Pada Gambar 3.9 berikut ini merupakan alur data yang terjadi pada Proses

History dan Searching.

Gambar 3.9 DFD Level 3 Proses History dan Searching


26

3.3.2 Flowchart Sistem

Alur kerja sistem yang dibangun terbagi menjadi beberapa tahap, baik tahap

yang dilakukan pada sistem web sebagai back-end nya juga tahap-tahap yang ada

pada sistem mobile. Pada sistem web (API) tahap yang dilakukan berupa registrasi

pelatihan wajah baru, pendaftaran koordinat lokasi baru, dan perhitungan Eigenface

dari kumpulan citra wajah yang sudah diregistrasi. Sedangkan sistem yang ada pada

perangkat mobile memiliki tahap presensi, pencarian riwayat presensi, pencarian

riwayat pengguna lain, dan pelatihan citra wajah.

A. Back-end

Alur kerja sistem presensi back-end secara keseluruhan terbagi menjadi

tiga subproses. Pada Gambar 3.10 dijabarkan alur sistem presensi back-end secara

keseluruhan.

Gambar 3.10 Flowchart sistem presensi back-end


27

Alur kerja sistem yang telah dijabarkan diatas mengharuskan pengguna

untuk melakukan login terlebih dahulu sebelum dapat menggunakan fitur yang ada

dari setiap bagian sistem. Alur kerja login tersebut dijabarkan pada Gambar 3.11.

Gambar 3.11 Flowchart Proses Login

Pada proses registrasi, data pengguna baru akan dimasukkan beserta dengan

sejumlah 5-15 citra wajah awal untuk pelatihan yang telah dinormalisasi baik

ukuran atau warna sebelumnya. Kumpulan citra wajah tersebut akan diubah ke

dalam bentuk matriks dan kemudian dilakukan komputasi sesuai dengan prinsip

aljabar linear menggunakan Algoritma Eigenface. Setiap kali proses presensi

dilakukan maka matriks piksel wajah baru akan disimpan dan dijadikan citra untuk

pelatihan kembali pada proses presensi berikutnya. Jumlah maksimal piksel citra

wajah yang disimpan untuk dilakukan pelatihan adalah 15 citra wajah. Hasil


28

keluaran registrasi dan pelatihan yang pada masing-masing wajah juga terdapat

Eigenvector U dan Mean Vector yang disimpan dalam sebuah file dengan format

text. Gambar 3.12 merupakan flowchart proses registrasi dan pelatihan wajah yang

dilakukan.

Gambar 3.12 Flowchart Proses Registrasi

Di dalam bagian web pula, pengguna dengan hak akses admin dapat

melakukan pengaturan pada tabel presensi, lokasi, dan data pelatihan citra wajah

dirinya sendiri ataupun pengguna lain. Pada proses pengaturan data pelatihan citra

wajah dibutuhkan masukkan Eigenvector U dan Mean Vector yang telah dihasilkan


29

pada proses registrasi untuk perhitungan bobot wajah. Alur kerja dan masukkan

yang dibutuhkan dalam proses tersebut dijelaskan pada Gambar 3.13.

Gambar 3.13 Flowchart Proses Pengaturan Data Presensi dan Lokasi


30

B. Front-end

Proses sistem presensi front-end terbagi menjadi empat subproses lainnya.

Pada Gambar 3.14 dijabarkan alur kerja sistem presensi front-end secara

keseluruhan.

Gambar 3.14 Flowchart Proses Registrasi


31

Setelah data Eigenface berhasil didapat maka proses presensi dapat

dilakukan dari sistem front-end sesuai dengan koordinat lokasi yang telah

ditentukan. Gambar 3.15 merupakan penjabaran alur kerja proses presensi pada

sistem front-end yang dibangun.

Gambar 3.15 Flowchart Proses Presensi


32

Apabila proses presensi berhasil dilakukan maka data presensi akan muncul

pada halaman riwayat presensi di sistem front-end yang digunakan. Pengguna dapat

melihat sendiri catatan presensi diri sendiri pada halaman riwayat presensi yang ada

di sistem front-end. Sedangkan, bagi pengguna dengan kedudukan admin atau lebih

tinggi memiliki fitur untuk mengawasi dan melihat riwayat presensi pengguna di

bawah divisi yang dipegang. Alur kerja fitur pencarian dan menampilkan riwayat

presensi dijabarkan pada Gambar 3.16.

Gambar 3.16 Flowchart Proses History dan Searching


33

Pada fitur pengambilan wajah di sistem mobile memperbolehkan pengguna

untuk melakukan pelatihan maksimal mencapai 15 citra wajah. Alur kerja fitur

pengambilan wajah dijabarkan pada Gambar 3.17.

Gambar 3.17 Flowchart Proses Training Wajah


34

3.3.3 Entity Relationship Diagram

Susunan dari beberapa struktur tabel yang telah dijelaskan membentuk satu

kesatuan basis data terintegrasi dan terhubung antar tabelnya. Entity Relationship

Diagram (ERD) merupakan suatu model untuk menjelaskan hubungan antar data

dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan

antar relasi. Pada umumnya ERD menjadi dasar persyaratan dalam tahap sebuah

pengembangan aplikasi atau sistem. ERD terbagi menjadi dua jenis yaitu ERD

physical dan ERD logical. Pada Gambar 3.18 menjabarkan ERD physical,

sedangkan Gambar 3.19 menjelaskan ERD logical dari Database Eigenface yang

digunakan.

Gambar 3.18 Entity Relationship Diagram Physical sistem presensi


35

Gambar 3.19 Entity Relationship Diagram Logical sistem presensi


36

3.3.4 Struktur Tabel

Setelah mendeskripsikan proses dan alur data yang terdapat pada sistem,

berikut rancangan basis data dengan menggunakan MySQL yang digunakan dalam

sistem presensi ini.

1. Tabel Access_control

Tabel berikut menyimpan informasi data login dari setiap pengguna yang ada

pada sistem. Setiap user memiliki id dan no_id yang unik, password, email, dan

hak akses pengguna.

Tabel 3.1 Struktur Tabel Access_control

Nama Kolom Tipe Data Nullable Identitas

account_id int(11) PK

no_id varchar(8) FK

password varchar(8)

email varchar(8)

role_id enum(‘admin’,’karyawan’)

2. Tabel Division

Tabel Division menyimpan data id divisi yang terdapat pada sistem dan nama

divisi tersebut.

Tabel 3.2 Struktur Tabel Division


division_id int(11) PK

division_name varchar(8)


37

3. Tabel Eigenface

Tabel Eigenface menyimpan data no_id dan bobot setiap wajah pelatihan yang

tersimpan pada database

Tabel 3.3 Struktur Tabel Eigenface

Nama Kolom

Tipe Data Nullable Identitas

id int(11) PK

no_id varchar(8) FK

weight_1 text ya

weight_2 text ya

weight_3 text ya

weight_4 text ya

weight_5 text ya

weight_6 text ya

weight_7 text ya

weight_8 text ya

weight_9 text ya

weight_10 text ya

weight_11 text ya

weight_12 text ya

weight_13 text ya

weight_14 text ya

weight_15 text ya

counter int

4. Tabel Employee

Tabel tersebut menyimpan data diri masing-masing pengguna dan divisi

pengguna tersebut berada.


38

Tabel 3.4 Struktur Tabel Employee

Nama Kolom


no_id varchar(8) PK

Nama varchar(255)

DoB date

Address varchar(2000)

Sex enum(‘male,female)

MaritalStatus enum(‘single,married)

DivisionID int(11) FK

5. Tabel Imageset

Tabel Imageset mengandung data detail citra pelatihan yang tersimpan untuk

masing-masing pengguna pada web server. Jumlah maksimal penyimpanan

citra wajah pelatihan berjumlah 15 dengan counter sebagai penentu angka

komputasi yang dilakukan pada perhitungan vektor eigenface.

Tabel 3.5 Struktur Tabel Imageset

Nama Kolom


imageset_id int(11) PK

no_id varchar(8) FK

img_1 varchar(1000) ya










39

Tabel 3.5 Struktur Tabel Imageset (lanjutan)

Nama Kolom








counter int ya

6. Tabel Location

Tabel tersebut berisi data rinci mengenai koordinat atau posisi yang didaftarkan

untuk melakukan proses presensi pada lokasi tersebut.

Tabel 3.6 Struktur Tabel Location


location_id int(11) PK

city_name varchar(500)

location_name varchar(100)

long_min double

long_max double

lati_min double

lati_max double)

7. Tabel New_image_log

Tabel New_image_log menyimpan setiap citra wajah hasil presensi yang

dilakukan oleh setiap pengguna yang ada.


40

Tabel 3.7 Struktur Tabel New_image_log Nama Kolom


id int(11) PK

no_id varchar(8) FK

imagePixels longtext

8. Tabel Presensi

Tabel tersebut berisi data presensi dari setiap pengguna, baik itu saat pengguna

waktu masuk dan keluarnya masing-masing pengguna.

Tabel 3.8 Struktur Tabel Presensi Nama Kolom


Presensi_id int(11) PK

no_id varchar(8) FK

location_id int(11) FK

time_in datetime

time_out datetime ya

state int(11)

3.3.5 Perancangan Antar Muka Sistem

Setelah proses perancangan sistem presensi dilakukan, dibuat pula

rancangan antarmuka sistem yang dibentuk sedemikian rupa untuk memudahkan

pengguna dalam menggunakan sistem tersebut.

A. Back-end

Gambar 3.20 merupakan rancangan halaman index.php atau halaman login

pada sistem back-end.


41

Gambar 3.20 Halaman Login sistem presensi back-end

Pada gambar tersebut pengguna diharuskan memasukkan nomor ID dan

password masing-masing untuk dapat menggunakan fitur yang ada pada sistem.

Pada sistem back-end umumnya memiliki kerangka tampilan yang serupa.

Perbedaannya hanya terletak pada konten dari masing-masing halaman yang

diakses pengguna. Gambar 3.21 menjabarkan kerangka antar muka Halaman

Employee.php pada sistem presensi back-end. Sedangkan, kerangka untuk

memasukkan pengguna baru dijabarkan pada Gambar 3.22.


42

Gambar 3.21 Halaman Employee sistem presensi back-end

Gambar 3.22 Halaman Add Employee sistem presensi back-end


43

Selain Halaman Employee, terdapat pula Halaman Location yang

digunakan pengguna dengan hak akses admin untuk mengatur lokasi yang dapat

digunakan untuk melakukan presensi. Gambar 3.23 menggambarkan kerangka

antar muka Halaman Location.

Gambar 3.23 Halaman Location sistem presensi back-end

Gambar 3.24 menggambarkan kerangka Halaman Signup.php yang diakses

apabila terdapat pengguna baru yang hendak menggunakan sistem presensi berbasis

mobile. Pengguna dapat melakukan signup apabila data pengguna sudah

didaftarkan oleh pengguna lain dengan hak akses admin pada Tabel Employee

untuk menghasilkan nomor ID yang dibutuhkan.


44

Gambar 3.24 Halaman Signup sistem presensi back-end

Pengguna sistem dapat melihat riwayat presensi dirinya sendiri pada web

yang telah disediakan. Sedangkan pengguna dengan hak akses admin dapat melihat

keseluruhan data presensi. Pengguna dengan hak akses admin pula dapat mengatur

pelatihan wajah pada sistem dalam Halaman Imageset. Kerangka Halaman Presensi

dan Halaman Imageset digambarkan pada Gambar 3.25 dan 3.26.

Gambar 3.25 Halaman Presensi sistem presensi back-end


45

Gambar 3.26 Halaman Imageset sistem presensi back-end

B. Front-end

Setelah dijabarkan rancangan antar muka pada sistem presensi back-end,

dibuat pula rancangan antar muka sistem front-end. Pembuatan antar muka berbasis

mobile dilakukan hanya dalam orientasi portrait tanpa dipengaruhi adanya rotasi

layar. Antar muka sistem berbasis mobile ini terbagi menjadi Halaman Login,

Halaman Presensi, Halaman History, Halaman Train Image, dan Halaman

Searching. Gambar 3.27 menjelaskan Halaman Login sistem presensi front-end.


46

Gambar 3.27 Halaman Login sistem presensi Front-end

Gambar 3.28 menjabarkan navbar yang terdapat pada sistem presensi front-

end. Pengguna dengan hak akses admin memiliki empat menu utama dalam navbar

yaitu Presence, History, Searching, dan Training.


47

Gambar 3.28 Navbar sistem presensi Front-end

Sedangkan, pengguna dengan hak akses user memiliki navbar dengan tiga

menu utama yaitu Presence, History,dan Training. Apabila tombol “Presence”

ditekan maka akan masuk pada Halaman Presensi seperti Gambar 3.29.


48

Gambar 3.29 Halaman Presensi Sistem Front-end

Gambar 3.30 menjabarkan Halaman History sistem presensi front-end

dimana pengguna dapat melihat riwayat presensi diri sendiri pada halaman tersebut.


49

Gambar 3.30 Halaman History sistem presensi Front-end

Selain dapat melihat riwayat presensi diri sendiri, pengguna dengan hak

akses admin dapat melakukan pencarian pengguna lain dengan kerangka halaman

yang dijabarkan pada Gambar 3.31.


50

Gambar 3.31 Halaman Pencarian sistem presensi Front-end

Fitur terakhir yang terdapat pada sistem presensi front-end ini yakni

pelatihan wajah. Gambar 3.32 menggambarkan kerangka Halaman Training Image.

Gambar 3.32 Halaman Training Image sistem presensi Front-end


lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/4811/3/bab iii.pdf ·...

Documents