PERANCANGAN SISTEM Perancangan Sistem Usulan

Transkripsi

1 BAB 4. PERANCANGAN SISTEM Setelah melakukan proses analisa sistem berjalan maka akan dilanjutkan ke tahap proses perancangan aplikasi yang sesuai kebutuhan.dalam perancangan aplikasi berbasis web ini penulis menggunakan Unified Modeling Leangue (UML) sebagai bahasa permodelan.perancangan Aplikasi ini menggunakan software utama sebagai berikut : 1) XAMPP Sebagai alat bantu pembuatan aplikasi 2) Sublime Text 3 sebagai editor pemograman Web 3) Microsoft Visio 2007 sebagai alat bantu mengolah UML 4) Mozilla Firefox Perancangan Sistem Usulan Untuk memudahkan pembuatan aplikasi System informasi Perusahaan System Integrator menggunakan PHP Codeigniter penulis menggunakan metode UML.perlu diketahui metode uml itu sendiri merupakan metode Object Oriented Programing (OOP) yang notasinya menggunakan garis untuk menyatakan bahwa itu adalah suatu desain.permodelan dengan model UML Membantu melihat interaksi yang terjadi pada aplikasi dan dapat membantu menyederhanakan masalah jika terjadi masalah yang Komplek Use Case Diagram Usulan Diagram ini menggambarkan interaksi antar pengguna dengan sistem atau aplikasi. Use case diagram untuk aplikasi implementasi Perancangan System Informasi Perusahaan System Integrator Menggunakan PHP Codeigniter adalah sebagai berikut : 4-45

2 Report Approve Report Not Approve Home <include> Report Hari Ini Report Deployment Per Hari Print Bast Login <include> Engineer Deployment Entry Data Deployment <include> Report Approve Report Not Approve Home Report Hari Ini Report Deployment Per Hari Print Bast <include> <include> Deployment Entry Data Deployment <include> Tambah Data Karyawan Import Data Karyawan Edit Data Karyawan Master Data Karyawan Hapus Data Karyawan Pencarian Data Karyawan Login Tambah Data Karyawan Hapus Data Karyawan Edit Data Karyawan <include> Master Data PIC Pencarian Data Karyawan Admin Tambah Data Unit Import Data Unit Edit Data Unit <include> Master Data Unit Hapus Data Unit Pencarian Data Unit <include> Export Data Report Print Bast Edit Data Report Deployment Pencarian Report deployment Master Data Report Deployment Hapus Report Deployment Detail Report deployment <include> 4-46

3 Report Approve Report Not Approve Home <include> Login <include> Aprroved PIC Aproved Rejected Gambar 4-1User Case Diagram Usulan Berikut adalah keterangan mengenai Use Case diatas: Tabel 4-1 Keterangan Use Case Diagram Nama Use Case Keterangan Aktor Log in akan menampikan form Log in Report Deployment Report Not Approved Report Deploy Perhari Print BAST Approved Entry Data Deployment Tambah Data Karyawan akan menampilkan report/list Approved Deployment akan menampilkan report/list Not Approved Deployment akan menampilkan report/list Deploy Perhari akan menampilkan link print di tiap record pada report Deployment akan menampilkan form entry data Karyawan akan menampilkan form penambahan data Karyawan Admin, PIC CLIENT, Engineer Admin, PIC CLIENT, Engineer Admin, PIC CLIENT, Engineer Admin, Engineer Admin, Engineer Engineer Admin 4-47

4 Import Data Karyawan Edit Data Karyawan Pencarian Data Karyawan Hapus Data karyawan Tambah Data Pic Client Hapus Data Pic Client Edit Data Pic Client Pencarian Data Pic Client Tambah Data Unit Import Data Unit Edit Data Unit Pencarian Data Unit Hapus Data Unit akan menampilkan Link import pada data Karyawan akan menampilkan link edit di tiap record pada data Karyawan akan menampilkan form pencarian pada data Karyawan akan menampilkan link hapus di tiap record pada data Karyawan akan menampilkan form penambahan data PIC CLIENT akan menampilkan link hapus di tiap record pada data PIC CLIENT akan menampilkan link edit di tiap record pada data PIC CLIENT akan menampilkan form pencarian pada data PIC CLIENT akan menampilkan form penambahan data Unit akan menampilkan Link import pada data Unit akan menampilkan link edit di tiap record pada data Unit akan menampilkan form pencarian pada data Unit akan menampilkan link Admin Admin Admin Admin Admin Admin Admin Admin Admin Admin Admin Admin Admin 4-48

