BAB IV PERANCANGAN SISTEM. Sistem yang dikembangkan dalam penelitian ini dikhususkan untuk desktop

Transkripsi

1 71 BAB IV PERANCANGAN SISTEM 4.1 Rancangan Sistem Rancangan Umum Tujuan dari desain sistem secara umum adalah untuk memberikan gambaran secara umum kepada user tentang system yang baru Kedudukan Sistem Sistem yang dikembangkan dalam penelitian ini dikhususkan untuk desktop application artinya bahwa aplikasi ini hadap dipakai satu orang Perancangan Kelas Perancangan kelas merupakan tahap yang krusial, pengembangan sistem berorientasi objek seharusnya menghasilkan sistem dengan method-method yang koheren dan tepat. Maka dari itu, pada perancangan kelas ini method-method yang dikembangkan dalam sistem akan digambarkan menggunakan model Activity Diagram dari setiap kelas. a. Kelas Operasi Login 1. Perancangan Operasi login

2 72 field kosong tidak valid masukan data login klik OK valid data login tersimpan Gambar 4.1 Activity Diagram login. a. Sebelum user akan menyimpan data login, terlebih dahulu megosongkan field - field pada form login. b. Setelah field -field data login kosong kemudian user mengisi data login kemudian klik tombol OK untuk menyimpan data dan menampilkan sub form. c. Apabila data login berhasil akan tampil pesan bahwa data login telah berhasil. d. Apabila data login gagal maka field -field data desain kembali kosong dan akan tampil pesan dari login tersebut. b. Kelas Input Data Jenis Aspek 1. Perancangan Input Data Jenis Aspek

3 73 field kosong tidak valid masukan data jenis aspek simpan valid pesan data berhasil di simpan Gambar 4.2 Activity Diagram Input Data Jenis Aspek. a. Sebelum user akan menyimpan data jenis aspek, terlebih dahulu megosongkan field -field pada form jenis aspek. b. Setelah field -field data jenis aspek kosong kemudian user mengisi data jenis aspek kemudian klik tombol save untuk menyimpan data desain. c. Apabila data jenis aspek berhasil di simpan akan tampil pesan bahwa data telah berhasil di simpan. d. Apabila data gagal di simpan maka field -field data desain kembali kosong. c. Kelas Input Data Mahasiswa 1. Perancangan Input Data Mahasiswa

4 74 field kosong tidak valid tambah data mahasiswa edit data mahasiswa simpan valid pesan data berhasil di simpan Gambar 4.3 Activity Diagram Input Data Mahasiswa. a. Sebelum user akan menyimpan data Mahasiswa, terlebih dahulu megosongkan field -field pada form Mahasiswa. b. Setelah field -field data Mahasiswa kosong kemudian user mengisi data Pilih Mahasiswa kemudian klik tombol save untuk menyimpan data Mahasiswa. c. Setelah field -field data Mahasiswa di tambah kemudian user dapat mengedit data Mahasiswa kemudian klik tombol save untuk menyimpan data Mahasiswa. d. Apabila data Mahasiswa berhasil di simpan akan tampil pesan bahwa data telah berhasil di simpan.

5 75 e. Apabila data gagal di simpan maka field -field data desain kembali kosong. d. Kelas Input Data Penilaian 1. Perancangan penilaian field kosong tambah data mahasiswa edit data mahasiswa tambah jenis aspek penilaian nilai mahasiswa nilai standar ulang simpan pesan data berhasil di simpan Gambar 4.4 Activity Diagram Input Data Penilaian. a. Sebelum user akan menyimpan data Mahasiswa, terlebih dahulu megosongkan field -field pada form Mahasiswa. b. Setelah field -field data Mahasiswa kosong kemudian user mengisi data Pilih

6 76 Mahasiswa kemudian klik tombol save untuk menyimpan data Mahasiswa. c. Setelah field -field data Mahasiswa di tambah kemudian user dapat mengedit data Mahasiswa kemudian klik tombol save untuk menyimpan data Mahasiswa. d. Kemudian bisa tambah jenis aspek yang di inginkan, bisa juga memilih aspek lainnya. e. Kemudian terlebih dahulu field diisi, kemudian proses penilaian terjadi jika user memilih combobox. f. Jika field terisi penilaian maka yang akan tampil adalah hasil penilaianpenilaian mahasiswa maupun nilai standar. g. Kemudian hasil penilaian tersebut disimpan, jika berhasil disimpan akan tampil pesan data berhasil disimpan e. Kelas Proses Nilai Penerimaan Beasiswa 1. Perancangan Proses Nilai

