11

Bab III

Perancangan Sistem

3.1 Pengumpulan Kebutuhan

Berdasarkan kebutuhan pengguna web ini digunakan untuk

memberikan kemudahan kepada petugas perpustakaan melakukan

operasional/tugas. Media perpustakaan ini juga memudahkan anggota

perpustakaan untuk meminjam buku dan membaca buku perpustakaan.

3.2 Ruang Lingkup Aplikasi/Sistem

web ini mempermudah anggota perpustakaan untuk meminjam buku

dan mempermudah petugas perpustakaan melakukan

operasional/tugas.

Fungsi

a. input – mempermudah anggota menginput data buku dan

peminjaman buku dalam kategori yang di inginkan.

b. melakukan transaksi peminjaman buku dengan mudah

c. mempermudah petugas perpustakaan mengelola

perpustakaan

Fitur

Admin

a. Memasukkan jumlah buku serta stok buku yang tersedia.

b. Mengedit buku yang baru di stok

c. Input data transaksi peminjaman buku

Petugas Perpustakaan

a. Menerima hasil laporan-laporan perpustakaan.

12

b. Input Pendaftaran anggota perpustakaan

c. Input data keterlambatan peminjaman buku

3.3 Konsep Perancangan Sistem

3.3.1 Gambaran Umum

Perancangan system ini dapat mempermudah petugas

perpustakaan untuk melakukan operasional/tugas, membantu

mengelola perpustakaan dan memudahkan anggota

perpustakaan untuk meminjam buku.

3.3.2 Pengguna Aplikasi

Perancangan system ini membantu proses pengembangan

website perpustakaan online dan mempermudah petugas

perpustakaan untuk melakukan tugas/operasional

Pengguna Hak Akses

Admin 1. Memasukkan,mengubah

menghapus,melihat data

anggota yang tersedia

2. Input Data Transaksi

Peminjaman Buku

3. Memasukkan stok buku

yang ada dan terbaru.

Petugas Perpustakaan 1. Menerima hasil laporan-

laporan data perpustakaan

2. Melihat daftar anggota

perpustakaan

13

3. Melihat dan mengubah data

transaksi keterlambatan

peminjaman buku

3.4 Perancangan Antar Muka Aplikasi

3.4.1 Storyboard

Berikut ini adalah perancangan sistem web

perpustakaan online

a. Lembar kerja tampilan awal

Gambar 3.1 Desain tampilan awal

Keterangan :

Menu awal: Pada tampilan awal terdapat tampilan

yang berisikan tampilan awal tentang web tersebut.

Header : Tampilan logo Perpustakaan,date,month,years,time

dan login

14

Body : Tampilan data pengunjung dan data pengunjung hari

iini

Footer : Tampilan data akumulasi pengunjung perpustakaan

b. Lembar kerja tampilan Login Perpustakaan

Gambar 3.2 Design tampilan Login

Keterangan :

- Di halaman login ini memuat input username dan

password.

- Memuat tombol login , yang berfungsi untuk konfirmasi

apakah data admin sama dengan yang ada dalam database

dan bila berhasil masuk ke menu utama admin.

15

c. Lembar kerja tampilan Dashboard Halaman Utama

Admin

Gambar 3.3 Design DashBoard Halaman Utama Admin

Keterangan :

Dashboard menampilkan beberapa sub menu dan menu menu

yang terdapat pada halaman utama admin

Menu : ada beberapa macam menu seperti dashboard , data

anggota , data buku , transaksi , data admin , laporan

Sub menu : menampilkan total anggota , buku , peminjaman

buku , dan pengunjung yang berada pada perpustakaan online

Menu pemberitahuan : menampilkan informasi keseluruhan

mengenai perpustakaan.

16

d. Lembar kerja tampilan Data Anggota

Gambar 3.4 Design Data Anggota Perpustakaan

Keterangan:

A. Menampilkan Table data anggota yang sudah terdaftar pada

perpustakaan

B. Tampilan ini berisi jumlah anggota yang terdaftar pada

perpustakaan

C. Berisi Form refresh anggota untuk update anggota yang baru

saja terdaftar menjadi anggota

D. Berisi tambah anggota untuk muncul ke halaman form tambah

anggota

17

e. Lembar kerja tampilan Tambah Anggota

Gambar 3.5 Design Data Tambah Anggota

Keterangan:

A. Berisi form pendaftaran yang tersedia untuk pendaftaran

menjadi anggota baru perpustakaan.

B. Tampilan beberapa textbox yang harus di isi calon

anggotauntuk melengkapi identitas diri.

18

f. Lembar kerja tampilan Data Buku

Gambar 3.6 Design Data Buku

Keterangan:

A. Menampilkan Table data buku yang sudah di tambahkan.

B. Tampilan ini berisi jumlah/stock buku yang berada di dalam

table data buku

