BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Sistem Dalam perancangan suatu sistem berbasis komputer perlu adanya analisis sistem. Analisis sistem dapat didefinisikan sebagai penguraian dari suatu sistem utuh dan dapat mengevaluasi permasalahan-permasalahan yang ada. Tahapan analisis merupakan tahapan yang paling awal dan paling penting dalam pembuatan sebuah perangkat lunak, karena kesalahan di tahap ini akan menyebabkan juga kesalahan di tahap selanjutnya. Oleh karena itu diperlukan suatu metode yang dapat digunakan sebagai pedoman dalam pembuatan sistem. Dalam membangun Rancangan Aplikasi Pendataan Mahasiswa Pada Universitas XYZ menggunakan PHP dan MySQL ini penulis akan menganalisa kebutuhan dasar sistem.analisadilakukan terhadap data-data yang merepresentasikan masalah,sehingga dapat diketahui spesisifikasi kebutuhan sistem yang akandibangun. Dalam pembuatan perangkat lunak ini penulis menganalisa komponen dari sistem yang dibangun atau dibuat diantaranya adalah sebagai berikut: 1. Perangkat lunak, yaitu Rancangan Aplikasi PendataanMahasiswaPada Universitas XYZmenggunakan PHP dan MySQL. 2. Informasi yang ada dalam aplikasi ini disusun berdasarkan data pada Mahasiswa. 3. Perangkat keras, yaitu laptop. 4. User, yaitu pengguna yang mengakses sistem. 5. Prosedur yaitu langkah-langkah yang mendefinisikan tentang penggunaan sistem. 22

23 3.1.1 Masukkan, Proses dan Keluaran Dalam aplikasi ini memerlukan sebuah masukkan berupa sistem informasi data mahasiswa yang akan terintegrasi dengan KTP setiap mahasiswa. Proses yang akan dijalakan pada aplikasi ini menyimpan sebuah pengelolaan dan informasi data mahasiswa ke dalam basis data, serta langsung tereksekusi informasi data tersebut pada layar sebagai keluaran. 3.2 Konsep Rancangan Aplikasi PendataanMahasiswaPada Universitas XYZ menggunakan PHP dan MySQLini merupakan aplikasi yang dibuat untuk membangun suatu sistem pengelolaan dan informasi data yang bersifat interaktif dalam membuat dan menyimpan data melalui suatu website.aplikasi ini dirancang menggunakan metode penelitian dilakukan melalui 6 tahap yaitu rekayasa sistem, analisis, desain, pengkodean, pengujian dan pemeliharaan. Dalam aplikasi ini terdapat 7 sub menu yaitu Home, Form Pendaftaran KTP, Form Pendaftaran Mahasiswa, Form Pendaftaran Mata Kuliah, Form Mata Kuliah, Data Mahasiswa dan Data Mata Kuliah. Berikut penjelasan secara rinci mengenai konsep dasar dari rancangan Aplikasi Data Mahasiswa XYZ menggunakan PHP dan MySQL, yaitu: 1. Home Pada menu homeberisi tentang content yang mengenai visi dan misi mahasiswa di Univeritas XYZ. 2. Form Pendaftaran KTP Pada menu form pendaftaran KTP ini, user harus mengisi data mahasiswa sesuai dengan data KTP seperti ; nik, nama, tempat lahir, tanggal lahir, alamat, golongan darah, jenis kelamin, agama, pekerjaan, kewarganegaraan, status kawin, photo.

24 3. Form Pendaftaran Mahasiswa Pada menu form pendaftaranmahasiswaini, user dapat melihat sebuah form data mahasiswa yang belum ada datanya, sehingga user harus mengisi form data mahasiswa seperti ; nik, nim, fakultas, jurusan, email. Apabila nikmahasiswa sama, aplikasi tidak bisa memproses pendaftaran mahasiswa. 4. Form Pendaftaran Mata Kuliah Pada menu form pendaftaran mata kuliah ini, user dapat mengisi kode mata kuliah dan nama mata kuliah untuk semester ini. 5. Form Mata Kuliah Pada menu form mata kuliah ini, user harus mengisi nim yang telah terdaftar untuk mengambil mata kuliah. 6. Data Mahasiswa Pada menu data mahasiswamenampilkan sebuah sistem data mahasiswa yang telah diproses dari form pendaftaran, sistem data tersebut bisa diupdate atau didelete oleh user. 7. Data Mata Kuliah Pada menu data mata kuliah menampilkan semua data dan kode mata kuliah yang telah dibuat user. 3.3 Perancangan o Analisis dan Definisi Persyaratan Penulis melakukan pengumpulan data-data / informasi-informasi mahasiswa dan KTP yangberkaitan dengan perangkat lunak / sistem yangakan dibuat penulis. o Perancangan Sistem dan Perangkat Lunak