7 77 field kosong isi data nilai nilai jenis nilai ranking/akhir requery data tersimpan Gambar 4.5 Activity Diagram Input Proses Nilai. a. Terlebih dahulu field diisi, kemudian proses nilai terjadi jika user menekan tombol requery b. Jika field terlihat nilai jenisnya maka yang akan tampil adalah nilai hasil penerimaan beasiswa. c. Kemudian hasil nilai tersebut disimpan, jika berhasil disimpan akan tampil pesan data berhasil disimpan. Selanjutnya user menekan tombol cetak jika ingin tahu proses laporan nilai yang berhak mendapatkan beasiswa. f. Perancangan Lihat Laporan

8 78 cari jenis aspek tampil data nilai akhir cetak laporan Gambar 4.6 Activity Diagram Lihat Laporan Penerimaan Beasiswa. Untuk melihat laporan proses penerimaan beasiswa setiap mencari jenis, user melihat hasil pencarian dari jenis aspek tersebut, kemudian klik tombol requery yang ingin diketahui maka akan tampil data-data penerimaan beasiswa hasil proses penilaian. 4.2 Perancangan Layer Akses Layer Akses merupakan interaksi antara kelas dan data base yang saling berkaitan, untuk mempermudah dalam pengkodean program yang diimplementasikan dengan query dari tiap-tiap method. 4.3 Rancangan Storage Dalam sistem yang lama atau yang sedang berjalan segala bentuk yang berkaitan dengan pengolahan data masih dilakukan dengan cara manual (dicatat)

9 79 sedangkan sistem yang baru merupakan sistem informasi yang sudah menerapkan konsep basis data dalam pengolahan dan sebagai tempat penyimpanan datanya, serta menggunakan bahasa pemograman PHP dan MySQl untuk implementasi rancangan basis datanya. 4.4 Perancangan Database Skema Lerasi Table jenis aspek : Kode aspek, nama aspek, persentase CF, persentase SF, persentase ranking. Table sub aspek : Kode sub aspek, kode aspek, kelompok, nama sub aspek, nilai sub aspek, jumlah pilih. Table pilih sub aspek : kode pilih sub aspek, kode sub aspek, nama sub aspek, nilai sub aspek. Table mahasiswa :kode mahasiswa, nama mahasiswa, tempat lahir, tanggal lahir, alamat, telepon, kelas, semester, jurusan Perancangan Diagram Relasi Perancangan diagram relasi dapat dilihat pada gambar dibawah ini:

10 80 Tabel relasi1 -Kode aspek -kode dub aspek * * 1 Tabel jenis aspek -kode aspek -nama aspek -persentase CF -persentase SF -Pesentase ranking * 1 * Tabel pilih sub aspek -kode pilih sub aspek -kode sub aspek -nama sub aspek -nilai sub aspek 1 Tabel sub aspek -kode sub aspek -kode aspek -kelompok -nama sub aspek -nilai sub aspek -jumlah pilih * * Tabel relasi2 * -kode mahasiswa -kode pilih sub aspek * 1 Tabel mahasiswa -kode mahasiswa -nama mahasiswa -tempat lahir -tanggal lahir -alamat -telepon -kelas -semester -jurusan Gambar 4.7 Perancangan Diagram Relasi Struktur Tabel Struktur tabel menggambarkan detail tabel yang berisi field, tipe data, panjang data, dan keterangan lainnya. Adapun tabel-tabel yang digunakan dalam database aplikasi DSS penerimaan beasiswa ini adalah sebagai berikut: 1. Tabel : Login Fungsi Jenis : Menyimpan data user : Tabel induk Primary key : - Foreign key : - Struktur Tabel Tabel 4.1 Rancangan Tabel Login. Nama Field Tipe Data Size Keterangan

