BAB IV PERANCANGAN USER INTERFACE DAN IMPLEMENTASI

Transkripsi

1 BAB IV PERANCANGAN USER INTERFACE DAN IMPLEMENTASI 4.1 Perancangan Struktur Tampilan Gambar 4.1 Rancangan Struktur Tampilan Web 81

2 Gambar 4.2 Rancangan Struktur Tampilan Aplikasi Android 4.2 User Interface Web Berikut ini adalah user interface web beserta deskripsi tatacara penggunaanya dari analisa dan perancangan aplikasi Monitoring Instructor Utilization and Development Record pada PT United Tractors Tbk Interface Halaman Login Gambar 4.3 Rancangan Layar Halaman Login 82

3 4.2.2 Interface Halaman Utama Admin Gambar 4.4 Rancangan Layar Halaman Utama Admin Pada halaman utama admin system, terdapat lima menu utama yaitu target JA (Job Assignment) Hours, View Report, update database, user dan akses admin. Menu Add JA Hours adalah menu untuk menambah dan melihat plan target jam pencapaian instruktur, kemudian View Report untuk melihat laporan, Update database untuk menambah database master data baru, menu User untuk menambah dan menghapus user sistem, dan akses admin untuk melihat aktifitas sistem. 83

4 4.2.3 Interface Add Plan Target Hours TTA (Branch) Gambar 4.5 Rancangan Layar Add Plan Target Hours TTA (Branch) Menu Add JA Hours adalah menu untuk menambah dan melihat plan target jam pencapaian instruktur. Untuk membuka halama ini Admin memilih menu Target JA hours, lalu memilih Add target JA Hours, dan memilih sub menu TTA. Kemudian mengisi jumlah jam tiap bulanya, ketika klik enter untuk masuk bulan berikutnya maka akan otomatis terisi target JI, JNI dan Development. Yaitu dengan pembagian JI 60%, JNI 25%, dan Development 15%. 84

5 4.2.4 Interface View Target Hours TTS (Site) Gambar 4.6 Rancangan Layar View Target Hours TTS (Site) Interface Update Database Gambar 4.7 Rancangan Update Database 85

6 Admin memilih menu update database lalu klik menu insert dan memilih jenis data yang akan ditambahkan. Kemudian klik save untuk menambah master data Interface View System Activity Gambar 4.8 Rancangan Layar View System Activity Menu access admin adalah menu untuk melihat aktifitas sistem Admin memilih menu access admin, lalu klik menu view system activity. Maka akan muncul aktifitas sistem dan tercantum juga user yang melakukan aktifitas tersebut. Menu ini untuk memonitoring aktifitas user dalam sistem seluruh Indonesia. 86

7 4.2.7 Interface Add User atau Instructor Gambar 4.9 Rancangan Layar Add User atau Instructor Menu Add user adalah menu untuk menambah user. User login yang dibuat menggunakan NRP yang sudah unik, dan password untuk login sistem web maupun android. Untuk masuk ke menu ini admin memilih menu User dan memilih menu Add User. Admin bisa menambah user dari level Manager sampai Instruktur. Sedangkan TEC hanya bisa menambahkan user dengan level instruktur yaitu dengan klik menu instructor, lalu add new instructor. 87

8 4.2.8 Interface View Report Gambar 4.10 Rancangan Layar View Report Dalam halaman ini user bisa melihat data yang dibutuhkan dengan memfilter tahun dan bulan atau search data tertentu. User juga bisa mengexport data tersebut menjadi format excel. Dan langsung melihat grafik achievement JI, JNI, dan Development Instruktur tersebut. Untuk masuk ke menu ini, user memilih menu View Report lalu memilih Semua report yang akan dilihat atau bisa juga langsung memilih jenis report pada sub menu. 88

9 4.2.9 Interface Halaman Utama TEC Gambar 4.11 Rancangan Layar Halaman Utama TEC Pada halaman utama TEC, terdapat lima menu utama yaitu View Report, Absent Instructor, Training Schedule, Instructor (user) dan Monitoring Graphic. Menu View Report untuk melihat laporan atau histori aktifitas instruktur serta ada menu download datanya, Absent Instructor untuk menambah data ketika instruktur tidak masuk, Training Schedule untuk melihat, menambahkan, melaunching jadwal training, melihat utilisasi instruktur serta jadwal training yang terlaksana maupun tidak terlaksana. Menu Instructor untuk menambah dan menghapus user instruktur baru, dan Monitoring Graphic untuk melihat grafik yang diinginkan. 89

