BAB IV PERANCANGAN SISTEM 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. 33
34 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
35 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 Nama aktor Deskripsi Pra Kondisi Skenario Hasil Use case input absensi masuk/keluar Karyawan Pada tahap ini akan di tampilkan menu absensi input jam masuk dan keluar. Karyawan dapat mengetahui rincian absensi masuk/keluar mereka. Sistem akan mengirim data jam masuk/keluar, hari, tanggal dan lokasi ketika input absensi ke server. 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 Nama aktor Deskripsi Pra Kondisi Use Case melihat rincian gaji Karyawan Pada tahap ini karyawan akan melihat rincian gaji yang di bayar oleh perusahaan Karyawan dapat mengetahui informasi rincian gaji miliknya
36 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 Nama aktor Deskripsi Pra Kondisi Skenario Hasil Use case verifikasi absensi SPV/Site manager Pada tahap ini SPV/Site manager akan melihat menu absensi yang sudah di input oleh karyawan dalam kurun waktu satu minggu. SPV/Site menager dapat melihat rincian absensi dari karyawannya. 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. Sistem akan menghitung gaji dan akan menampilkan rincian gaji.
37 4. Use case rekap gaji Tabel 0.5 Use case rekap gaji Nama use case Use case rekap gaji Nama aktor Deskripsi Pra Kondisi Skenario Hasil Admin Project 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. Admin dapat melihat rincian gaji karyawan per-periode. Sistem akan menampilkan absensi yang telah ter-verifikasi oleh SPV/Site manager. 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
38 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
39 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
40 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 Gambar 0.4 Activity verifikasi absensi
41 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. Gambar 0.5 Activity diagram rekap gaji
42 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 Deskripsi Sequence Diagram Input Gaji 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.
43 2. Sequence Diagram Melihat Rincian Gaji Gambar 0.7 Sequance diagram rincian gaji Tabel 0.7 Sequence diagram input gaji Nama Deskripsi Sequence Diagram Rincian Gaji 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.
44 3. Sequence Diagram Verifikasi Absensi Gambar 0.8 Sequence diagram verifikasi absensi Tabel 0.8 Sequence diagram verifikasi absensi Nama Deskripsi Sequence Diagram Verifikasi absensi 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
45 4. Sequence Diagram Rekap Gaji Gambar 0.9 Sequence diagram rekap gaji Tabel 0.9 Sequance diagram rekap gaji Nama Deskripsi Sequence Diagram Rekap Gaji 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.
46 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 3 : Tombol untuk login
47 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 5 : menampilkan nomor telpon
48 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 3 : Tekan tombol absensi.
49 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 3 : Tekan tombol absensi
50 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 : Menampilkan rincian gaji yang di terima karyawan harian.
51 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.
52 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 : 1 : Tombol untuk unduh rincian gaji