11 81 No_Urut Varchar 10 User Varchar 10 Pass Varchar Tabel : Jenis aspek Fungsi Jenis : Memilih nama aspek : Tabel pilih Primary key : - Foreign key : - Struktur Tabel Tabel 4.2 Rancangan Tabel Jenis aspek. Nama Field Tipe Data Size Keterangan Kode Aspek Varchar 10 Nama Aspek Long Varchar 100 Persentase CF Varchar 10 Persentase SF Varchar 10 Persentase Ranking Varchar Tabel : Pilih sub aspek Fungsi Jenis : Memilih nama aspek : Tabel pilih Primary key : - Foreign key : - Struktur Tabel

12 82 Tabel 4.3 Rancangan Tabel Detail Sub Aspek. Nama Field Tipe Data Size Keterangan Kode Pilih Sub Aspek Varchar 10 Kode Sub Aspek Varchar 10 Nama Sub Aspek Long Varchar 100 Nilai Sub Aspek Varchar Tabel : sub aspek Fungsi : Memilih nilai standar sub aspek Jenis : Tabel pilih Primary key : - Foreign key : - Struktur Tabel Tabel 4.4 Rancangan Tabel Sub Aspek. Nama Field Tipe Data Size Keterangan Kode Sub Aspek Varchar 10 Kode Aspek Varchar 10 Kelompok Varchar 10 Nama Sub Aspek Long Varchar 100 Nilai Sub Aspek Varchar 10 Nilai Sub Aspek Varchar Tabel : Mahasiswa Fungsi : penerima beasiswa Jenis : Tabel penerima

13 83 Primary key : - Foreign key : - Struktur Tabel Tabel 4.5 Rancangan Tabel Mahasiswa. Nama Field Tipe Data Size Keterangan Kode Mahasiswa Varchar 10 Nama Mahasiswa Long Varchar 100 Tempat Lahir Varchar 10 Tanggal Lahir Varchar 10 Alamat Varchar 10 Semester Varchar 10 Jurusan Long Varchar Tabel : Relasi 1 Fungsi Jenis : Menghubungkan tabel jenis aspek dan tabel sub aspek : Kode aspek Primary key : - Foreign key : - Struktur Tabel Tabel 4.6 Rancangan Tabel Relasi 1. Nama Field Tipe Data Size Keterangan Kode Aspek Varchar 10

14 84 Kode Sub Aspek Varchar Tabel : Relasi 2 Fungsi : Menghubungkan tabel pilih sub aspek dan tabel mahasiswa Jenis : Kode pilih sub aspek Primary key : - Foreign key : - Struktur Tabel Tabel 4. 7 Rancangan Tabel Relasi 2. Nama Field Tipe Data Size Keterangan Kode Pilih Sub Aspek Varchar 10 Kode Mahasiswa Long Varchar Perancangan Menu Perancangan menu digunakan untuk memudahkan kita dalam menjalankan program. Berikut gambar perancangannya:

15 85 Aplikasi DSS untuk Penerimaan Beasiswa Menu Utama File Master Data Proses Data Nilai Data Login Konfigurasi Data Data Peserta Penilaian Bobot Penilaian Selisih Gap Nialai CF dan NF Nilai Ranking Logout Tambah Edit Hapus Simpan Tambah Simpan Hapus Requery Requery Cetak Keluar Edit edit Tambah Simpan Edit Hapus Hapus Simpan Batal Gambar 4.8 Perancangan Menu Perancangan User Interface Perancangan user interface merupakan draft dari antarmuka yang akan diterapkan pada aplikasi DSS penerimaan beasiswa. Adapun perancangan user interface yang akan digunakan adalah sebagai berikut : 1. Form Menu Utama Perancangan form menu utama dari aplikasi DSS untuk penerimaan beasiswa ini terdapat beberapa menu antara lain, file, konfigurasi, proses data, nilai data, dan laporan. Menu utama ini merupakan interface pertama yang tampil jika menampilkan

16 86 sebuah aplikasi. User bisa mengakses menu-menu yang telah disediakan Aplikasi ini sesuai kebutuhan. Perancangan menu utama. Dapat dilihat seperti gambar Menu Utama File Konfigurasi Proses Data Nilai Data Gambar 4.9 Desain Tampilan Form Menu Utama. Program Menu Utama Program untuk untuk memilih sub-sub menu Deklarasi Pilihan Algoritma Pilihan File Login Logout Keluar Mater Data Konfigurasi Proses Data Data peserta Nilai Data Penilaian Bobot penilaian selisih gap Nilai ranking Nilai CF dan SF Laporan Cetak laporan Cetak nilai akhir Cetak penerima beasiswa Listing Program 4.1 Algoritma form Menu Utama