C. Berisi Form refresh buku untuk update buku yang baru di

tambahkan , edit , hapus ke dalam table data buku

D. Berisi tambah buku untuk muncul ke halaman form tambah

buku

19

g. Lembar kerja tampilan Tambah Buku

Gambar 3.7 Design Tambah Buku

Keterangan:

A. Berisi form buku yang tersedia untuk menambahkan buku baru

kedalam rak buku

B. Tampilan beberapa textbox yang harus di isi admin untuk

melengkapi detail buku baru ke dalam rak buku.

20

h. Lembar kerja tampilan Data Transaksi Peminjaman

Gambar 3.8 Design Data Transaksi Peminjaman

Keterangan :

A. Menampilkan Table data nama peminjam buku , judul buku,

status peminjaman, tanggal peminjaman , tanggal kembali ,

dan keterlambatan

B. Tampilan ini berisi jumlah buku yang di pinjam oleh anggota

perpustakaan

C. Berisi Form refresh transaksi untuk update jumlah buku yang

sudah di update ke dalam table data

21

i. Lembar kerja tampilan Data Transaksi Pengembalian

Gambar 3.9 Design Data Transaksi Pengembalian

Keterangan :

A. Menampilkan Table data judul buku, peminjam, tanggal

pinjam , tanggal kembali , dan status pengembalian buku

B. Tampilan ini berisi jumlah buku yang di pinjam oleh anggota

perpustakaan

C. Berisi Form refresh transaksi untuk update jumlah

peminjaman buku yang sudah di update ke dalam table data

22

j. Lembar kerja tampilan Data Input Peminjam

Gambar 3.10 Design Data Input Peminjam

Keterangan :

A. Berisi form List Box judul buku dan nama peminjam yang sudah

terdaftar menjadi anggota untuk peminjaman buku

B. Tampilan beberapa textbox tanggal peminjaman dan tanggal

pengembalian buku yang di pinjam

C. Tampilan button kirim dan batal untuk mengkonfirmasi

peminjaman buku

23

3.4.2 Tampilan Jaringan Simantik

Penjelasan jaringan simantik ini adalah :

1 :admin bisa masuk data anggota yang sudah terdaftar ,

B(Data Buku), C( Data Transaksi), D(Input Transaksi)

kemudian setelah memilih buku maka admin input

peminjaman buku dengan data yang sudah terdaftar dan di

serahkan ke petugas perpustakaan.

24

3.5 Perancangan Proses Bisnis (UML, Komponen-komponen

class, class diagram)

3.5.1 Diagram Use Case

Gambar 3.11 Diagram Use Case Admin Dengan Petugas

Diagaram Use Case 3.11 menggambarkan kegiatan Transaksi

peminjaman buku perpustakaan yang berawal dari input data buku,

kemudian admin input data anggota yang belum terdaftar.Ketika

anggota sudah terdaftar menjadi anggota perpustakaan, admin dapat

menambah buku yang akan di pinjam. Setelah menambah buku sesuai

dengan keinginan anggota, kemudian admin memasukkan nama

anggota dan judul buku yang akan di pinjamkan. Setelah tervalidasi,

maka akan terlihat pada data transaksi peminjaman oleh anggota dan

admin.

25

Gambar 3.12 Diagram Use Case Admin

Gambar 3.12 menunjukan kegiatan apa saja yang bisa dilakukan oleh

Admin. admin dapat melihat data buku yang akan di tampilkan pada

halaman website admin juga dapat mengubah , menambahkan ,

menghapus buku, dan melihat data anggota yang sudah terdaftar

menjadi anggota perpustakaan, kemudian melakukan input data

transaksi peminjaman, dan kemudian mencetak laporan seluruh data

transaksi peminjaman , data buku , data anggota , dan data

pengembalian buku.

26

Gambar 3.13 Diagram Use Case Petugas

Gambar 3.13 menunjukan kegiatan apa saja yang bisa dilakukan oleh

Petugas. Petugas memeriksa data laporan keseluruhan perpustakaan

yang di berikan oleh admin. Petugas juga mencatat keterlambatan

pengembalian buku dan denda.

27

3.5.2 Class Diagram

Diagram Class menjelaskan atribute serta proses apa saja yang

dilakukan ketika menjalankan suatu perintah baik pengambilan

maupun pengolahan data

Gambar 3.14 Diagram Class

Berdasarakan gambar 3.14 ketika anggota ingin meminjam buku maka

anggota akan melihat buku apa saja yang ada pada rak buku.

Peminjaman buku oleh anggota dibatasi, Sistem peminjaman dilakukan

secara online, apabila anggota belum melakukan registrasi ke

anggotaan maka buku tidak dapat di pinjam. Admin perpustakaan

hanya perlu mengolah data transaksi peminjaman, , dan juga data

anggota. admin dapat melakukan menambahkan stock buku baru yang