10 Interface Add Training Schedule Gambar 4.12 Rancangan Add Training Schedule TEC memilih menu Training Schedule lalu memilih Add Training Schedule. Pada field activity ketika dipilih akan memfilter patternya sesuai tabel berikut: Tabel 3.25 Activity dan Pattern 1 Activity : Formal Teaching Non Formal Teaching Pattern: Class training FOGT FOJI Skill atau Assesment Skill Test OJI Mentor CSR (Kunjungan kerja sekolah) CSR (Program kerja SOBAT) 90

11 Kemudian TEC mengisi lengkap field selanjutnya lalu klik save. Ketika sudah disave akan muncul notifikasi jadwal berhasil disimpan dan muncul halaman view plan training untuk kemudian di launching. Data dari jadwal training ini akan otomatis masuk pada kategori JI Interface View dan Launch Plan Training Gambar 4.13 Rancangan View dan Launch Plan Training Untuk masuk ke halaman ini TEC memilih menu Training Schedule lalu memilih View plan training, lalu TEC memilih plan training yang akan di launching untuk persetujuan TC Head. Lalu klik launching. 91

12 Interface Add Development Instructor Gambar 4.14 Rancangan Add Development Instructor TEC memilih menu Training Schedule lalu memilih Add Development Instructor. Pada field activity ketika dipilih akan memfilter patternya sesuai tabel berikut: Tabel 3.26 Activity dan Pattern 2 Activity : Formal Development Pattern: Class training FOGT FOJI Asistensi Knowledge Assesment Development (SOMP) Knowledge Assesment Development (Self Learning) Knowledge Assesment Development (Mentor) Knowledge Assesment Development (Asistensi) Knowledge Assesment Development (Others) Skill Assesment Development (SOMP) 92

13 Non Formal Development Skill Assesment Development (Self Learning) Skill Assesment Development (Mentor) Skill Assesment Development (Asistensi) Skill Assesment Development (Others) Skill Assesment Development (Tes TIO) Konsolidasi PU OJT Mentor Sit in training Self Learning WorkShop Inovation OGL (On Going Learning) Interface Add Absent Instructor Gambar 4.15 Rancangan Add Absent Instructor TEC menginput NRP dan otomatis akan keluar data NRP tersebut, Activity terisi otomatis absent lalu TEC mengisi periode absent dan jumlah hari. Data ini nantinya dimonitoring dalam bentuk grafik. 93

14 Interface View Utilization Instructor Gambar 4.16 Rancangan View Utilization Instructor Dalam menu ini, semua user bisa melihat seluruh aktifitas instruktur dengan menggunakan gantt chart. Juga setiap aktifitas dibedakan dengan warna sehingga mudah dalam monitoringnya. Selain itu chart yang akan dilihat bisa di filter menurut area nya. 94

15 Interface Halaman Utama TC Head Gambar 4.17 Rancangan Layar Halaman Utama TC Head Pada halaman utama TC Head, terdapat empat menu utama yaitu View Report,, Training Schedule, Instructor (user) dan Monitoring Graphic. Menu View Report untuk melihat laporan atau histori aktifitas instruktur, Training Schedule untuk melihat jadwal training, jadwal yang membutuhkan approval, dan melihat utilisasi instruktur serta jadwal training yang terlaksana maupun tidak terlaksana, menu Instructor untuk melihat data instruktur, dan Monitoring Graphic untuk melihat grafik yang diinginkan. 95

16 Interface Approval Training Schedule Gambar 4.18 Rancangan Approval Training Schedule Untuk masuk ke halaman ini TC Head memilih menu Training Schedule lalu memilih Need Approval, lalu TC Head memilih jadwal training lalu memilih apakah training tersebut akan di approve atau reject. Dalam mengambil keputusan ini, TC Head melihat proses bisnis berjalan atau kondisi tertentu, melihat ketersediaan instruktur dan training kedepan sehingga training yang sudah di launching oleh TEC ada yang disetujui dan tidak. Contohnya ada kasus instruktur yang sedikit, ada jadwal training untuk mrkanik internal dan ternyata minggu depan ada customer yang membeli unit lalu harus ada training operator, maka jadwal training mekanik tersebut di reject terlebih dahulu. Apabila TC Head memilih reject, maka akan muncul pop up remarks untuk catatan training tersebut di reject. 96