17 87 2. Form Login Perancangan form login digunakan untuk keamanan sistem, sehingga sebelum pengguna dapat mengakses seluruh menu yang sudah disediakan, maka pengguna harus memilih memasukan nama dan password terlebih dahulu. Jika nama dan password salah maka pengguna tidak dapat mengakses. Adapun perancangan user interface untuk form login. Dapat dilihat pada gambar Login dengan database User Name : Password : OK Cancel Message Selamat Datang OK Exit Apakah anda yakin akan menutup aplikasi ini Yes NO Gambar 4.10 Desain Tampilan Form Login.

18 88 Program Login Program untuk Masuk ke menu Utama dan menu bar dengan menginputkan username dan password Deklarasi Username, password :string Algoritma baca (username, password) if username dan password benar then tampil pesan login berhasil dan masuk menu utama dan masuk ke menu bar else tampil login tidak berhasil Listing Program 4.2 Algoritma form login. 3. Form Keluar Perancangan form keluar digunakan untuk mngeluarkan aplikasi kalau aplikasi tersebut sudah selesai dipakai. Dapat dilihat pada gambar Anda Yakin Keluar OK CANCEL Gambar 4.11 Desain Tampilan Form Keluar. Program Keluar Program untuk keluar menu Utama dan menu bar Deklarasi OK, Cancel :string Algoritma baca (Ok, Cancel) if Ok keluar then langsung keluar dari menu bar Listing Program 4.3 Algoritma form Keluar.

19 89 4. Form Konfigurasi Aspek Di dalam form konfigurasi aspek banyak menu form tersebut, jenis aspek, aspek, pilihan sub aspek. Form konfigurasi ini untuk melihat jenis yang dapat menerima beasiswa dan bisa menentukan penerima beasiswa yang berprestasi dan non-berprestasi. Dapat dilihat pada gambar Konfigurasi Aspek Kode Aspek Jenis Aspek Jenisa Aspek Aspek Jenisa Aspek Pilihan Sub Aspek Nama Aspek Kode Sub Aspek Pilih Sub Aspek > > Persentase (%) Core Faktor (CF) Nama Aspek Kode Aspek > Persentase (%) Secondary Faktor (SF) Nilai Standar Aspek > CF Nama Pilihan Sub Aspek Persentase (%) Ranking Jumlah Pilihan Sub Aspek Nilai Standar Sub Aspek Insert Update Simpan Hapus Insert Update Simpan Hapus Insert Update Simpan Hapus Kode Nama Aspek CF SF Ranking A1 Aspek Akademik A2 Aspek Non-Akademik Kode Kode AspekKelompok Nama Sub AspekNilai Sub Aspek Jumlah Pilih A1A A1 CF Kalkulus 7 0 A1B A1 SF Algoritma 8 0 Kode Pilih Kode Sub Aspek Nama Sub Aspek Nilai Sub Aspek A1G1 A1G Bidang Pramuka 8 A1G2 A2A PNS 6 Gambar 4.12 Desain Tampilan Form Konfigurasi. Program Jenis aspek Program untuk menginputkan, menambah, menyimpan, menghapus Deklarasi Kode Aspek :Vachar Nama Aspek :Vachar CF :Vachar SF :Vachar Ranking :Vachar Algoritma { menginputkan dan menyimpan } Program Aspek Jenis Aspek :Vachar Kode Sub Aspek :Vachar Nama Aspek :Vachar CF :Vachar SF :Vachar Nilai standar :Vachar

