BAB III PERANCANGAN SISTEM 3.1. Ruang Lingkup Website Berdasarkan kebutuhan dari pengguna, pembuatan website ini ditujukan kepada Mahasiswa FTI tekhusus untuk fungsionaris LK FTI dan mahasiswa diluar FTI yang membutuhkan sarana dalam memperoleh informasi tentang item barang yang dapat di pinjamkan serta harga peminjaman barang yang ada pada Lembaga Kemahasiswaan Fakultas Teknologi Informasi (LK FTI), terkhususnya dalam Bidang III departemen Inventaris. Berikut adalah daftar barang dan harga barang yang dapat di pinjam, berserta harga dan stok barang tersebut. Nama Barang Harga Sewa Sisa Stock tenda kapasitas 4 orang Rp. 28000 5 barang tenda kapasitas 2 orang Rp. 22000 4 barang sleeping bag Rp. 8000 3 barang Nesting Rp. 8000 2 barang Matras Rp. 4000 12 barang tas career Rp. 15000 1 barang Senter Rp. 4000 2 barang kompor gas Rp. 8000 3 barang Lcd Rp. 50000 2 barang palu siding Rp. 5000 1 barang Speaker Rp. 20000 2 barang jaring gawang Rp. 10000 2 barang Tabel 3. 1 Barang Departemen Inventaris 12
13 3.2. UML Activity Diagram UML Activity Diagram merupakan versi UML untuk sebuah flowchart. Activity diagram digunakan untuk menganalisa proses. Sebuah activity diagram bukan sebuah tool yang sempurna untuk menganalisis masalah dari sistem. Berikut adalah skema Activity Diagram sebagai alur penggunaan Sistem Informasi berbasis website Peminjaman barang inventaris. Gambar 3. 1 Gambar UML Activity Diagram
14 Di dalam Activity Diagram ini di jelaskan jalannya bagaimana alur user dalam menggunakan website dan melakukan peminjaman. Pertama-tama peminjam/user harus memilih apakah akan meminjam barang atau tidak, tidak tidak maka, peminjam hanya akan melihat website saja, kemudian keluar. Sedangkan jika iya maka akan mengisi form yang ada di website terlebih dahulu setelah menyetujui peminjaman tersebut, kemudian setelahnya dapat mengambil barang maksimal H-1 dari tanggal peminjaman. Lalu Admin akan mengelola data yang telah dikirmkan peminjam. Pada saat meminjam barang, admin akan meminta persyaratan yang harus dipenuhi, yang telah telah tertera pada website berupa Kartu Tanda Mahasiswa dan Mengisi surat peminjaman. Baru setelahnya barang akan dibawa dan dipinjam oleh peminjam. Jika terlambat mengembalikan maka akan dikenakan denda, dan jika barang rusak maka harus mengganti barang. 3.3. Squence Diagram Squence Diagram adalah diagram yang menggambarkan interaksi antara obyek dan mengindiksikan adanya komunikasi yang terjadi di antara obyek-obyek tersebut. Diagram ini juga mengambarkan bagaimana pesan diterima dan terkirimnya di antara obyek tersebut. 3.3.1. Sequence Diagram User Berikut ini adalah gambaran dari Sequence diagram yang dilakukan user pada saat melakukan interaksi dengan website peminjaman barang departemen inventaris
15 Gambar 3. 2 Gambar Squence Diagram User Pada gambar diatas di jelaskan bagaimana sistem dalam peminjam atau user melakukan mekanisme peminjaman barang. Langkah-langkah apa yang harus dijalankan. Pada bagian pertama peminjam yang akan mengakses halaman utama, mengirmkan data kemudian interface website muncul dan mengirmkan respon balik lalu menampilkan halaman awal atau halaman beranda kepada peminjam. Selanjutnya jika peminjam masuk ke halaman peminjaman barang, kemudian sistem akan menampilkan halaman form input, lalu jika sudah diisi maka akan ditampilkan dan memilih barang yang akan di pinjam dan tuliskan jumlah, selanjutnya jika menyetujui maka data akan dikirim ke database, setelah
16 menyimpan data, data akan di kirim kembali kemudian sistem akan menampilkan tulisan pada halaman website, bahwa datanya telah tersimpan, kemudian user tinggal kembali ke halaman peminjaman, atau keluar dari website. 3.3.2. Squence Diagram Login Admin Berikut ini adalah gambaran dari Sequence diagram yang dilakukan Admin pada saat akan login ke halaman Admin: Gambar 3. 3 Gambar Squence Diagram Login Admin Pada gambar diatas Aktor di sini adalah Administrator atau Admin memiliki akses untuk masuk ke halaman admin, sebelum masuk ke halaman admin, akan ada pemeriksaan user id dan password, setelah pengecekan terjadi, maka akan di kirim ke data base yang menampung user id dan password admin, baru jika berhasil baru akan di lanjutkan dengan
17 membuka menu utama, menu utama atau halaman utama akan merespon dan menampilkannya kembali ke admin, pada layar komputer. 3.4. Lembar Kerja Tampilan (LKT) Perancangan antarmuka Website Peminjaman Barang Inventaris digambarkan seperti ini : 3.4.1. Halaman Beranda Form ini digunakan untuk menampilkan keterangan mengenai website ini yakni milik Departemen Bidang III Inventaris Lembaga Kemahasiswaan Fakultas Teknologi Informasi Universitas Kristen Satya Wacana. Halaman Beranda : Gambar 3. 4 Gambar LKT Halaman Beranda
18 a. Pada Bagian halaman awal website ada beberapa bagian content, navigasi atau menu pada bagian kiri dan link serta footer di bagian bawah. b. Kemudian ada halaman link, yang menghubungkan ke website yang memiliki sangkut paut dengan Lembaga Kemahasiswaan. c. Bagian menu, memiliki beberapa bagian yaitu : - Beranda - Barang - Peminjaman - Peraturan - Tentang 3.4.2. Section Menu Bagian ini merupakan bagian dari halaman menu utama, dimana menjadi bagian navigasi untuk user. Gambar 3. 5 Gambar LKT Section Menu
19 Keterangan : a. Beranda = Merupakan menu yang menghubungkan ke halaman Home/ halaman awal yang memuat tentang tampilan gambar serta logo. b. Barang = berisi daftar isi tentang daftar peminjaman barang. c. Peminjaman = berisi halaman form untuk melakukan peminjaman barang. d. Peraturan = berisi tentang tata cara peminjaman barang. e. Tentang = berisi tentang informasi kontak. 3.4.3. Halaman Barang Pada halaman ini merupakan halaman untuk melihat stok barang, nama barang dan harga barang yang dapat di pinjam oleh user. Gambar 3. 6 Gambar LKT Halaman Barang
20 Keterangan : a. Berisi database yang langsung menampilkan daftar yang berisi daftar barang, yang terhubung dengan database sehingga langsung dapat berubah. 3.4.4. Halaman Peraturan Pada halaman ini, berisi text aturan peminjaman untuk peminjam. Gambar 3. 7 Gambar LKT Halaman Peraturan Keterangan : a. Halaman ini menampilkan tata tertib atau peratuan dalam peminjaman serta tata cara untuk dapat meminjam barang melalui website peminjaman barang inventaris. b. Untuk meminjam barang terdapat beberapa syarat juga seperti mengambil barang langsung di kantor Lembaga
21 Kemahasiswaan Fakultas Teknologi Informasi dan meninggalkan Kartu Tanda Mahasiswa. 3.4.5. Halaman Peminjaman Halaman ini berbentuk seperti form, untuk pengisian identitas dan barang, jumlah serta tanggal peminjaman barang. Gambar 3. 8 Gambar LKT Halaman Peminjaman Keterangan : a. Pada Halaman Order User diharuskan mengisi Data diri yakni beruapa nama dan nim, nim sendiri sebagai tanda bukti bahwa dia masih berstatus sebagai mahasiswa Universitas Kristen Satya Wacana terkhusus fakultas FTI. b. Alamat dan handphone sendiri berfungsi sebagai bukti infromasi yang memperjelas informasi user, sehingga ketika
22 terjadi hal yang tidak diinginkan ( kehilangan barang atau kerusakan), user dapat dihubungi. c. Kemudian ada bentuk tampilan yang sama seperti pada List, bedanya user tinggal menuliskan saja jumlah barang yang akan di pinjam pada satu row baris yang sama dengan barang yang akan dipinjam. d. Tanggal sendiri dibuat menjadi dua yakni tanggal peminjaman, untuk melakukan pembookingan dan pengembalian setelah melakukan peminjaman barang, sebagai range waktu pinjam barang. 3.4.6. Halaman Login Admin Pada Halaman Login Admin terdapat form untuk admin memasukan username dan password supaya dapat masuk ke halaman tersebut Gambar 3. 9 Gambar LKT Halaman Login Admin
23 Keterangan a. Terdapat Logo dibagian atas untuk memperjelas mengenai Bidang 3, terutama departemen inventaris yang berada di bawah Lembaga Kemahasiswaan. b. Username berisi nama (default) yang telah diatur dalam database, sehingga admin tidak bisa sembarangan memasukan nama. c. Password sendiri hanya admin yang dapat mengetahuinya, sehingga tidak ada orang lain yang dapat mengetahuinya. d. Tombol submit sendiri, mempunyai fungsi untuk mengirim perintah yang nantinya akan di proses di dalam database. e. Lalu setelahnya Admin dapat masuk ke dalam laman admin. 3.4.7. Halaman Beranda Admin Pada Halaman beranda terdapat menu pada bagin header dan navigasi pada bagian kiri, serta data peminjam di bagian kanan, berisikan user yang melakukan peminjaman barang. Gambar 3. 10 Gambar LKT Halaman Beranda Admin
24 Keterangan : a. Pada bagian Header, terdapat satu menu yakni untuk melogout akun admin atau keluar dari halaman Admin. b. Navigasi Menu sendiri berisikan menu untuk memantau data peminjam yang telah diiputkan oleh user pada website peminjaman inventaris Bidang III. c. Kemudian pada bagian isi terdiri dari penjelasan mengenai peraturan peminjaman, guna menyesuaikan dan mengingatkan Admin dalam tata cara peminjamannya. d. Dibawah penjelasan peraturan, terdapat data peminjam yang telah diinput oleh user, lalu akan di tamping ke dalam data base dan dimunculkan, sehingga admin dapat memantau data yang masuk dan akan dipinjamkan oleh departemen Inventaris. 3.5. Desain Database 3.5.1. Tabel barang ID I(3) Null Nama_barang TEXT No Jml_barang INT(100) No harga INT(100) No Tabel 3. 2 Tabel Barang Tabel Barang merupakan tabel yang digunakan untuk menampung barang-barang yang ada di departemen inventaris. Di dalam tabelnya sendiri, memiliki nama barang dan jumlah serta harag barang yang akan digunakan untuk menampung
25 barang-barang yang akan di pinjam oleh user dan di tampilkan pada halaman barang/list. 3.5.2. Tabel Detail Pinjam IDPINJAMAN Int(11) Null ID_BARANG Varchar(255) No JUMLAH Int(6) No Peminjam Int(11) No Tabel 3. 3 Tabel Detail Pinjam Tabel Detail Pinjaman sendiri sebagai penampung antara ID_Barang yang diambil dari tabel Barang dan Peminjam yang di ambil dari tabel Pinjam yang berisi data user. 3.5.3. Tabel Pinjaman NIM varchar (16) Null NAMA varchar(255) No EMAIL varchar(255) No ALAMAT varchar(1000) No HANDPHONE Varchar (64) No Tgl_pinjam Text No Tgl_kembali Text No ID_TRANSAKSI Int(16) No Tabel 3. 4 Tabel Pinjaman Tabel pinjaman sendiri, menampung data-data pribadi user yang telah diinputkan pada halaman peminjaman atau order. Dalam tabel ini juga terisi tanggal peminjaman dan pengembalian barang oleh user.
26 3.5.4. Tabel Login_Admin NAMA Text Null Password Varchar(10) No ID_Admin Varchar(7) No Tabel 3. 5 Tabel Login Admin Tabel Admin sendiri merupakan tabel untuk menampung id admin dan password admin untuk dapat login menuju laman admin yang dapat melihat peminjaman yang dilakukan user dalam laman web untuk admin.