25 Pada tahapan ini, arsitektur perangkat lunak / sistem mulai dibuat berdasarkan data-data yang telah diperoleh sebelumnya pada tahapan analisa. Penulis menggunakan software MECROMEDIA DREAMWEAVERdengan fitur HTML, CSS, JavaScript, PHPbaik font, warna dan ukuran, posisi serta gambar yang akan ditampilkan dalam merancang interfaceaplikasi sistem informasi mahasiswa dan KTP. CODINGjuga dilakukan pada tahapan ini, kemudian komponen interface perangkat lunak juga dirancang dengan mengacu pada kebutuhankebutuhan yang sebelumnya telah dilakukan pada tahapan sebelumnya. o Implementasi dan Pengujian Pada tahapan ini, penulis melakukan pengujian terhadap tiap unit-unit program yang telah dibuat. Tujuan dilakukannya tahapan ini adalah untuk memverifikasi bahwa setiap unit program telah berjalan sesuai dengan fungsi yang telah ditetapkan sebelumnya. o Integrasi dan Pengujian Sistem Pada tahapan ini, seluruh unit program mulai diintegrasikan satu sama lain, kemudian diuji sebagai perangkat lunak / sistem secara lengkap dan utuh. Tujuan dari tahapan ini adalah untuk menjamin bahwa segala persyaratan yang sebelumnya dicatat pada tahapan analisa telah terpenuhi dan tidak ada yang meleset dari perkiraan atau prediksi. o Operasi dan Pemelihara Pada tahapan ini, biasanya dilakukan perbaikan / penambahan / pengembangan perangkat lunak / sistem berdasarkan permintaan dari user atau pemilik. Dalam perancangan aplikasi ini terdiri dari perancangan data flow diagram dan perancangan flowchart.

26 3.4 Data Flow Diagram Diagram konteks merupakan diagram yang menggambarkan masukan yang diterima oleh suatu sistem dan keluaran yang dihasilkan oleh sistem tersebut. Diagram konteks merupakan proses perjalanan data dari suatu atau beberapa sumber untuk mencapai tujuan tertentu, yang pada proses perjalanan data tersebut hanya terdapat satu proses saja yang digambarkan dalam bentuk umum. Gambar 3.1 Model Diagram Konteks Pada diagram konteks diatas menjelaskan bahwa userdapat melakukan proses penambahan ( input) dan pengubahan ( edit ) data pada sistem aplikasi. Sedangkan sistem memberikan output data yang sesuai didalam database, sehingga mendapatkan data yang akurat. Sedangkan mahasiswamemberikan input data kedalam sistem dan sistem akan memberikan outdata yang mahasiswa inginkan. Sedangkan administrator dapat mengoperasikan sistem dengan hak akses penuh.

27 3.4.1 Data Flow Diagram Gambar 3.2 Diagram Flow Diagram Berikut gambar diagram alir dimana langkah-langkah awal dari sistem tersebut pengecekan apakah login aplikasi sesuai dengan username dan password. Tahap selanjutnya user mengisi data ktp, pengecekan apakah data sesuai dan menyimpan kedalam tabel ktp. Tahap selanjutnya tabel ktp mengirim data nik sebagai foreign key, pengecekan nik sebagai foreign key apakah sudah ada atau belum. Pada tahap selanjutnya user mengisi data mahasiswa dan disimpan kedalam tabel mahasiswa.tahap selanjutnya user mengisi data mata kuliah, pengecekan mata kuliah kedalam tabel mata kuliah. Pada tahap selanjutnya output data diperikasa sehingga data menjadi akurat, apabila data yang telah dibuat tidak sesuai, data bisa langsung di edit atau di delete.

28 Pada tahap akhir untuk menyelesaikan aplikasi, user harus logout terlebih dahulu. 3.5 Pemodelan Diagram Alir (Flowchart) Gambar 3.3 Pemodelan Diagram Alir