20 90 Jumlah pilihan sub aspek :Vachar if data sudah lengkap then tampil pesan yakin menambah data else tampil pesan data belum lengkap { mengubah } Buka data aspek Baca (jenis aspek, kode sub aspek, nama aspek, CF, SF, nilai standar,jumlah pilihan sub aspek) pilih data yang akan di ubah if data ada simpan data then tampil pesan data sudah di ubah { menghapus } Buka data aspek Baca (jenis aspek, kode sub aspek, nama aspek, CF, SF, nilai standar,jumlah pilihan sub aspek) pilih data yang akan dihapus if sudah dihapus Program Pilihan Sub Aspek Jenis Aspek :Vachar Pilihan Sub Aspek :Vachar Kode Aspek :Vachar Nama PilihanSub Aspek :Vachar Nilai standar sub aspek :Vachar 5. Form Data Peserta Listing Program 4.4 Algoritma form Konfigurasi. Perancangan form data peserta merupakan form yang terdaftar menerima beasiswa maupun tidak terdaftar penerima beasiswa. Dapat dilihat pada gambar Data Peserta Data Peserta Kode Mahasiswa Nama Mahasiswa Kode Mhs Nama Mahasiswa Tmpat Lahir Tanggal Lahir Tempat Lahir P1 Sopian Bandung Tanggal Lahir P2 Romadona Garut Alamat Telepon Jenis Kelamin L P Jurusan Semester > > Insert Update Simpan Hapus Batal

21 91 Gambar 4.13 Desain Tampilan Form Data Peserta. Program Data Peserta Program untuk menginputkan, menyimpan, mengedit, menghapus. Deklarasi Kode mahasiswa : Vachar Nama mahasiswa : Vachar Tempat lahir : Vachar Tanggal lahir : Date Alamat : Vachar Telepon : Vachar Jenis kelamin : Vachar Jurusan : Vachar Algoritma { menginputkan dan menyimpan } Buka data peserta Baca (Kode mahasiswa, Nama mahasiswa, Tempat lahir, Tanggal lahir, Alamat, Telepon, Jenis kelamin, Jurusan ) if data sudah lengkap { mengubah } Buka data peserta Baca (Kode mahasiswa, Nama mahasiswa, Tempat lahir, Tanggal lahir, Alamat, Telepon, Jenis kelamin, Jurusan ) pilih data yang akan di ubah if sudah di ubah then tampil pesan data sudah di ubah { menghapus } Buka data peserta Baca (Kode mahasiswa, Nama mahasiswa, Tempat lahir, Tanggal lahir, Alamat, Telepon, Jenis kelamin, Jurusan) pilih data yang akan dihapus if sudah dihapus then tampil pesan yakin data akan dihapus Listing Program 4.5 Algoritma form Data Peserta. 6. Form Penilaian

22 92 Perancangan form Penilaian merupakan form yang digunakan untuk menampilkan penilaian dari form data peserta. Perancangan form keterangan dapat dilihat pada gambar PENILAIAN Nama Peserta Penilaian > Jenis Aspek > Sub Aspek > Nilai Standar Pilihan Nilai > Nilai peserta Gap Proses Tambah Edit Simpan Hapus KodeObjek Kode Sub Aspek Nilai Sub Aspek Nilai Objek M2 A1G M4 A2A Batal Gap 0-20 Gambar 4.14 Desain Tampilan Form Penilaian. Program Penilaian Program untuk menginputkan, menyimpan, mengubah, menghapus. Deklarasi Peserta : Vachar Jenis aspek : Vachar Sub aspek : Vachar Nilai standar : Vachar Pilihan nilai : Vachar Nilai Peserta : Vachar Algoritma { menginputkan dan menyimpan } Buka data penialain Baca (Peserta, Jenis aspek, Sub aspek, Nilai standar, Pilihan nilai, Nilai Peserta ) if data sudah lengkap then

23 93 tampil pesan yakin menambah data else tampil pesan data belum lengkap { mengubah } Buka data penialain Baca (Peserta, Jenis aspek, Sub aspek, Nilai standar, Pilihan nilai, Nilai Peserta) pilih data yang akan di ubah if sudah di ubah then tampil pesan data sudah di ubah { menghapus } Buka data penilaian Baca (Peserta, Jenis aspek, Sub aspek, Nilai standar, Pilihan nilai, Nilai Peserta) pilih data yang akan dihapus if sudah dihapus then tampil pesan yakin data akan dihapus Listing Program 4.6 Algoritma form Data Penilaian. 7. Form Bobot Nilai Gap Perancangan form Bobot Nilai Gap merupakan form yang digunakan untuk menampilkan bobot peserta dan keterangan dari bobot tersebut. Perancangan form keterangan dapat dilihat pada gambar 4.16.