5 Export data Report Deployment Edit data Report Deployment Pencarian Data report Deployment Hapus Data report Deployment Detail Data Report Deployment Approve Reject hapus di tiap record pada data Unit akan menampilkan Link Export pada data Deployement akan menampilkan link edit di tiap record pada data Deployment akan menampilkan form pencarian pada data Deployment akan menampilkan link hapus di tiap record pada data Deployment akan menampilkan link detail di tiap record pada data Deployment akan menampilkan link approved di tiap record pada data Approved akan menampilkan link Not Approved di tiap record pada data Approved Admin Admin Admin Admin Admin PIC CLIENT PIC CLIENT 4.3. Activity Diagram Activity diagram merupakan sebuah diagram alir aktivitas dalam sistem yang sedang dirancang,bagaimana masing masing alir berawal,decision yang mungkin terjadi dan bagaimana mereka berakhir.activity diagram juga dapat menggambarkan proses parallel yang mungkin terjadi pada beberapa eksekusi. Berikut activity diagram usulan dalam penulisan dan perancangan aplikasi berikut Activity Diagram Log In 4-49

6 Gambar 4-2Activity Diagram Log in Keterangan : Aktivitas diawali, Admin, Pic Client, engineer membuka aplikasi kemudian system akan menampilkan form Log in, lalu Admin, PIC Client, engineer mengisi form log in. Selanjutrnya system akan mevalidasi. Jika data valid system akan menampilkan halaman utama, sedangkan jika tidak system akan kembali menampilkan form Log in Activity Diagram Menu Report Deployment 4-50

7 Gambar 4-3Activity Diagram Menu Report Deployment Keterangan : Aplikasi diawali, admin berhasil log in dan system menampilkan halaman utama, kemudian admin memilih menu report deployment dan system akan menampilkan report deployment Activity Diagram Print Berita Acara Serah Terima (BAST) 4-51

8 Gambar 4-4 Activity Diagram Print BAST Keterangan : Aplikasi diawali, system menampilkan halaman report hari ini. Admin, memilih link print BAST jika menginginkan salah 1 report yang sebelumnya atau hari ini diinput dijadikan hardcopy dengan cara melakukan print Activity Diagram Menu Data Karyawan 4-52

9 Gambar 4-5 Activity Diagram Menu Data Karyawan Keterangan : Aplikasi diawali, admin berhasil log in dan system menampilkan halaman utama, kemudian admin memilih menu master data karyawan dan system akan menampilkan data karyawan yang menjadi target pekerjaan deployment Activity Diagram Tambah Data Karyawan 4-53

10 Gambar 4-6 Activity Diagram Tambah Data Karyawan Keterangan : Aplikasi diawali, system menampilkan data karyawan, admin memilih link tambah dan system akan menampilkan form penambahan data karyawan dan admin mengisinya. Jika data yang diisi valid sesuai dengan format maka data karyawan bertambah, dan jika tidak valid maka system akan tetap menampilkan form data karyawan untuk dikoreksi kesalahan pengisianya Activity Diagram Delete Data Karyawan 4-54

11 Gambar 4-7 Activity Diagram Delete Data Karyawan Keterangan : Aplikasi diawali, system menampilkan data karyawan. Admin memilih link delete pada record di report sehingga data karyawan akan berkurang Activity Diagram Data Pic Client 4-55

12 Gambar 4-8 Activity Diagram Data Pic Client Keterangan : Aplikasi diawali, admin berhasil log in dan system menampilkan halaman utama, kemudian admin memilih menu master data PIC Client dan system akan menampilkan data PIC Client sesuai lokasi target deployment Activity Diagram Tambah Data Pic Client 4-56

13 Gambar 4-9 Activity Diagram Tambah Data Pic Client Keterangan : Aplikasi diawali, system menampilkan data Pic Client, admin memilih link tambah dan system akan menampilkan form penambahan data Pic Client dan admin mengisinya. Jika data yang diisi valid sesuai dengan format maka data PIC Client bertambah, dan jika tidak valid maka system akan tetap menampilkan form data PIC Client Activity Diagram Delete Pic Client 4-57