29 Gambar 3.3 (Lanjutan) Pemodelan Diagram Alir Penjelasan : User memulai aplikasi dengan login terlebih dahulu, dengan memasukan username dan password yang telah dimiliki. Sistem aplikasi akan memeriksa apakah username dan password yang dimasukan telah sesuai atau tidak. Apabila username dan password benar, user akan masuk ke halaman utama aplikasi. Kalau username dan password salah, user tidak bisa menjalankan aplikasi. Setelah di halaman utama, user akan melakukan pendaftaran ktp dengan menginput data ktp yang benar dan akurat, sehingga sistem akan menyimpan ke dalam database.

30 Sistem akan memeriksa NIK apabila sudah terdaftar di aplikasi, user tidak bisa melanjutkan aplikas tersebut. Jika belum terdaftar user akan melanjutkan ketahap pendaftaran mahasiswa. Selanjutnya user akan menginput data mahasiswa dan data mata kuliah, apabila data sudah benar, sistem akan memberikan output data yang sesuai dan apliaksi telah selesai. Apabila bila data salah, user harus mengedit kembali data tersebut dengan benar. 3.6 Perancangan Basis Data Perancangan basis data diperlukan agar data yang diinginkan menjadi basis data yang efisien dalam penggunaan ruang penyimpanan, cepat dalam pengaksesan dan mudah dalam manipulasi data. Perancangan basis data dapat dilakukan dengan menggunakan diagram hubungan entitas atau entity relationship diagram (ERD), normalisasi data dan data object description. 3.6.1 Diagram Hubungan Entitas Diagram hubungan entitas atau entity relation diagram (ERD) merupakan model data berupa notasi grafis dalam pemodelan data konseptual yang menggambarkan hubungan antara penyimpan. Dengan ERD ini kita dapat menguji model dengan mengabaikan proses yang harus dilakukan. Diagram hubungan entitas dapat membantu dalam menjawab persoalan tentang data diperlukan dan bagaimana data tersebut saling berhubungan.

31 Gambar 3.4 Model Diagram Hubungan Entitas 3.6.2 Data Object Description Deskripsi obyek data (data object description) menjelaskan secara rinci mengenai atribut-atribut yang dimiliki oleh masing-masing tabel yang ada dalam basis data sesuai dengan diagram hubungan entitas. Data object description dapat dipisahkan menjadi dua bagian, yaitu: 1. Data type definition menjelaskan tipe data yang digunakan oleh atribut pada masing-masing tabel yang ada dalam basis data aplikasi. 2. Data field description menjelaskan keterangan setiap atribut pada masing-masing tabel yang ada dalam basis data aplikasi.

32 3.6.3 Data Type Definition Definisi tipe data (data type definition) menjelaskan secara rinci mengenai atribut-atribut yang dimiliki oleh masing-masing tabel yang ada pada basis data aplikasi sesuai dengan diagram hubungan entitas. 1. KTP Tabel ktp merupakan entitas yang berfungsi untuk menyimpan semua data identitas ktp mahasiswa. KEY NAMA FIELD TIPE DATA UKURAN NULL? PK Nik char 3 NO Nama varchar 30 NO tempat_lahir varchar 20 NO tanggal_lahir varchar 20 NO Alamat varchar 50 NO jenis_kelamin enum NO Agama varchar 18 NO golongan_darah Varchar 2 NO Pekerjaan varchar 9 NO status_kawin varchar 11 NO Kewarganegaraan varchar 3 NO Photo varchar 1 NO Tabel 3.1 Deskripsi Objek Data Tabel KTP a. Nikbertipe datachar dengan panjang 3 karakter karena input nik tidak lebih dan kurang dari 3 karakter. b. Nama bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 30 karakter. c. Tempat_lahir bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 20 karakter. d. Tanggal_lahir bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 20 karakter. e. Alamat bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 50 karakter.

33 f. Jenis_kelamin bertipe data enum karena hanya terdapat 2 pilihan yang akan disimpan g. Agama bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 18 karakter. h. Golongan_darah bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 2 karakter. i. Pekerjaan bertipe datavarchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 9 karakter. j. Status_kawin bertipe datavarchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 11 karakter. k. Kewarganegaraan bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 3 karakter. l. Photo bertipe data varchar dengan 1 karakter untuk menginput photo kedalam aplikasi. 2. User Tabel user merupakan tabel dimana setiap user harus login terlebih dahulu agar bisa menggunakan aplikasi. KEY NAMA FIELD TIPE DATA UKURAN NULL? Username varchar 4 NO password varchar 255 NO nama varchar 30 NO login_terakhir datetime NO Tabel 3.2Deskripsi Objek Data Tabel User a. Username bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 4 karakter sebagai login pengguna. b. Password bertipe data varchar dengan ukuran 255 karakter karena segala inputan di encrypt MD5. c. Nama bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 30 karakter.