akan di pinjamkan oleh anggota. Kemudian admin dapat mengolah

28

data anggota dan memvalidasi status peminjaman buku yang telah

selesai atau masih dalam proses peminjaman.

Dalam setiap transaksi peminjaman yang terjadi, sistem akan

memberikan keterangan laporan mengenai identitas anggota, detail

judul buku yang sudah dimasukan kedalam sistem oleh petugas

perpustakaan.

3.5.3 Diagram Activity

Gambar 3. 15 Diagram Activity data Buku

29

Gambar 3.15 menjelaskan mengenai aktivitas admin dalam proses

manipulasi data yang didalam nya terdapat proses insert buku, update

buku , dan delete buku.

Gambar 3. 16 Diagram Activity data Anggota

Gambar 3.16 menjelaskan mengenai aktivitas admin dalam proses

memanipulasi data yang didalam nya terdapat proses insert anggota , update

anggota , dan delete anggota.

30

Gambar 3. 17 Diagram Activity Transaksi Peminjaman

Gambar 3.17 menjelaskan mengenai aktivitas admin dalam proses transaksi

data kemudian sistem akan memproses data transaksi, jika mendapatkan

denda akan menampilkan denda , jika tidak dapat denda akan diproses oleh

sistem.

31

Gambar 3. 18 Diagram Activity Laporan

Gambar 3.18 menjelaskan mengenai aktivitas admin dalam proses cetak

laporan yang berupa data laporan anggota , laporan admin , laporan

pengembalian buku , dan laporan peminjaman buku.

32

3.6 Pemodelan Penyimpanan Data

Tabel-tabel yang di gunakan dalam perancangan sistem informasi

perpustakaan berbasis web adalah sebagai berikut :

3.6.1 Tabel login admin

Keterangan :

Tabel login digunakan untuk menyimpan data admin yang akan

digunakan untuk masuk ke dalam sistem login dan masuk ke dalam

dashboard admin.

3.6.2 Tabel data anggota

Keterangan :

Tabel anggota adalah yang digunakan untuk menyimpan semua data

anggota dari pendaftaran anggota baru perpustakaan untuk

33

3.6.3 Tabel data buku

Keterangan :

Tabel Data Buku Tabel yang digunakan untuk menunjukkan rak buku

yang menampung buku-buku yang tersedia dan terbaru pada

perpustakaan yang akan dipinjam oleh anggota.

3.6.4 Tabel pengunjung

Keterangan :

Tabel pengunjung merupakan tabel untuk menampung data pengunjung

yang di dapat dari input data pengunjung perpustakaan dan menyimpan

data pengunjung yang akan digunakan untuk melihat data akumulasi

34

pengunjung yang mengunjungi perpustakaan pada tampilan awal

website.

3.6.5 Tabel trans pinjam

Keterangan :

Tabel trans pinjam merupakan tabel untuk menampung data transaksi

peminjaman buku , pengembalian , dan denda keterlambatan peminjaman

yang di hasilkan dari input peminjaman buku .

3.7 Struktur DataBase

Gambar 3.7 Relasi Struktur Database web

35

Gambar 3.19 Relasi Struktur Database web

Database digunakan untuk menyimpan data, dalam aplikasi web sistem

informasi penjualan kuningan dan handcraft berbasis PHP responsif

adaptif Serta multi platform ini memiliki 5 (lima) tabel yakni tabel

pengunjung, data_anggota, admin,data buku,trans_pinjam.

Tabel pengunjung digunakan untuk menyimpan data pengunjung yang

akan digunakan untuk melihat data akumulasi pengunjung yang

mengunjungi perpustakaan pada tampilan awal website.

36

Gambar 3. 20 Struktur Tabel user

Tabel data_anggota adalah tabel yang digunakan untuk menyimpan semua

data anggota dari pendaftaran anggota baru perpustakaan.

Gambar 3. 21 Struktur Tabel anggota

37

Tabel admin digunakan untuk menyimpan data admin yang akan

digunakan untuk masuk ke dalam sistem login yang diberikan. Dalam

akun admin nantinya admin dapat melakukan updating mengenai data

buku , anggota , dan transaksi peminjaman buku,

Gambar 3.22 Struktur Tabel admin

Gambar 3. 23 Struktur Tabel data_buku

38

Gambar 3.23 adalah Tabel yang digunakan untuk menunjukkan rak

yang menampung buku-buku yang akan dipinjam oleh anggota

Gambar 3. 24 Struktur tabel trans_pinjam

Gambar 3.24 adalah tabel yang digunakan untuk menunjukkan data

peminjam yang menampung buku-buku yang akan dipinjam oleh anggota.

Tabel trans_pinjam juga mengambil data pada tabel buku dan tabel anggota

untuk mengambil buku dan nama anggota yang merupakan data transaksi

dan akan disimpan oleh sistem.