14 Gambar 4-10 Activity Diagram Delete Data Pic Client Keterangan : Aplikasi diawali, system menampilkan data Pic Client. Admin memilih link delete pada record di data Pic Client data berikut digunakan jika ada pengurangan atau perubahan lokasi Pic Client sehingga data berkurang Activity Diagram Master Data Unit 4-58

15 Gambar 4-11 Activity Diagram MasterData Unit Keterangan : Aplikasi diawali, admin berhasil log in dan system menampilkan halaman utama, kemudian admin memilih menu master data unit yang berisi semua record pekerjaan mulai dari Serial Number status pekerjaan yang sudah di approve atau belum dan target pekerjaan yang lain system akan menampilkan data unit Activity Diagram Tambah Data Unit 4-59

16 Gambar 4-12 Activity Diagram Tambah Data Unit Keterangan : Aplikasi diawali, system menampilkan data unit, admin memilih link tambah dan system akan menampilkan form penambahan data unit dan admin mengisinya. Jika data yang diisi valid sesuai dengan format maka data unit bertambah, dan jika tidak valid maka system akan tetap menampilkan form data unit Activity Diagram Delete Data Unit 4-60

17 Gambar 4-13 Activity Diagram Delete Data Unit Keterangan : Aplikasi diawali, system menampilkan data unit. Admin memilih link delete pada record di data unit sehingga data unit akan berkurang Activity Diagram Export Report Deployment 4-61

18 Gambar 4-14 Activity Diagram Export Report Deployment Keterangan : Aplikasi diawali, system menampilkan report deployment. Admin memilih link export report untuk mendapatkan format excel dari hasil laporan pemasangan perangkat Activity Diagram Entry Data Deployment Gambar 4-15 Activity Diagram Entry Data Deployment Keterangan : Aplikasi diawali, Engineer berhasil log in dan system menampilkan halaman utama, kemudian Engineer memilih menu deployment dan system akan menampilkan form entry deployment dan engineer mengisi sesuai field yang disediakan oleh sistem sesuai dengan pekerjaan yang sudah selesai 4-62

19 dilakukan jika berhasil maka data deployment akan bertambah,jika ada data yang tidak sesuai maka akan kembali ke form awal Activity Diagram Approved Not Approved Deployment Gambar 4-16 Activity Diagram Approval Or Not Approval Pic Client Keterangan : Setelah Engineer selesai melaksanakan pekerjaan dan mengisi form report deployment data akan disubmit ke database Selanjutnya Pic Client memastikan bahwa unit yang dipasang sudah sesuai requirement dan bisa di close maka Pic Client bisa memberikan approved via Aplikasi jika terdapat pekerjaan yang tidak sesuai misal ada kekurangan aksesoris,setelah dipasang ada konten yang tidak berjalan normal dll maka Pic bisa memberikan status not approved dengan remark untuk perbaikan selanjutnya Sequence Diagram 4-63

20 Sequence Diagram digunakan untuk menunjukan bagaimana perilaku pada sebuah skenario.diagram ini menunjukan interaksi antar class pada setiap usecase Sequence Diagram Log in Gambar 4-17 Sequence Diagram Log in Menggambarkan proses log-in admin.admin diharuskan log-in sebelum memulai semua aktifitas di web dan mengakses halaman utama.jika User name dan passwordnya salah maka sistem akan tetap menampilkan halaman utama Sequence Diagram Menu Report Deployment 4-64

21 Gambar 4-18 Sequence Diagram Menu Report Deployment Menggambarkan Proses Pada halaman utama kemudian memilih menu master deployment maka sistem akan menampilkan data master deployment yang berfungsi untuk melihat detail data karyawan yang sudah selesai dilakukan pemasangan aset Sequence Diagram Print Berita Acara Serah Terima Gambar 4-19 Sequence Diagram Print BAST Menggambarkan Proses Pencetakan Document Setelah data dinilai valid dan mendapatkan approval dari Pic Client. BAST Dicetak untuk digunakan 4-65