34 d. Login_terakhir bertipe data datetime untukmencatat tanggal dan jam login terakhir aplikasi. 3. Mahasiswa Tabel mahasiswa merupakan entitas yang berfungsi untuk menyimpan semua data mahasiswa. KEY NAMA TIPE UKURAN NULL? FIELD DATA PK nim char 11 NO FK id char 3 NO fakultas varchar 13 NO jurusan varchar 18 NO Tabel 3.3 Deskripsi Objek Data Tabel Mahasiswa a. Nim bertipe data char, kumpulan karakter yang panjangnya tetap hanya dibatasi sampai 11 karakter. b. Id bertipe datachar, kumpulan karakter yang panjangnya tetap hanya dibatasi sampai 3 karakter. c. Fakultas bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran13 karakter. d. Jurusanbertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 18 karakter. 4. Ambil Mata Kuliah Tabel ambil mata kuliah merupakan tabel untuk membuat sistem pada setiap mata kuliah. KEY NAMA FIELD TIPE DATA UKURAN NULL? PK nim varchar 11 NO kodemk varchar 10 NO nilai float NO Tabel 3.4Deskripsi Objek Data Tabel Ambil Mata Kuliah

35 a. nim bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 11 karakter. b. kodemk bertipe varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 10 karakter. c. Nilai bertipe data float. 5. Mata Kuliah Tabel mata kuliah merupakan entitas yang berfungsi untuk menyimpan semua data mata kuliah. KEY NAMA FIELD TIPE DATA UKURAN NULL? PK kodemk varchar 10 NO namamk varchar 30 NO Tabel 3.5Deskripsi Objek Data Tabel Mata Kuliah a. kodemk bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 10 karakter. b. namamk bertipe data varchar, kumpulan karakter yang panjangnya tidak tetap hanya memiliki ukuran 30 karakter. 3.7 Perancangan Tata Letak Tata letak atau layout merupakan desain tampilan aplikasi yang akan dibuat. Dimana tata letak adalah dasar desain seperti peletakan posisi-posisi dari semua masukan. Adapun pembagian area dari desain tata letak aplikasi ini adalah sebagai berikut: 1. Header Area Bagian ini merupakan tempat untuk menampilkan logo dan gambar header dari aplikasi. 2. Content Area Bagian ini merupakan tempat untuk menampilkan isi dari aplikasi sesuai dengan menu yang terpilih dan content area lebih diprioritaskan untuk tempat tampilan soal.

36 3. Footer Bagian ini merupakan tempat untuk menampilkan tulisan hak cipta dan informasi pembuat. Header Content Footer Gambar 3.5Desain Tata Letak Aplikasi 3.8 Perancangan Antar Muka Antar muka atau interface merupakan bagian yang menghubungkan antara sistem dengan pengguna. Dengan demikian suatu perancangan antar muka yang baik akan memudahkan pengguna untuk berinteraksi dengan aplikasi yang dibuat. Berikut merupakan perancangan antar muka aplikasi penghitungan pengunjung ini:

37 1. Tampilan Halaman Login Universitas XYZ Login Selamat Datang Username Password Sign In Data Mahasiswa Gambar 3.6 Rancangan Halaman Login Tampilan halaman login adalah halaman yang pertama kali diakses oleh pengguna. Dimana pada halaman login terdapat pilihan username dan password yang akan diisi oleh user, sign inberfungsi untuk login, sedangkan Data mahasiswa menampilkan semua data yang telah dibuat.

38 2. Tampilan Halaman Index Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Content Gambar 3.7 Rancangan Halaman Index Tampilan Halaman Index adalah halaman yang kedua, dimana pada halaman index ini terdapat visi dan misikemahasiswaan. Dan logout untuk keluar dari aplikasi.