17 Interface Halaman Utama Manager Gambar 4.19 Rancangan Halaman Utama Manager Pada halaman utama TC Head, terdapat empat menu utama yaitu View Report, Training Schedule, Instructor (user) dan Monitoring Graphic. Menu View Report untuk melihat laporan atau histori aktifitas instruktur serta ada menu download datanya, Training Schedule untuk melihat jadwal training, jadwal yang membutuhkan approval, dan melihat utilisasi instruktur serta jadwal training yang terlaksana maupun tidak terlaksana, menu Instructor untuk menambah dan menghapus user instruktur baru, dan Monitoring Graphic untuk melihat grafik yang diinginkan. 97

18 Interface Monitoring Graphic by Instructor Gambar 4.20 Rancangan Monitoring Graphic by Instructor 98

19 Interface Monitoring Graphic by Area Gambar 4.21 Rancangan Monitoring Graphic by Area 99

20 Interface Comparison Absent Gambar 4.22 Rancangan Comparison Absent 100

21 Interface Halaman Utama Instruktur Gambar 4.23 Rancangan Halaman Utama Instruktur Pada halaman utama Instruktur, terdapat lima menu utama yaitu View Report,, Training Schedule, Instructor (user) dan Monitoring Graphic. Menu View Report untuk melihat laporan atau histori aktifitas instruktur, Training Schedule untuk melihat jadwal training, melihat utilisasi instruktur serta jadwal training yang terlaksana maupun tidak terlaksana, menu profile untuk melihat data pribadi dan mengubah password, dan Monitoring Graphic untuk melihat grafik yang diinginkan. 101

22 4.3 User Interface Android Berikut ini adalah user interface aplikasi android beserta deskripsi tatacara penggunaanya dari analisa dan perancangan aplikasi Monitoring Instructor Utilization and Development pada PT United Tractors Tbk Interface Splash Android Gambar 4.24 Rancangan Splash Android 102

23 4.3.2 Interface Log in Android Gambar 4.25 Rancangan Log in Android Untuk login aplikasi android, instruktur cukup menggunakan user dan pasword yang sama dengan aplikasi web. Dan yang bisa menggunakan aplikasi android adalah akun dengan level user atau instruktur. 103

24 4.3.3 Interface Halaman Utama Android Gambar 4.26 Rancangan Halaman Utama Android Pada halaman utama android, terdapat empat menu utama View training Schedule, create report, dan Hystory Job Assignment. Menu View training Schedule adalah menu untuk melihat jadwal training instruktur tersebut, Create report untuk membuat laporan atau merecord aktifitas instruktur tersebut, Graphic untuk melihat grafik pencapaian JI, JNI, dan Development instruktur tersebut, kemudian View Report untuk melihat histori aktifitas instruktur tersebut. 104

25 4.3.4 Interface View Training Schedule Gambar 4.27 Rancangan View Training Schedule Pada menu View Training Schedule, instruktur bisa melihat jadwal training dengan memilih tab This Month untuk jadwal training dalam satu bulan berjalan, Next Month untuk jadwal training bulan berikutnya, dan Development untuk jadwal training Development instruktur tersebut. Setiap ada jadwal yang sudah di approve oleh TC Head, instruktur akan ada notifikasi jadwal training baru sehingga instruktur dapat update insformasi dengan mudah. 105

26 4.3.5 Interface Create Report Gambar 4.28 Rancangan Create Report Ketika instruktur klik Create Report maka akan keluar 3 sub menu yaitu JA Instructional untuk membuat report yang berkaitan dengan Job Assignment Instructional, JA Non Instructional untuk membuat report yang berkaitan dengan Job Assignment Non Instructional, dan Development untuk aktifitas Development instruktur. 106

27 1.3.6 Interface Add Report Job Assignment Instructional Gambar 4.29 Rancangan Add Report Job Assignment Instructional (Job Done) Menu add report JA Instructional untuk membuat report yang berkaitan dengan Job Assignment Instructional yaitu kegiatan mengajar instruktur. Data yang ada pada jadwal instruktur akan dipanggil otomatis menjadi data JI. Pada saat klik Add Report Job Assignment Instructional instruktur akan melihat jadwal training yang periode nya sudah memasuki tanggal pada saat itu. Kemudian ada dua pilihan yaitu Job Done ketika training terlaksana atau Cancel Job ketika training tidak terlaksana. 107

28 Gambar 4.30 Interface Add Report Job Assignment Instructional (Cancel Job) Pada saat instruktur memilih cancel job, maka sistem akan muncul popup konfirmasi dan apabila klik yes maka akan muncul kolom reason untuk memasukan catatan instruktur kenapa training yang sudah di approve TC Head tersebut tidak terlaksana. Hal ini biasanya terjadi karena hal yang tidak diduga seperti ketika customer awalnya sudah menyetujui jadwal training, namun peserta dari training datri customer belum siap atau ada job urgent, sehingga instruktur yang sudah berada di site customer gagal mengajar. Hal ini akan menjadi catatan untuk data evaluasi. 108

