Aplikasi ini dibuat berdasarkan Framework Cordova dan Jquery Mobile, sedangkan untuk bahasa pemrogramannya menggunakan HTML5, Javascript, CCS dan bracket sebagai editor untuk pembuatan aplikasi.
Perancangan sistem merupakan tahap awal dari perancangan perangkat lunak. Perancangan ini dilakukan untuk mengetahui kondisi sistem secara umum. Perancangan sistem meliputi cara kerja sistem, use case diagram, activity diagram sequence diagram
4.1 UML (Unified Modeling Language)
UML adalah sebuah bahasa yang berdasarkan grafik atau gambar untuk memvisualisasi, menspesifikasikan, membangun dan pendokumentasikan dari sebuah sistem pengembangan software berbasis OO (Object-Oriented). Dengan UML proses untuk melakukan pemodelan sistem/perangkat lunak lewat sarana rational rose dan proses ini untuk mempermudah seorang pembuat aplikasi dalam merancang suatu sistem. Perancangan yang dilakukan meliputi perancangan diagram-diagram UML dan perancangan tampilan antarmuka.
4.1.1 Perancangan Pembuatan Sistem (Use Case Diagram)
Diagram use case menggambarkan interaksi antara proses dengan aktor yang bersangkutan dalam sistem.
Gambar 0.1 Use case
4.1.1.1 Definisi Aktor
Berikut adalah definisi actor dari use case aplikasi yang di rancang. Tabel 0.1 Definisi aktor
No. Aktor Deskripsi
1 Karyawan Aktor yang dapat melakukan absensi masuk/keluar dan melihat rincian gaji/E-slip gaji
2 SPV/Site Manager Aktor yang mem-verifikasi absensi SAH atau TIDAK.
3 Admin Project Aktor yang mengelola data karyawan, mengambil data absensi dari sistem, membuat rekap gaji (Cash Advance) untuk di ajukan ke finance
4.1.1.2 Definisi Use Case
Use case menyatakan fungsi lengkap yng dilakukan aktor dan menghasilkan nilai ke actor serta menggambarkan dimana level user dan respon. Kemudian dibuat skenario (flow of event) yang menggambarkan urutan interaksi aktor dengan sistem tersebut dalam setiap use case utama. Skenario use case akan di tampilan sebagai berikut :
1. Use case Input absensi masuk/keluar Tabel 0.2 Use case input absensi masuk/keluar
Nama use case Use case input absensi masuk/keluar Nama aktor Karyawan
Deskripsi Pada tahap ini akan di tampilkan menu absensi input jam masuk dan keluar.
Pra Kondisi Karyawan dapat mengetahui rincian absensi masuk/keluar mereka.
Skenario Sistem akan mengirim data jam masuk/keluar, hari, tanggal dan lokasi ketika input absensi ke server.
Hasil Data absensi akan di simpan di server/database
2. Use case melihat rincian gaji. Tabel 0.3 Use case melihat rincian gaji
Nama Use Case Use Case melihat rincian gaji
Nama aktor Karyawan
Deskripsi Pada tahap ini karyawan akan melihat rincian gaji yang di bayar oleh perusahaan
Pra Kondisi Karyawan dapat mengetahui informasi rincian gaji miliknya
Skenario Sistem melakukan request POST untuk mendapatkan rincian gaji yang ada di dalam database
Hasil Rincian gaji yang diterima karyawan akan di tampilkan
3. Use case verifikasi absensi Tabel 0.4 Use case verifikasi absensi
Nama use case Use case verifikasi absensi Nama aktor SPV/Site manager
Deskripsi Pada tahap ini SPV/Site manager akan melihat menu absensi yang sudah di input oleh karyawan dalam kurun waktu satu minggu.
Pra Kondisi SPV/Site menager dapat melihat rincian absensi dari karyawannya.
Skenario Sistem akan menerima input-an absensi SAH atau tidak, jika absensi SAH maka sistem akan menghitung gaji karyawan. Jika tidak sistem akan mengirim pesan ke karyawan bila absensi TIDAK SAH dan silahkan input kembali.
Hasil Sistem akan menghitung gaji dan akan menampilkan rincian gaji.
4. Use case rekap gaji Tabel 0.5 Use case rekap gaji
Nama use case Use case rekap gaji Nama aktor Admin Project
Deskripsi Pada tahap ini admin project akan melihat absensi karyawan yang SAH atau telah di verifikasi oleh SPV/Site manager. Data yang tampil yaitu : jam masuk/keluar, lokasi, hari dan tanggal.
Pra Kondisi Admin dapat melihat rincian gaji karyawan per-periode. Skenario Sistem akan menampilkan absensi yang telah ter-verifikasi
oleh SPV/Site manager.
Hasil Admin dapat mengunduh rincian gaji tersebut dan memprosesnya ke finance
4.1.2 Perancangan Alur Kerja (Activity Diagram)
Activity diagram ialah diagram yang menggambarkan workflow (Aliran kerja) atau aktivitas dari sebuah sistem. Aliran kerja sistem yang akan dibangun meliputi beberapa proses sistem, akan digambarkan sebagai berikut :
1. Diagram activity Input Absensi
Proses ini dimulai dengan melakukan login pada aplikasi android. Pada saat melakukan proses login sistem akan cek NIK dan password jika sesuai dengan data yang tersimpan di database maka akan menampilkan menu absensi. Jika NIK dan password yang di masukan tidak sesuai dengan data yang ada di database maka sistem akan mengirimkan peringatan agar memasukan NIK dan password yang valid. Kemudian masuk ke menu
absensi, lakukan absensi masuk atau keluar. Sistem akan merekam data yang di input dan menyimpan ke database.
Gambar 0.2 Activity diagram input absensi
2. Diagram Activity Melihat Rincian Gaji
Proses ini dimulai dengan melakukan login pada aplikasi android. Ketika proses login sistem akan cek NIK dan Password jika sesuai dengan data yang tersimpan di database maka akan menampilkan menu absensi. Jika NIK dan password yang di masukan tidak sesuai dengan data yang ada di database maka sistem akan mengirimkan peringatan agar memasukan NIK dan password yang valid. Kemudian pilih menu tampilkan rincian gaji/E-slip
gaji. Maka sistem akan mengambil data dari database untuk di tampilkan di menu rincian gaji/E-slip gaji. Proses ini akan tampil setelah dilakukan verifikasi absensi oleh SPV/Site manager.
Gambar 0.3 Activity diagram rincian gaji
3. Diagram Activity Verifikasi Absensi
Proses ini dimulai dengan melakukan login pada web service/server. Ketika proses login sistem akan cek NIK dan Password jika sesuai dengan
data yang tersimpan di database maka akan menampilkan menu absensi. Jika NIK dan password yang di masukan tidak sesuai dengan data yang ada di database maka sistem akan mengirimkan peringatan agar memasukan NIK dan password yang valid. Setelah SPV/Site manager dapat login maka sistem akan menampilkan menu absensi karyawan, SPV/Site manager melakukan verifikasi absensi, absensi yang sah akan di proses hitung gaji oleh sistem dan absensi yang tidak sah akan ada notification di aplikasi android. Pesan untuk melakukan absensi kembali
4. Diagram Activity Rekap Gaji
Proses ini dimulai dengan melakukan login pada web service/server. Ketika proses login sistem akan cek NIK dan Password jika sesuai dengan data yang tersimpan di database maka akan menampilkan menu absensi. Jika NIK dan password yang di masukan tidak sesuai dengan data yang ada di database maka sistem akan mengirimkan peringatan agar memasukan NIK dan password yang valid. Ketika admin berhasil login akan tampil menu rincian gaji karyawan yang telah sah. Rincian tersebut dapat di unduh sebagai rekap gaji untuk proses selanjutnya.
4.1.3 Perancangan Interaksi Antar Objek (Sequence Diagram) 1. Sequence Diagram Input Absensi
Gambar 0.6 Sequance diagram input absensi
Tabel 0.6 Sequence diagram input absensi Nama Sequence Diagram Input Gaji
Deskripsi Karyawan login ke aplikasi android masuk menu utama, kemudian pilih menu input absensi. Input absensi masuk/keluar sistem akan merespon dan menyimpan data jam masuk, tanggal, hari dan lokasi ke server. Semua data tersebut akan tersimpan di database.
2. Sequence Diagram Melihat Rincian Gaji
Gambar 0.7 Sequance diagram rincian gaji
Tabel 0.7 Sequence diagram input gaji
Nama Sequence Diagram Rincian Gaji
Deskripsi Karyawan login ke aplikasi android masuk menu utama, kemudian pilih menu E-Slip gaji maka sistem akan menampilkan rincian gaji selama periode satu minggu. E-Slip gaji akan tampil setelah di verifikasi oleh SPV/Site manager. Hanya absensi yang telah di SAH kan oleh SPV/Site manager yang akan menampilkan E-Slip gaji di aplikasi android.
3. Sequence Diagram Verifikasi Absensi
Gambar 0.8 Sequence diagram verifikasi absensi
Tabel 0.8 Sequence diagram verifikasi absensi
Nama Sequence Diagram Verifikasi absensi
Deskripsi SPV/Site Manager login ke GUI server masuk ke menu utama. Kemudian pilih menu absensi karyawan. Periksa absensi karyawan satu persatu. Pilih tombol sah jika absensi sesuai dengan Surat perintah kerja yang diberikan. Pilih tombol tidak sah bila absensi tidak sesuai dengan surat perintah kerja yang diberikan. Absensi yang sah akan diproses oleh sistem dari absensi sah tersebut akan di hitung nilai gajinya. Setelah itu akan tampil di aplikasi android dan server di sisi admin project
4. Sequence Diagram Rekap Gaji
Gambar 0.9 Sequence diagram rekap gaji
Tabel 0.9 Sequance diagram rekap gaji
Nama Sequence Diagram Rekap Gaji
Deskripsi Admin project Login ke GUI server masuk ke menu utama. Pilih menu rincian gaji maka sistem akan menampilkan absensi yang telah di sahkan oleh SPV/Site manager. Di dalam menu rincian gaji tersebut data yang ditamplkan adalah absensi sah dan rincian gaji yang akan diterima oleh karyawan. Setiap absensi individu akan ditampikan rincian gaji masing-masing. Admin dapat mengunduh rincian gaji tersebut dan dapat di print out sebagai rekap gaji yang akan diajukan ke finance untuk pencairan gaji.
4.2 Perancangan Antarmuka (Interface)
Perancangan antarmuka diperlukan untuk mempermudah pengguna dalam menjalankan aplikasi, sehingga diperlukan perancangan antarmuka yang sederhana dan mudah dimengerti oleh orang awam.
Berikut ini akan dijelaskan sketsa perancangan antarmuka setiap proses yang dijalankan oleh aplikasi ini.
1. Tampilan Menu Utama Aplikasi Android
Gambar 4.2.1 Tampilan menu utama aplikasi
Form login digunakan untuk proses login ke sistem dengan memasukan Username (NIK) dan Password. Pilih “aku saya” kemudian masukan username dan password. Jika username dan password sesuai dengan yang tersimpan didalam database maka akan masuk ke menu absensi.
Keterangan :
1 : Untuk memasukan NIK sebagai Username 2 : Untuk memasukan Password
2. Tampilan Profile Akun User
Gambar 4.2.2 Tampilan profile aplikasi android
Menu profile yaitu menu yang menampilkan identitas dari user/karyawan harian yang menjadi objek dari pengguna aplikasi ini. Menu profile menampilkan : NIK, Nama, posisi, Gaji/hari dan No. telepon.
Keterangan :
1 : Menampilkan NIK karyawan harian 2 : Menampilkan Nama Karyawan harian 3 : Menampilkan posisi berdasarkan keahlian 4 : Menampilkan nilai gaji/hari
3. Tampilan Absensi Masuk
Gambar 4.2.3 Tampilan absensi masuk
Menu absensi masuk menampilkan input NIK, Pilih lokasi proyek. Jam masuk dan tanggal akan ter-input secara otomatis. Lokasi proyek bisa dipilih sesuai yang di setting oleh server dan display dengan maps berdasarkan koordinat lokasi.
Keterangan :
1 : Masukan NIK karyawan harian 2 : Pilih area proyek
4. Tampilan Absensi Keluar
Gambar 4.2.4 Tampilan absensi keluar
Menu absensi keluar menampilkan input NIK dan pilih lokasi proyek. Jam masuk dan tanggal akan ter-input secara otomatis. Lokasi proyek bisa dipilih sesuai yang di setting oleh server dan display dengan maps berdasarkan koordinat lokasi.
Keterangan :
1 : Masukan NIK karyawan harian 2 : Pilih area proyek
5. Tampilan Slip Gaji
Gambar 4.2.5 Tampilan slip gaji
Menu slip gaji akan menampilkan rincian gaji yang akan diterima oleh karyawan harian yang bersangkutan. Nilai gaji berdasarkan jumlah hari kerja dikali nilai gaji per hari. Jika karyawan tidak masuk tidak menerima gaji. Keterangan :
1 : Menampilkan NIK karyawan harian 2 : Menampilkan Nama karyawan harian 3 : Menampilkan posisi karyawan harian 4 : Menampilkan gaji per hari
5 : Menampilkan jumlah hari masuk kerja.
6. Tampilan GUI Server Verifikasi Absensi
Gambar 4.2.6 Verifikasi absensi
Menu verifikasi ini berada pada client server, dimana SPV/Site manager akan login ke server dan masuk ke menu verifikasi absensi. Pilih tombol SAH untuk mengesahkan absensi dan pilih tombol TIDAK SAH untuk membatalkan absensi. Absensi tidak sah bisa diindifikasi jam masuk atau jam keluar tidak sesuai dengan Surat Perintah Kerja (SPK) atau faktor lain. Jika selesai verifikasi tekan tombol selesai untuk menyelesaikan proses verifikasi.
Keterangan :
1 : Tombol untuk memverifikasi absensi (Absensi SAH) 2 : Tombol untuk memverifikasi absensi (TIDAK SAH) 3 : Tombol untuk menyelesai verifikasi.
7. Tampilan GUI Server Admin Project
Gambar 4.2.7 Tampilan server
Menu admin project ini diperuntukan untuk admin mengelola absensi yang terlah dikirim oleh karyawan. Gaji karyawan sudah dihitung oleh sistem ketika SPV/Site menager melakukan verifikasi. Admin project dapat mengunduh rincian gaji yang ada di server dengan menekan tombol unduh. Keterangan :