22 sebagai evidence penagihan atau fungi audit setelah pemasangan perangkat selesai Sequence Diagram Menu Data Karyawan Gambar 4-20 Sequence Diagram Menu Data Karyawan Menggambarkan Proses saat admin memilih menu master data karyawan untuk melihat apakah seluruh target user yang akan dilakukan pemasangan sudah terdaftar jika belum maka admin bisa melakukan proses penambahan secara manual maupun import dari excel Sequence Diagram Tambah Data Karyawan Gambar 4-21 Sequence Diagram Tambah Data Karyawan Menggambarkan Proses penambahan data karyawan jika di data yang sudah ada sebelumnya masih terdapat kekurangan dan dilakukan oleh admin. 4-66

23 4.4.6 Sequence Diagram Edit Data Karyawan Gambar 4-22 Sequence Diagram Edit Data Karyawan Menggambarkan saat admin memilih menu edit karyawan kemudian melakukan proses perubahan data karyawan untuk penyempurnaan dari informasi yang sudah ada Sequence Diagram Delete Data Karyawan Gambar 4-23 Sequence Diagram Delete Data Karyawan Menggambarkan proses saat admin memilih master data karyawan kemudian melakukan penghapusan data salah satu karyawan karena terdapat kekeliruan saat input atau memang datanya tidak diperlukan. 4-67

24 4.4.8 Sequence Diagram Data Pic Client Gambar 4-24 Sequence Diagram Data Pic Client Menggambarkan saat admin mengakses data Pic Client untuk mengetahui dimana lokasi Pic dan berapa jumlah karyawan yang di supervise oleh Pic tersebut hal ini penting untuk memastikan bahwa Pic mendapatkan informasi jadwal pemasangan perangkat dan cara mengakses maunpun memberikan status pemasangan Sequence Diagram Tambah Data Pic Client Gambar 4-25 Sequence Diagram Tambah Data Pic Client 4-68

25 Menggambarkan Proses Admin melakukan penambahan data Pic Client biasanya dilakukan karena data yang sudah ada sebelumnya tidak ditemukan atau ada penambahan baru menyesuaikan dengan kondisi dilapangan Sequence Diagram Delete Pic Client Gambar 4-26 Sequence Diagram Delete Pic Client Menggambarkan Proses saat admin mengurangi jumlah Pic Client dengan cara melakukan proses pengahapusan untuk mempersempit ruang lingkup dan memastikan jumlah Pic Client memang hanya untuk orang orang dengan jabatan tertentu Sequence Diagram Master Data Unit 4-69

26 Gambar 4-27 Sequence Diagram Master Data Unit Menggambarkan proses saat admin melakukan akses ke data master unit untuk melihat tipe dan model unit memastikan uniq key nya sudah di daftarkan untuk memastikan engineer bisa melakukan input saat dilapangan Sequence Diagram Tambah Data Unit Gambar 4-28 Sequence Diagram Tambah Data Unit Menggambarkan proses saat admin melakukan penambahan data karena data awal tidak terdapat data karyawan yang dibutuhkan sesuai gambar penambahan bisa dilakukan secara manual entry atau dengan import dari format excel yang sudah disesuaikan tabel nya Sequence Diagram Delete Data Unit 4-70

27 Gambar 4-29 Sequence Diagram Tambah Data Unit Menggambarkan proses jika admin menemukan data unit yang tidak sesuai kebutuhan maka datanya harus dihapus untuk menghindari duplikasi dengan uniq key yang lain Sequence Diagram Export Report Deployment Gambar 4-30 Sequence Diagram Export Report Deployment 4-71

28 Menggambarkan Proses dimana admin harus membuat laporan data pemasangan perangkat yang sudah selesai dilaksanakan oleh engineer proses export tersebut outputnya adalah document microsoft excel Sequence Diagram Entry Data Deployment Gambar 4-31 Sequence Diagram Entry Data Deployment Menggambarkan Proses dimana engineer setelah melakukan proses pemasangan perangkat malukan quality control dan memastikan seluruh perangkat bekerja seperti seharusnya.setelah itu engineer melakukan entry data berdasarkan unit yang dia kerjakan untuk selanjutnya mendapatkan status dari Pic Client kemudian mendapatkan status approve atau not approve Sequence Diagram Approved Not Approved Deployment 4-72

