BAB IV ANALISIS DAN PEMBAHASAN
4.1. Sekilas Tentang Program Studi TI UIN Syarif Hidayatullah Jakarta
4.3.5. Desain Interface
Desain interface perancangan sistem pembuatan surat ini meliputi : a. Interface halaman sebelum login
Interface halaman sebelum adalah tampilan aplikasi sistem untuk user dan admin yang belum melakukan login. Dalam tampilan aplikasi sistem ini bisnis proses yang ada hanya tampilan untuk melakukan login untuk user dan administrator. Pada halaman ini user yang telah teregistrasi oleh admin dapat melukakan proses yang tedapat dalam sistem ini.
Gambar 4.9 interface sebelum login
b. Interface halaman Admin setelah login
Interface halaman admin ini adalah tampilan setelah admin melakukan login. Dengan tampilan beberapa menu yang hanya dapat diakses oleh admin. Segala proses pada halaman admin ini yang memiliki hak penuh dalam proses
yang terdapat dalam sistem seperti mencetak surat dan menambah user.
Gambar 4.10 Interface halaman admin
Keterangan : 1) Home
Menu ini adalah halaman utama saat admin telah melakukan login.
2) Program Studi
Menu ini berisikan informasi input program studi yang dapat ditambah ataupun dihapus. Hak akses sejauh ini dalam sistem adalah prodi Teknik Informatika.
3) Data Mahasiswa
Menu ini adalah berisi input data mahasiswa atau user yang dapat ditambah atau dikurang dalam database admin.
4) Data Surat
Menu ini adalah berisikan informasi data surat yang telah di input oleh user dan siap untuk di cetak oleh admin.
5) Data Admin
Menu ini adalah berisikan data-data dari admin yang dapat di tambah, dikurang dan di ubah
6) Logout
Menu ini adalah untuk proses keluar dari sistem. c. Interface halaman user
Interface ini berisi tampilan menu user yang sudah melakukan login. Interface ini berisi beberapa tampilan yang dapat di gunakan untuk memproses surat.
Keterangan : 1) Home
Menu ini adalah halaman utama saat user telah login.
2) Profil Mahasiswa
Menu ini berisikan data lengkap user yang dapat di ubah atau edit dan dapat ubah password yang digunakan user saat awal login.
3) Surat
Menu ini berisikan pilihan surat yang dapat digunakan oleh user yang selanjutnya dikirim ke admin setelah sebelumnya user melakukan pengisian data untuk selanjutnya diproses oleh admin.
4) Logout
Menu ini adalah untuk proses keluar dari sistem. d. Interface halaman user responsive setelah login
Interface ini berisi tampilan menu user yang sudah melakukan login melalui media web browser mobile. Tampilan interface ini berisi beberapa tampilan yang dapat di gunakan untuk memproses surat. Tampilan ini mengacu pada ukuran layar mobile yang dimiliki user. Tampilan interface ini bersifat responsive yang mengacu pada device yang dipakai oleh user.
Gambar 4.12 Interfaceuser responsive setelah login
Keterangan: 1) Home
Menu ini adalah halaman utama saat user telah login.
2) Profil Mahasiswa
Menu ini berisikan data lengkap user yang dapat di ubah atau edit dan dapat ubah password yang digunakan user saat awal login.
3) Surat
Menu ini berisikan pilihan surat yang dapat digunakan oleh user yang selanjutnya dikirim ke admin setelah sebelumnya user melakukan pengisian data untuk selanjutnya diproses oleh admin.
4) Logout
Menu ini adalah untuk proses keluar dari sistem.
4.4. Construction
Construction merupakan proses membuat kode. Coding atau pengkodean merupakan penerjemahan desain dalam bahasa yang bisa dikenali oleh komputer. Programmer akan menerjemahkan transaksi yang diminta oleh user. Tahapan inilah yang merupakan tahapan secara nyata dalam mengerjakan suatu software, artinya penggunaan komputer akan dimaksimalkan dalam tahapan ini. Setelah pengkodean selesai maka akan dilakukan testing terhadap sistem yang telah dibuat tadi. Tujuan testing adalah menemukan kesalahan-kesalahan terhadap sistem tersebut untuk kemudian bisa diperbaiki.
4.4.1. Coding
Pada tahap ini, penulis melakukan tahap pengkodean (coding) program terhadap hasil rancangan yang sudah dibuat sebelumnya untuk dijadikan program aplikasi. Tahap ini penulis melakukan implementasi dengan melakukan pemrograman aplikasi sistem pembuatan surat, setelah dilakukannya desain sistem, desain database serta desain interface yang sesuai dengan bisnis proses yang telah dirancang oleh penulis. Selanjutnya akan dihasilkan listing code dari aplikasi sistem pembuatan surat. Pengembangan ini menggunakan beberapa tools atau software yang berperan dalam pembuatan sistem ini.
Tabel 4.12 Tabel tools perangkat lunak
Perangkat Lunak Hasil
Adobe Dreamweaver CS 6 Terinstal
XAMPP 1.7.0 Terinstal
Notepad++ Terinstal
4.4.2. Implementasi Sistem
Tahap implemantasi ini menggambarkan beberapa tampilan dari aplikasi yang telah dibuat. Adapun beberapa tampilan tersebut yaitu:
1. Tampilan Halaman Admin
a) Home
Berikut output tampilan home yang dihasilkan sistem :
Gambar 4.13 Tampilan halaman admin
Halaman ini merupakan halaman yang pertama kali diakses oleh pengguna setelah berhasil melakukan login. Pada halaman ini, pengguna akan ditampilkan halaman yang berisi sambutan dan gambaran sistem. Pada halaman ini juga sudah terdapat menu pilihan menu-menu yang dapat diakses oleh pengguna.
b)Program Studi
Berikut output tampilan program studi yang dihasilkan sistem :
Gambar 4.14 Tampilan menu program studi
Halaman ini merupakan halaman yang berisi list dari program studi yang telah disesuaikan berdasarkan jurusan peminatan yang terdapat pada fakultas. Pada halaman ini juga terdapat menu yang dapat digunakan untuk menambah atau mengurangi list dari program studi.
c) Data Mahasiswa
Berikut output tampilan data mahasiswa yang dihasilkan sistem
:
Halaman ini merupakan halaman yang berisi list dari daftar biodata diri mahasiswa. Daftar mahasiswa ini berfungsi sebagai acuan user untuk dapat mengakses ke dalam sistem. Data awal mahasiswa diinput oleh admin. Mahasiswa yang sudah terdaftar atau teregistrasi dalam sistem berhak untuk dapat mengakses dan menggunakan fitur dalam sistem.
d)Data Surat
Halaman ini merupakan inti proses dari sistem. Menu ini digunakan untuk melihat masukan yang dikirim oleh user kepada sistem dan pengecekan surat yang ingin diproses. Berikut output tampilan data surat yang dihasilkan sistem :
Gambar 4.16 Tampilan menu data surat admin
Dalam menu data surat ini pengguna dapat melakukan proses pencetakan surat, identifikasian status surat serta menghapus data masukan surat yang sudah diproses.
Gambar 4.17 Tampilan menu data surat keterangan
e) Data Admin
Berikut output tampilan data admin yang dihasilkan sistem :
Gambar 4.18 Tampilan menu data admin
Halaman ini berisi data administrator yang memiliki hak akses untuk menambah atau mengurangi data-data dari sistem. Admin ini yang mengatur semua control menu dalam sistem.
Gambar 4.19 Tampilan menu data admin 2. Tampilan Halaman User
a) Home
Berikut output halaman utama user yang dihasilkan sistem :
Gambar 4.20 Tampilan menu homeuser
Halaman ini merupakan halaman yang pertama kali diakses oleh user setelah berhasil melakukan proses login. Pada halaman ini, pengguna akan ditampilkan halaman yang berisi sambutan dan profil user. Pada halaman ini juga sudah terdapat menu-menu pilihan sistem yang dapat diakses oleh pengguna.
b)Profil Mahasiswa
Halaman ini merupakan halaman yang berisi data profil user atau mahasiswa. Pada halaman ini, pengguna dapat melakukan edit profil diri serta merubah kombinasi password awal sesuai keinginan user. Berikut output profil mahasiswa yang dihasilkan sistem :
Gambar 4.21 Tampilan menu profil mahasiswa
c) Surat
Berikut output halaman surat yang dihasilkan sistem :
Halaman ini merupakan halaman yang berisi pilihan menu surat. Pada halaman ini, user dapat memilih berbagai macam menu surat sesuai kebutuhan user. Dalam halaman ini pengguna dapat melakukan pemilihan data surat yang diinginkan dan selanjutnya melakukan proses input data yang nantinya akan diolah oleh admin menjadi printout surat. Dalam menu ini pengguna juga dapat melihat status proses surat yang telah dikirim ke sistem.
3. Tampilan Responsive
Tampilan responsive ini hanya dapat diakses oleh user yang dalam hal ini adalah user mahasiswa dan tidak berlaku untuk admin. Tampilan responsive diindikasikan untuk para pengguna sistem surat menyurat yang mengakses sistem melalui media smartphone atau mobile. Tampilan responsive ini akan mengikuti kondisi layar mobile pengguna.
Berikut tampilan responsive sistem aplikasi penyuratan :
a) Tampilan homeresponsive
Gambar 4.23 Tampilan homeuserresponsive
Tampilan home responsive ini adalah halaman utama saat pengguna atau mahasiswa berhasil melakukan login pada sistem pembuatan surat menyurat menggunakan media web browser mobile pada device smartphone.
b) Tampilan profil mahasiswa responsive
Gambar 4.24 Tampilan profil mahasiswa responsive
Tampilan gambar diatas adalah tampilan data pribadi mahasiswa dengan menggunakan media selular yang menghasilkan tampilan web responsive.
c) Tampilan data surat responsive
Gambar 4.25 Tampilan data surat responsive
Tampilan gambar diatas adalah tampilan data menu pembuatan surat menyurat yang berhasil diakses melalui media smartphone sehingga tampilan data menu surat ini mengikuti layar device smartphone user.