39 3. Tampilan Halaman Form Pendaftaran E-KTP Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Form Pendaftaran E-KTP Cancel Submit Gambar 3.8Rancangan Halaman Form Pendaftaran E-KTP Tampilan halaman form pendaftaran E-KTP adalah halaman yang ketiga, diamana user yang menggunakan aplikasi ini akan menginput data E-KTP dengan form yang telah tersedia. Pada tampilan ini terdapat juga tombol-tombol yang disertakan dengan fungsinya berikut penjelasan secara rinci : Submit berfungsi apabila data telah lengkap dan akan tersimpan. Cancel berfungsi apabila user membatalkan. Logout berfungsi keluar dari aplikasi.

40 4. Tampilan Halaman Pendaftaran Mahasiswa Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Form Pendaftaran Mahasiswa Cancel Submit Gambar 3.9 Rancangan Halaman Form Pendaftaran Mahasiswa Tampilan halaman form pendaftaran mahasiswa adalah halaman yang keempat dimana user akan menginput data mahasiswa yang sesuai dengan E-KTP. Pada tampilan ini terdapat juga tombol-tombol yang disertakan dengan fungsinya berikut penjelasan secara rinci : Submit berfungsi apabila data telah lengkap dan akan tersimpan. Cancel berfungsi apabila user membatalkan. Logout berfungsi keluar dari aplikasi.

41 5. Tampilan Halaman Form Pendaftaran Mata Kuliah Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Form Pendaftaran Mata Kuliah Cancel Submit Gambar 3.10 Rancangan Halaman Form Pendaftaran Mata Kuliah Tampilan halaman form pendaftaran mata kuliah adalah halaman yang kelima, dimana form yang berisi kode dan nama mata kuliah ini akan user daftar untuk mahasiswa. Pada tampilan ini terdapat juga tombol-tombol yang disertakan dengan fungsinya berikut penjelasan secara rinci : Submit berfungsi apabila data telah lengkap dan akan tersimpan. Cancel berfungsi apabila user membatalkan. Logout berfungsi keluar dari aplikasi.

42 6. Tampilan Halaman Form Mata Kuliah Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Form Mata Kuliah Cancel Submit Gambar 3.11 Rancangan Halaman Form Mata Kuliah Tampilan halaman form mata kuliah adalah halaman yang keenam, dimana user mengisi nama mata kuliah yang akan mahasiswa ambil sesuai dengan nim. Pada tampilan ini terdapat juga tombol-tombol yang disertakan dengan fungsinya berikut penjelasan secara rinci : Submit berfungsi apabila data telah lengkap dan akan tersimpan. Cancel berfungsi apabila user membatalkan. Logout berfungsi keluar dari aplikasi.

43 7. Tampilan Halaman Data Mahasiswa Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Tampilan Data Mahasiwa Details Matkul Edit Edit MK Remove Gambar 3.12 Rancangan Halaman Data Mahasiswa Tampilan halaman data mata kuliah adalah halaman yang ketujuh, tampilan output data nim, nik, nama, fakultas dan jurusanyang telah user buat.pada tampilan ini terdapat juga tombol-tombol yang disertakan dengan fungsinya berikut penjelasan secara rinci : Details berfungsi untuk melihat data E-KTP dan Mahasiswa yang tersimpan. Edit berfungsi untuk mengedit data apabila terjadi kesalahan input. Matkul berfungsi untuk melihat mata kuliah yang akan diambil. Edit Mata Kuliah berfungsi untuk mengganti atau menambahkan mata kuliah. Remove berfungsi untuk menghapus data mahasiswa. Logout berfungsi untuk keluar dari aplikasi.

44 8. Tampilan Halaman Data Mata Kuliah Logout Image Header Home Form Pendaftaran E-KTP Form Pendaftaran MHS Form Pendaftaran MK Form Mata Kuliah Data Mahasiswa Data Mata Kuliah Tampilan Data Mata Kuliah Edit Remove Gambar 3.13Rancangan Halaman Data Mata Kuliah Tampilan halaman data mata kuliah adalah halaman yang kedelapan, dimana output data nama mata kuliah yang telah terdaftar. Pada tampilan ini terdapat juga tombol-tombol yang disertakan dengan fungsinya berikut penjelasan secara rinci : Edit berfungsi untuk mengganti kode dan nama mata kuliah. Remove berfungsi untuk menghapus kode dan nama mata kuliah yang dipilih user. Logout berfungsi untuk keluar dari aplikasi.