29 4.3.7 Interface Add Report Job Assignment Non Instructional Gambar 4.31 Rancangan Add Report Job Assignment Non Instructional Menu add report JA Non Instructional untuk membuat report yang berkaitan dengan Job Assignment Non Instructional yaitu kegiatan instruktur selain mengajar. Data ini diinput oleh instruktur dengan memilih activity dan description yang sudah ada dalam database. Kemudian memilih periode dan data lainya lalu save. 109

30 4.3.8 Interface Add Report Development Gambar 4.32 Rancangan Add Report Development Menu add Development untuk membuat report yang berkaitan dengan Development yaitu kegiatan training untuk menambah kompetensi instruktur. Data yang ada pada jadwal instruktur akan dipanggil otomatis menjadi data Development. Pada saat klik Add Report Development instruktur akan melihat jadwal development yang periode nya sudah memasuki tanggal pada saat itu. Kemudian ada dua pilihan yaitu Job Done ketika training terlaksana atau Cancel Job ketika training tidak terlaksana. Ketika klik Job Done akan muncul tampilan seperti diatas dan apabila terlaksana seperti skenario cancel Job Assignment Instructional. 110

31 4.3.9 Interface View Graphic Gambar 4.33 Rancangan Interface View Graphic 111

32 Interface View Hystory Job Assignment Gambar 4.34 Rancangan View Hystory Job Assignment 112

33 4.4 Rancangan Implementasi Jaringan Sistem Monitoring Instructor Utilization and Development ini membutuhkan webservice untuk mengirim data yang ada pada smartphone ke basisdata mysql yang ada. Format file yang digunakan pada aplikasi mobile agar bisa dikirim ke servernya adalah file bertipe json. Berikut ini merupakan gambaran tentang jaringan yang terjadi ketika proses pengiriman data dari aplikasi mobile sampai dimunculkan di web monitoring. Gambar 4.35 Rancangan Implementasi Jaringan Gambar diatas menjelaskan alur yang terjadi ketika data dari aplikasi mobile dapat ditampilkan di web monitoring. Dimulai dari aplikasi mobile mengirim respons dan parameter yang berisi variabel data aktifitas instruktur ke alamat webservice berupa file Json. File Json tersebut akan diubah dalam bentuk SQL ketika berada di webservice. Kemudian, oleh webservice data aktifitas instruktur berupa SQL tersebut di insert ke basisdata MySQL. Dari basisdata MySQL inilah yang akan dipanggil oleh web monitoring dan ditampilkan di web tersebut. Dan sebaliknya, data yang sudah ada pada MySQL bisa dipanggil dan ditampilkan pada aplikasi android. 4.5 Implementasi Sistem Implementasi merupakan penerapan dari proses analisis dan perangcangan yang telah dibahas dalam bab sebelumnya. Pada tahapan ini terdapat dua aspek besar yang diperlukan agar sistem dapat dijalankan. Kedua aspek tersebut adalah spesifikasi kebutuhan sistem yang meliputi perangkat keras (hardware), perangkat lunak (software) Kebutuhan Perangkat Keras Kebutuhan perangkat keras (hardware) sebagai berikut: 1. Personal Computer dengan spesifikasi sebagai berikut: a) Processor Intel Core i Ghz. b) Hardisk dengan sisa kapasitas kosong minimal 5 GB. c) RAM minimal 4 GB. d) Monitor dengan resolusi minimal 1366 x 768. e) Keyboard dan Mouse. f) Network Card atau Wifi (untuk jaringan internet) 113

34 2. Perangkat Android dengan spesifikasi sebagai berikut: a) Android 4.3 (Jelly Bean) b) CPU Dual-core 1.7 GHz. c) GPU Adreno 320 Display dengan resolusi 720 x Kebutuhan Perangkat Lunak Kebutuhan perangkat lunak (software) sebagai berikut: 1. Untuk Web : a) Microsoft Windows 8 sebagai Operating System yang digunakan. b) Mysql sebagai database yang digunakan. c) Xampp (Apache dan SQL). d) Sublime digunakan untuk meng-edit source code. e) Winscp digunakan untuk meng-upload web dan database. f) Mozilla Firefox untuk aplikasi browser 2. Untuk Android : a) Android Studio untuk membuat aplikasi android dengan android emulator b) Minimum versi Android Android 4.3 (Jelly Bean) 114