29 Gambar 4-32 Sequence Diagram Approved Or Not Approved Pic Client Menggambarkan Proses Final dari seluruh tahapan pekerjaan setelah admin melakukan penambahan data karyawan data unit kemudian engineer melakukan pekerjaan pemasangan perangangkat setelah itu Pic Client akan memberikan status pekerjaannya jika di berikan approved maka pekerjaan bisa dilanjutkan ke proses selanjutnya yaitu penagihan.untuk aplikasi yang di state dalam Tugas akhir berikut hanya sampai pada proses mencetak document saat Pic Client sudah memberikan approval terhadap pekerjaan 4.5. Perancangan Basis Data Pembuatan aplikasi ini membutuhkan sebuah database untuk pengolahan data. Maka database tersebut dibuat menggunakan PhpMyAdmin dan MySQL. Sebagai berikut: Struktur Tabel Struktur tabel ini merupakan sebuah penjelasan tentang field, tipe data dan ukuran data. Berikut tabel-tabel yang digunakan dalam pembuatan aplikasi: 1. Tabel Pic Client Tabel ini digunakan untuk menyimpan data Pic Client dan password admin, pic dan engineer, strukturnya terdiri dari: Tabel 4-2 Type Data Pic Client No Nama Field Type Data Ukuran Keterangan 1 id int 4 Primary key, Auto Increment 2 id_pic int 4 FK 3 username varchar 20 4 password varchar 20 5 level int 2 6 is_active enum Y','N' Keterangan : Id = 1 {int}

30 ** Berisikan penomoran secaran berurut untuk id user login Id_Pic = 1 {int} 4 ** Berisikan penomoran secaran berurut untuk id pic Username = 1 {character} 20 **Merupakan nama terang user login Password = 1 {character} 20 **Berisikan password Level = 1 {int} 2 **Berisikan level user login 2. Tabel Karyawan Tabel ini digunakan untuk menyimpan data karyawan, strukturnya terdiri dari: Tabel 4-3 Type Data Karyawan No Nama Field Type Data Ukuran Keterangan 1 id_karyawan int 4 Primary key, Auto Increment 2 nik varchar 4 3 fullname varchar 20 4 title varchar varchar 20 6 alamat_1 varchar 40 7 provinsi varchar 20 8 kota varchar 20 9 telepon varchar is_active enum Y','N' Keterangan : Id_Karyawan = 1 {int} 4 ** Berisikan penomoran secaran berurut untuk id karyawan Nik = 4 {varchar} 4 **Merupakan nomor induk karyawan 4-74

31 Format penulisan xxyy artinya xx = dua digit terakhir tahun lahir karyawan yy = dua digit terakhir tahun gabung ke perusahaan Contoh = 9217, 7816 Fullname = 1 {varchar} 20 **Merupakan nama terang karyawan Contoh = Ridwan Esara Title = 1 { varchar } 50 **Title merupakan jabatan karyawan, ditulis tanpa tanda baca. Contoh = General Affair Bandung = 1{ varchar } 20 **Berisi alamat karyawan ditulis dengan memakai tanda baca. Contoh = Tvku@dinus.ac.id Alamat_1 = 1 { varchar }40 **Alamat merupakan alamat lengkap karyawan, ditulis tanda baca dan kelas jalan ditulis dibelakang. Contoh = Jl. Sadewa 1 No 21, Jl Nakula Raya No 12 Provinsi = 1 { varchar } 20 **Provinsi adalah provinsi yang harus sesuai dengan alamat karyawan, ditulis tanpa tanda baca. Contoh = DKI Jakarta, Jawa Barat, Jawa Timur Kota = 1 { varchar } 20 **Kota adalah kota yang harus sesuai dengan alamat karyawan, ditulis tanpa tanda baca. Contoh = Semarang, Bandung, Lampung Telp = 10 { varchar } 12 **Merupakan nomor telephone, ditulis tanpa menggunakan tanda baca dan kode wilayah ditulis didepan. Contoh : , ,