24 94 BOBOT NILAI GAP Selisih Gap Bobot Nilai Gap Bobot Gap Keterangan Insert Update Simpan Hapus No Selisih Gap Bobot Gap Keterangan Gambar 4.15 Desain Tampilan Form Bobot Nilai Gap. Program Bobot Nilai Gap Program untuk menginputkan, menyimpan, mengedit, menghapus. Deklarasi Selisih gap : Vachar Bobot gap : Vachar Keterangan : Vachar Algoritma { menginputkan dan menyimpan } Buka bobot nilai gap Baca (Selisih gap, Bobot gap, Keterangan) if data sudah lengkap { menghapus } Buka bobot nilai gap Baca (Selisih gap, Bobot gap, Keterangan) pilih data yang akan dihapus if sudah dihapus then Listing Program 4.7 Algoritma form Bobot Nilai Gap. 8. Form Rekap Nilai CF dan SF dan Ranking Perancangan form menambah aturan atau rekap sebuah nilai merupakan form yang digunakan untuk menambahkan aturan baru yang akan dibuat, setelah

25 95 menambahkan macam-macam form maupun tabel. Maka semuanya akan dihubungkan menjadi satu aturan yang baru untuk mendapatkan solusi penanganinnya supaya nilai tersbut tidak valid. Perancangan form menambah aturan maupun merekap nilai digunakan untuk melihat hasil aturan baru yang akan dibuat, setelah menambahkan macam-macam form maupun tabel. Maka semuanya akan dihubungkan menjadi satu aturan yang baru untuk mendapatkan beasiswa dengan nilai akhir. Perancangan form nilai akhir dapat dilihat pada gambar REKAP NILAI CORE FAKTOR dan SEKONDARY FAKTOR >Jenis Aspek REKAP NILAI CORE FAKTOR dan SEKONDARY FAKTOR Nilai Akhir Kd_aspek Kd_subaspek CF SF No Kode Mahasiswa Nama Mahasiswa Jurusan REQUERY REQUERY RANKING CETAK Gambar 4.16 Desain Tampilan Form Rekap Nilai CF dan SF Ranking. prosedur tambah data rekap nilai IS:data rekap nilai CF dan SF kosong FS: data rekap nilai bertambah satu record Deklarasi No Kode mahasiswa :Vachar Kode aspek :Vachar CF :Vachar SF :Vachar Deskripsi read (No, Kode mahasiswa, Kode aspek, CF, SF) if No=true & Kode mahasiswa =true & Kode aspek = true CF =true & SF = true then Simpan ke database else write ("gagal") prosedur Nilai Akhir IS: FS: data nilai akhir kosong Deklarasi

26 96 No Kode mahasiswa :Vachar Nama mahasiswa :Vachar Jurusan :Vachar Semester :Vachar Deskripsi read (No, Kode mahasiswa, Nama mahasiswa, Jurusan, Semester) if No=true & Kode mahasiswa =true & Nama mahasiswa = true Jurusan =true & Semester = true then Simpan ke database else write ("gagal") endif Listing Program 4.8 Algoritma form Nilai CF dan SF untuk Nilai Akhir. 9. Pencetakan Laporan/Output Rancangan Laporan/output adalah produk dari sistem informasi yang dihasilkan dari proses inputan dan pengolahan data oleh sistem. Output atau informasi yang dihasilkan sistem berupa kertas atau media lunak yang akan berguna dan memberikan nilai tambah bagi pengguna informasi tersebut. Rancangan output ini juga dirancang sedemikian rupa agar dapat memudahkan User dan TU dalam pemroses menerima beasiswa. Untuk lebih jelasnya dapat dilihat pada gambar 4.17.

27 97 KEMENTRIAN AGAMA UNIVERSITAS IASLAM NEGERI SUNAN GUNUNG DJATI BANDUNG FAKULTAS SAINS DAN TEKNOLOGI Jl.A.H. Nasution N Cibiru Telp Fax DAFTAR CALON PENERIMA BEASISWA Jenjang : C-S-1 SEMESTER GENEP/GANJIL THN 2010/2011 Tanggal : N0 Kode Objek Nama Objek 1 M1 Romadona Ahadi Putra Jurusan Jl.Suka Regang Jenis Kelamin Lakilaki Semester Nilai Genep 4,4 Bandung, Dekan, Dr. H. M. Subandi, Drs.,Ir.,MP. Gambar 4.17 Rancangan Cetak Laporan Penerimaan Beasiswa.