32 3. Tabel Unit Tabel ini digunakan untuk menyimpan data unit, strukturnya terdiri dari: Tabel 4-4 Type Data Unit No Nama Field Type Data Ukuran Keterangan 1 id_unit int 4 Primary key, Auto Increment 2 serial_number varchar 8 3 merek varchar 20 4 type varchar 25 5 site varchar 20 6 is_active enum Y','N' Keterangan : Id_Unit = 1 {int} 4 Serial Number = 8 {varchar} 8 ** Berisikan penomoran secaran berurut untuk id unit **Merupakan serial number unit ditulis tanpa tanda baca Contoh : SPC067F9, PC Merek = 1 { varchar } 20 **Merek merupakan merek unit, ditulis tanpa tanda baca. Type = 1{ varchar } 25 Site = 1 { varchar }20 Contoh = LENOVO, ASUS, HP ** Type merupakan type unit, ditulis tanpa tanda baca. Contoh = X250, 4340s, Folio 9470m **Site merupakan lokasi pengieiman unit, ditulis tanpa tanda baca Contoh = Jakarta, Bandung 4. Tabel Pic Client Tabel ini digunakan untuk menyimpan data pic, strukturnya terdiri dari: Tabel 4-5 Type Data Pic Client 4-76

33 No Nama Field Type Data Ukuran Keterangan 1 id_pic int 4 Primary key, Auto Increment 2 nama varchar 20 3 jabatan varchar 20 4 alamat1 varchar 30 5 lokasi varchar varchar 20 7 hp varchar 12 8 img varchar is_active enum Y','N' Keterangan : Id_Pic = 1 {int} 4 ** Berisikan penomoran secaran berurut untuk id pic Nama = 1 {varchar} 20 **Merupakan nama terang pic Contoh = Ridwan Esara Jabatan = 1 { varchar } 50 **Jabatan merupakan jabatan pic, ditulis tanpa tanda baca. Contoh = General Affair Bandung, Engineer Bandung Alamat1 = 1 { varchar }40 **Alamat merupakan alamat lengkap karyawan, ditulis tanda baca dan kelas jalan ditulis dibelakang. Contoh = Jl. Sadewa 1 No 21, Jl Nakula Raya No 12 Lokasi = 1 { varchar } 20 **Lokasi adalah lokasi yang harus sesuai dengan alamat pic, ditulis tanpa tanda baca. Contoh = Jakarta, Bandung, Sukabumi = 1{ varchar } 20 **Berisi alamat karyawan ditulis dengan memakai tanda baca. 4-77

34 Contoh = Tvku@dinus.ac.id HP = 10 { varchar } 12 **Merupakan nomor telephone, ditulis tanpa menggunakan tanda baca dan kode wilayah ditulis didepan. Contoh : , , Img = 1 { varchar } 100 **Berisi lokasi penyimpanan img 5. Tabel Deployment Tabel ini digunakan untuk menyimpan data pic, strukturnya terdiri dari: Tabel 4-6 Type Data Deployment No Nama Field Type Data Ukuran Keterangan 1 id_dep int 4 Primary key, Auto Increment 2 tanggal_dep date 3 id_unit int 4 FK 4 id_karyawan int 4 FK 5 id int 4 FK 6 lt varchar 2 7 hostname varchar 6 8 ip varchar 17 9 mac_new varchar ket varchar approved varchar is_active enum Y','N' Keterangan : Id_Dep = 1 {int} 4 Tanggal Dep ** Berisikan penomoran secaran berurut untuk id deployment = {date} yyyy/mm/dd Tanggal Bulan Tahun = [01. 31] = [01. 12] = [ ] 4-78

35 Contoh = 2017/04/12 Id_Unit = 1 {int} 4 ** Berisikan penomoran secaran berurut untuk id unit Id_Karyawan = 1 {int} 4 ** Berisikan penomoran secaran berurut untuk id karyawan Id = 1 {int} 4 ** Berisikan penomoran secaran berurut untuk id user login Lt = 1 {varchar} 2 **Berisi lantai lokasi deploy ditulis tanpa menggunakan tanda baca Contoh = 11, 1, B1, LD Hostname = 4 {varchar} 4 **Berisikan hostname Format penulisan HNxxxx artinya HN = Mewakili nama hostname xxxx = nik karyawan Contoh = HN7817, HN9216 IP = 1 {varchar} 17 **Berisikan ip dari laptop Mac New = 1 {varchar} 17 ** Berisikan mac address dari laptop Keterangan = 1 { varchar } 100 **Berisikan keterangan, ditulis menggunakan tanda baca. Approved = 1 { varchar } 13 **Berisikan status approved Class Diagram Pada tahap berikutnya akan dijelaskan dalam bentuk class diagram dalam aplikasi ini untuk menunjukan alur pada pemanggilan class pada setiap form 4-79

36 dimana semua saling berhubungan dalam penggunaan aplikasi system informasi perusahaan system integrator menggunakan PHP CODEIGNITER Gambar 4-33 Class Diagram Usulan Desain Antarmuka (Design Interface) Berikut adalah desain antar muka aplikasi system informasi perusahaan system integrator menggunakan PHP CODEIGNITER. 1. Tampilan Log in 4-80

37 Gambar 4-34 Tampilan Log in Keterangan : ini adalah form Log in yang digunakan oleh semua aktor sebelum memulai atau membuka aplikasi pada halaman pertama diwajibkan Log in terlebih dahulu. 2. Tampilan Awal Admin Gambar 4-35 Tampilan Awal Admin Keterangan : Jika admin berhasil Log in maka tampilan utama nya adalah seperti gambar berikut 3. Tampilan Deployment Admin 4-81

38 Gambar 4-36 Tampilan Deployment Admin Keterangan : Setelah Log in jika admin memilih Menu deployment tampilanya adalah seperti gambar diatas 4. Tampilan Tambah Data karyawan Admin maka Gambar 4-37 Tampilan Tambah Data Karyawan Keterangan : Setelah Log in jika admin memilih Menu Master kemudian tambah data karyawan maka tampilanya adalah seperti gambar diatas. 5. Tampilan Edit Data Karyawan 4-82

39 Gambar 4-38 Tampilan Edit Data Karyawan Keterangan : Setelah Log in dan admin ingin merubah data karyawan yang sudah ada maka tampilannya adalah seperti gambar diatas 6. Tampilan import data karyawan Gambar 4-39 Tampilan import data karyawan Keterangan : Setalah Log in dan admin ingin meng import data karyawan maka tampilanya adalah seperti gambar diatas 4-83

40 7. Tampilan Data Pic Gambar 4-40 Tampilan Data Pic Client Keterangan : Setelah Log in dan admin ingin membuka menu data Pic Client maka tampilanya adalah seperti gambar diatas. 8. Tampilan Tambah Data Pic Client Gambar 4-41 Tampilan Tambah Data Pic Client Keterangan : Setelah Log in dan Admin ingin menambah data Pic Client secara manual maka tampilannya adalah seperti gambar diatas. 9. Tampilan Data Unit 4-84

41 Gambar 4-42 Tampilan Data Unit Keterangan : Setelah Log in dan Admin memilih data Master kemudian memilih data unit maka tampilanya adalah sesuai gambar diatas. 10. Tampilan Tambah data unit Gambar 4-43 Tampilan Tambah Data Unit Keterangan : Setelah Log in admin memilih data master kemudian memilih tambah unit maka tampilan nya adalah sesuai gambar diatas 11. Tampilan Import data unit 4-85

42 Gambar 4-44 Tampilan Import Data Unit Keterangan : Setelah Log in dan admin ingin menambahkan data pic lewat data dan format excel yang sudah disesuakan template nya maka tampilanya adalah seperti diatas. 12. Tampilan Awal Setelah Engineer Log In Gambar 4-45 Tampilan Awal Engineer Keterangan : Setelah Log in Engineer melihat data Deployment maka tampilanya adalah seperti gambar diatas. 4-86

43 13. Tampilan Entry Form Deployment baru Gambar 4-46 Tampilan Form Entry Deployment Keterangan : Setelah Log in dan Engineer melakukan Entry data deployment baru maka tampilanya seperti gambar diatas. 14. Tampilan Awal Pic Client Gambar 4-47 Tampilan Awal Pic Client Keterangan : Setelah Log in dan Pic client maka tampilannya adalah seperti gambar diatas. 15. Tampilan Data Approval Pic client 4-87

44 Gambar 4-48 Tampilan Data Approval Pic Client Keterangan : Setelah Pic Client Log in dan membuka menu approval maka tampilannya adalah seperti gambar diatas.dari tampilan tersebut Pic Client bisa membuka data detail pekerjaan engineer sebelum memilih memberikan approve atau not approve 4-88