BAB IV

PERANCANGAN SISTEM

4.1 Analisa

Analisa permasalahan merupakan suatu analisis yang terdiri dari suatu

system informasi dengan maksud untuk mengevaluasi permasalahan-
permasalahan, kesempatan, hambatan, dan kebutuhan yang di harapkan sehingga
dapat diusulkan perbaikan-perbaikannya. Langkah-langkah yang harus ditempuh
dalam analisis system yaitu: mengindefikasi masalah, memahami system kerja
yang ada, menganalisa system.
Permasalahan yang ditemukan penulis selama melakukan kegiatan praktek
kerja lapangan pada SD Muhammadiyah 2 Kupang adalah perpustakaan sekolah
membutuhkan suatu sistem yang untuk mengumpulkan, mengolah, menyimpan
dan melihat kembali seluruh data yang ada dan juga menyalurkan informasi untuk
masyarakat mengenai kualitas SDN Muhammadiyah 2 Kupang. Perpustakaan
juga membutuhkan sistem sirkulasi simpan pinjam buku untuk memudahkan
petugas perpustakaan mencatat kegiatan simpan pinjam yang ada
4.2 Definisi Kebutuhan Pemakai
Perpustakaan berbasis web pada SDN Muhammadiyah 2 Kupang
diharapkan bisa membantu masalah yang dihadapi oleh petugas perpustakaan dan
siswa seperti seperti mengolah data buku, mendata pengunjung perpustakaan,
mengolah data peminjaman dan pengembalian buku.
4.3 Alat dan Bahan

Bahan dan alat adalah sarana-sarana yang sangat dibutukan agar dapat
membuat aplikasi ini. Berikut akan dibahas secara khusus tentang bahan dan alat
yang digunakan.
4.3.1 Alat

Dalam membuat aplikasi ini, penulis membutuhkan perangkat keras

(hardware) dan perangkat lunak (software) sebagai berikut:
1. Sistem operasi windows 10
 2. Acer Pentium(R) Dual-Core CPU T4200 2.00GHz
3. DDR3 2048 MB
4. Hardisk 3.00 GB
5. XAMPP
6. Web editor visual studio code
7. Microsoft Office Word 2010
8. Microsoft Visio 2010
9. Aplikasi web browser google crome
4.3.2 Bahan

Dalam penyusunan laporan praktek kerja lapangan tugas akhir ini penulis
mengambil data berbagai sumber yang berkaitan dengan judul dan data yang
didapatkan secara langsung melalui wawancara dan pengumpulan data tertulis
(dokumen) pada tempat penelitian pada SD Muhammadiyah 2 Kupang.
4.4 Usulan Pemecahan Masalah
Pada bagian ini akan dijelaskan system yang akan diusulkan dan
diterapkan (Alur Dokumen, Diagram Konteks, HIPO, DFD Level, Desain input
dan output).
4.4.1 Alur Diagram

Alur dokumen juga disebut flowchart dokumen merupakan bagan yan

menunjukkan arus dokumen dalam formulir atau menggambarkan prosedur
didalam system. Flowchart dokumen menunjukan alur didalam program atau
prosedur system secara logika. Bagan alur ini menggunakan simbol-simbol yang
sama dengan yang digunakan dalam bagan alur system.
4.4.2 Usecase diagram
Usecase diagram merupakan diagram yang menggambarkan hubungan
antara aktor dengan sistem. Use case diagram bisa mendeskripsikan sebuah
interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat. Use case
diagram juga bisa digunakan untuk mengetahui fungsi apa saja yang ada di dalam
sebuah sistem dan bisa juga mempresentasikan sebuah interaksi aktor dengan
sistem. Komponen tersebut kemudian menjelaskan komunikasi antara
aktor, dengan sistem yang ada. Dengan demikian, use case dapat dipresentasikan
dengan urutan yang sederhana, dan akan mudah dipahami oleh para
konsumen. Manfaat dari use case sendiri adalah untuk memudahkan komunikasi
dengan menggunakan domain expert dan juga end user, memberikan kepastian
pemahaman yang pas tentang requirement atau juga kebutuhan sebuah sistem.

Use case diagram sendiri juga mempunyai fungsi serta manfat yang baik
untuk para pembuat dan juga para konsumen. Antara lain memperlihatkan urutan
aktivitas proses yang ada pada sistem. sedangkan manfaat dari use case sendiri
adalah untuk memudahkan komunikasi dengan menggunakan domain expert dan
juga end user, adanya interface yang harus dimiliki oleh sebuah sistem,
memberikan kepastian pemahaman yang tentang requerement atau juga kebutuhan
sebuah sistem

1. usecase diagram login

Gambar 4. Usecase diagram login

Tabel 2. Deskripsi usecase diagram login

Usecase name login

Requirements B1
Goal 1. User dapat melakukan login ke dalam
halaman user
2. Admin dapat melakukan login ke
dalam halaman admin
Pre-Conditions User telah login
 Post-Conditions Sistem melakukan pengecekan user ID
dan password
Failed end Condition User dan admin gagal melakukan login

Primary Actors User dan admin

Main Flow / Basic Path 4 User dan admin mengetikkan user ID
1. User dan admin mengetikkan
password
2. User dan admin meng-klik tombol
login
Invariant A 1. User masuk ke dalam halaman user
[Link] masuk ke dalam halaman admin

2. Usecase diagram admin login

Gambar 4. Usecase diagram admin login

Tabel 3. Deskripsi usecase diagram admin login

Use case name Admin login

Requirements B1
Admin dapat melakukan login ke
dalam halam admin
Pre-Conditions Terhubung dengan server
Post-Conditions Admin dapat login
Failed end Condition Gagal login
Primary Actors Petugas perpustakaan
Main Flow / Basic Path 1. Masuk ke halaman admin
login
2. Input username dan password
3. Klik login
4. Logout
 Invariant B 1. Admin memilih logout
2. Keluar dari sistem
3. Admin melakukan login
kembali

3. Use Case Diagram Data Anggota

Gambar 5. Use Case Diagram Data Anggota

Tabel 4. Deskripsi Use Case Diagram Data Buku

Use Case Name Data Anggota

Requirements B2
Admin dapat menambah, mengubah, mencari dan
Goal menghapus data anggota
Pre-Conditions User dan admin telah login dan berada pada
halaman data anggota
Post-Conditions Data anggota berubah, tersimpan atau dihapus
oleh admin
Failed end Conditions Gagal diubah, disimpan atau dihapus
Primary Actors User dan Admin
Main Flow / Basic Path [Link] melihat data anggota
[Link] melakukan pencarian anggota
3. Admin menambah anggota
Alternative Flow / 2.a Admin mengubah data anggota
Invariant 1
Invariant 2 2.b Admin menghapus data anggota

4. Use Case Diagram Data Peminjaman

 Gambar 6. Use Case Diagram Data Peminjam

Tabel 5. Deskripsi Use Case Diagram Data Peminjam

Use Case Name Data Peminjaman

Requirements A3, B4
Goal [Link] dapat menambah, merubah dan
menghapus transaksi peminjaman
[Link] dapat melihat transaksi peminjaman
Pre-Conditions User dan admin telah login dan berada pada
halaman peminjaman
Post-Conditions Transaksi peminjaman diubah, disimpan atau
dihapus
Failed end Conditions
Gagal diubah, tersimpan atau terhapus
Primary Actors User dan admin
Main Flow / Basic Path
1. User dan admin melihat transaksi peminjam
2. Admin menambah transaksi peminjaman
3. Admin merubah transaksi peminjaman
4. Admin menyimpan transaksi peminjaman
5. Admin mencetak transaksi peminjaman

Alternative Flow / Admin merubah transaksi peminjaman

Invariant 1
Invariant 2 Admin menghapus transaksi peminjaman

5. Use Case Diagram Data Pengembalian

 Gambar 7. Use Case Diagram Data Pengembalian

Tabel 6. Deskripsi Use Case Diagram Data pengembalian

Use Case Name Data Pengembalian
Requirements A3, B5
Admin dapat menambah,
Goal 1. merubah
dan menghapus transaksi
Pengembalian
2. User dapat melihat transaksi
Pengembalian
Pre-Conditions User dan admin telah login dan berada
pada halaman pengembalian
Post-Conditions Transaksi pengembalian diubah,
disimpan atau dihapus
Failed end Conditions Gagal diubah, tersimpan atau terhapus
Primary Actors User dan admin
User dan admin melihat
Main Flow / Basic Path 3. transaksi
Pengembalian
4. User dan admin menyimpan
transaksi pengembalian
[Link] merubah transaksi
Pengembalian
[Link] mencetak transaksi
Pengembalian
Alternative Flow / Invariant 1 1.a Admin merubah transaksi
Pengembalian

7. Use Case Diagram Data Laporan

 Gambar 8. Use Case Diagram Data laporan

Tabel 7. Deskripsi Use Case Diagram Data laporan

Use Case Name Data Laporan
Requirements B6
Goal 1. User dapat melihat laporan
peminjaman dan pengembalian
buku
2. Admin dapat membuat laporan
data buku, data anggota, data
peminjaman dan data
pengembalian
User dan admin telah login dan berada
Pre-Conditions pada halaman data laporan
Post-Conditions Laporan terbaru
Failed end Conditions Gagal membuat laporan
Primary Actors User dan admin
1. Admin melihat laporan data anggota
2. User dan admin melihat laporan data
buku
3. User dan admin melihat laporan data
peminjaman
4. User dan admin melihat laporan data
Main Flow / Basic Path pengembalian

5. Use Case Diagram Menu Pengaturan

 Gambar 9. Use Case Diagram Menu Pengaturan

Tabel 8. Deskripsi Use Case Diagram Menu Pengaturan

Use Case Name Menu Pengaturan
Requirements B8
Goal Admin dapat merubah lama hari
peminjaman
dan denda keterlambatan pengembalian
buku
Pre-Conditions Admin telah login dan berada pada halaman
Pengaturan
Post-Conditions Pengaturan terupdate
Failed end Conditions Gagal memperbarui pengaturan
Primary Actors User dan admin
Main Flow / Basic Path 1. Admin merubah lama waktu peminjaman
2. Admin merubah besar denda
keterlambatan perhari

6. Use Case Diagram Data Petugas

Gambar 10. Use Case Diagram Data Petugas

Tabel 9. Deskripsi Use Case Diagram Data Petugas

Use Case Name Data Petugas
Requirements B7
Goal Admin dapat merubah data petugas
Perpustakaan
 Pre-Conditions Admin telah login dan berada pada
halaman data petugas
Post-Conditions Data petugas terupdate
Failed end Conditions Gagal memperbarui data petugas
Primary Actors Admin
Main Flow / Basic Path Admin merubah data petugas

7. Use Case Diagram Halaman Beranda

Gambar 11. Use Case Diagram Halaman Beranda

Tabel 10. Deskripsi Use Case Diagram Halaman Beranda

Use Case Name Beranda
Requirements A1
Goal [Link] dapat mengakses data buku, data
peminjaman dan data pengembalian
2. Admin dapat mengakses data anggota, data
buku, data peminjaman, data petugas
pengaturan dan ganti password

Pre-Conditions User dan admin telah login

Post-Conditions -
[Link] gagal mengakses data buku, data
peminjaman dan data pengembalian
2. Admin gagal mengakses data anggota, data
buku, transaksi peminjaman, transaksi
pengembalian, laporan, pengaturan dan
ganti password

Primary Actors User dan admin

4.4.3 Activity Diagram
berikut ini yang merupakan gambaran dari activity diagram dari perpustakaan SD

Muhammadiyah 2 Kupang

1. Activity Diagram Admin Mengelola Data Anggota

Gambar 12. Activity Diagram Admin Mengelola Data Anggota

2. Activity Diagram Admin Mengelola Data Buku

Gambar.13 Activity Diagram Admin Mengelola Data Buku

3. Activity Diagram Admin Mengelola Data Peminjaman
 Gambar. 13 Activity Diagram Admin Mengelola Data Peminjaman

4. Activity Diagram Admin Mengelola Data Pengembalian

Gambar.14 Activity Diagram Admin Mengelola Data Pengembalian

5. Activity Diagram Admin Mengelola Data Laporan
 Gambar 15. Activity Diagram Admin Mengelola Data Laporan

4.4.4 Desain
1. Database
Di dalam database terdapat beberapa tabel yang saling berelasi (berhubungan)
maka dari itu penulis mencoba menggambarkannya dengan menggunakan ERD.
Database yang digunakan dalam aplikasi perpustakaan ini adalah Database
MySQL server versi [Link]. struktur database dan tabel yang dibuat adalah
sebagai berikut :
Nama Database : db_perpus
Jumlah tabel : MySQL Server [Link]
Tabel Engine : InnoDB
Character Set : UTF-8

Entity Relationship Diagram (ERD)

Gambar. 16 Entity Relationship Diagram (ERD) Perpustakaan SD Muhammadiyah2

Kupang

2. Logical Record Structure (LRS)

Gambar 17. Logical Record Structure (LRS) Perpustakaan SD Muhammadiyah 2
Kupang

3. Spesifikasi File
Spesifikasi File Tabel Buku

Nama Database : db__perpust

Nama File : t_buku
Akronim : buku
Tipe File : File Master
Akses File : Random
Panjang Record : 1182 Byte
Kunci Field : id_buku
Tabel. 11 Spesifikasi File Tabel Buku
No. Elemen Data Nama Field Tipe Size Ket.

1. Id Buku Id_ Buku Int 6 Primary key

2. Id Kelas Id_Kelas Varchar 6
3. Id Jenis Id_Jenis Int 2
4. Judul Judul Varchar 250
5. Pengarang Pengarang Varchar 250
6 Penerbit Penerbit Varchar 250
7. Tahun Terbit th_terbit Year 4
8. ISBN Isbn Varchar 50
9. Jumlah Halaman jml_hal Int 6
10. Asal Perolehan Asal_Perolehan Varchar 100
11. Harga Harga Decimal 12,2
12. Id Lokasi Id_lokasi Int 2
13. Start Enum -
14. Start Pinjam Enum -
15. Deskripsi Varchar 250
16. Tanggal Input Datetime -

4. Spesifikasi File Tabel Anggota

Nama Database : db_perpus
Nama File : t_anggota
Akronim : anggota
Tipe File : File Master
Akses File : Random
Panjang Record : 466 Byte
Kunci Field : id_anggota

Tabel. 12 Spesifikasi File Tabel Anggota

No Element Data Nama Field Tipe Size Ket

.
1. Id Anggota id_anggota Int 6 Primary Key
2. Nama Nama Varchar 100
3. Jenis Kelamin jk Varchar 100
4. Agama Agama enum -
5. Alamat Alamat enum -
6. Tempat Lahir tmp_lahir Varchar 100
7. Tanggal Lahir tgl_lahir Date -
8. Foto Foto Varchar 100
9 Username Username Varchar 30
10. Password Password Varchar 30
11. Tanggal Daftar Tanggal Daftar Date -
12. Jenis Jenis Enum -

5. Spesifikasi File Tabel Transaksi

Nama Database : db_perpus

Nama File : t_anggota
Akronim : anggota
Tipe File : File Master
Akses File : Random
Panjang Record : 466 Byte
Kunci Field : id_anggota
Tabel IV. 13 Spesifikasi File Tabel Transaksi

No Elemen Data Nama Field Tipe Size Ket.

.
1. Id Transaksi id_trans Int 6 Primary Key
2. Id Buku id_buku Int 6
3. Id Anggota id_anggota Int 6
4. Tanggal Pinjam tgl_pinjam Date -
5. Tanggal Kembali tgl_kembali Date -
6. Start Start Enum -
7. Keterangan Ket Varchar 100
8. Telat Int 2
9. Denda Decimal 10, 2

6. Spesifikasi File Tabel Kelas

Nama Database : db_perpus

Nama File : r_kelas
Akronim : Kelas
Tipe File : File Master
Akses File : Random
Panjang Record : 204 Byte
Kunci Field : id_kelas

Tabel. 14 Spesifikasi File Tabel Kelas

No Elemen Data Nama Field Tipe Size Ket.
.
1. Id Lokasi id_lokasi Int 4 Primary Key
2. nama Nama Varchar 200

7. Spesifikasi File Tabel Jenis

Nama Database : db_perpus
Nama File : r_jenis
Akronim : jenis
Tipe File : File Master
Akses File : Random
Panjang Record : 104Byte
Kunci Field : id_jenis

Tabe 15. Spesifikasi File Tabel Jenis

No Elemen Data Nama Field Tipe Size Ket.

Id Jenis id_jenis Int 4 PrimaryKey

Nama nama Varchar 100

8. Spesifikasi File Tabel Lokasi

Nama Database : db_perpus
Nama File : r_lokasi
Akronim : lokasi
Tipe File : File Master
Akses File : Random
Panjang Record : 204 Byte
Kunci Field : id_lokasi

Tabel. 16 Spesifikasi File Tabel Lokasi

No. Elemen Data Nama Field Tipe Size Ket.
Id Lokasi id_lokasi Int 4 PrimaryKey
Nama nama Varchar 100

9. Deployment Diagram
Gambar. 18 Component Diagram Application Sistem Perpustakaan Berbasis WEB

Gambar. 19 Deployment Diagram Application Sistem Perpustakaan Berbasis WEB

4.4.5 Perancangan Input Dan Output

1. Rancang login

Berdasarkan rancangan login pada gambar 20 maka dapat dijelaskan bahwa

rancangan login merupakan tahap untuk masuk ke menu utama admin. Dalam

login pemakai username dan password harus dimasukan dengan benar untuk

masuk ke halaman admin. Jika username atau password tidak dimasukan denfan

benar maka user tidak dapat masuk ke dalam halaman admin.

 Gambar. 20 halaman login

2. Rancangan Halaman admin

Berdasarkan rancangan halaman admin pada gambar 21 maka dapat
dijelaskan bahwa rancanagn halaman admin merupakan tahap untuk masuk dan
berhubungan langsung dengan sistem informasi yang telah tersedia untuk
melakukan pengolahan data pada sistem rancangan halaman admin ini terdiri dari
anggota, simpanan investasi, simpanan duka, santunan duka, pengambilan dan
laporan.

Gamba
r. 21 halaman profil

3. Rancangan Data Anggota

Berdasarkan rancangan data anggota pada gambar 22 maka dapat dijelaskan
bahwa rancangan data anggota digunakan untuk menambah data anggota. Jika
data yang dimasukkan benar maka akan tersimpan ke dalam database dan juga
tabel anggota

Ga
mbar. 22 halaman anggota
4. Rancang Data Buku
Berdasarkan rancang bangun data buku pada gambar 23 maka dapat
dijelaskan baha rancangan data buku untuk menambahkan data buku, jika data
yang dimasukan benar maka akan tersimpan di database dan juga table buku.

Gambar. 23 Halaman Buku

5. Rancang Data Admin

Berdasarkan rancang bangun data Admin pada gambar 24 maka dapat
dijelaskan baha rancangan data Admin untuk menambahkan data Admin, jika data
yang dimasukan benar maka akan tersimpan di database dan juga table admin.

Ga
mbar. 24 Halaman Admin
6. Rancang Data Kategori Buku
Berdasarkan rancang bangun data Kategori buku pada gambar 24 maka dapat
dijelaskan baha rancangan data kategori buku untuk menambahkan data kategori,
jika data yang dimasukan benar maka akan tersimpan di database dan juga table
kategori.

Gambar. 25 Halaman Kategori Buku

7. Rancang Data Kelas

 Berdasarkan rancang bangun data kelas pada gambar 24 maka dapat
dijelaskan baha rancangan data kelas untuk menambahkan data kelas, jika data
yang dimasukan benar maka akan tersimpan di database dan juga table kelas.

Gambar. 26 Halaman Kelas

8. Rancang Data Transaksi

Berdasarkan rancang bangun data transaksi pada gambar 24 maka dapat
dijelaskan baha rancangan data transaksi untuk menambahkan data transaksi, jika
data yang dimasukan benar maka akan tersimpan di database dan juga table
transaksi.

Ga
 mbar. 27 Halaman Transaksi
9. Rancangan halaman beranda
Halaman beranda atau utama ini merupakan halaman yang pertama kali akan
muncul ketika pengguna memasukkan alamat website PROJAKOP. Halaman
utama ini terdiri dari beberapa menu utama yaitu profil, anggota dan admin

Gambar. 27 Halaman Transaksi

10. Setelah pengguna memilih menu tentang kami dari menu utama, maka
selanjutnya akan muncul halaman tentang kami.
 Gambar. 28 Halaman Tentang Kami
11. Setelah pengguna memilih menu galleri dari menu utama, maka selanjutnya
akan muncul halaman galleri yang berisikan foto guru dan siswa SD
Muhamadiyah 2 Kupang.

Gambar. 29 Halaman galleri

12. Setelah pengguna memilih menu kontak dari menu utama, maka selanjutnya
akan muncul halaman kontak yang berisikan nomor telepon, email, kepala
sekolah SD Muhammadiyah 2 Kupang.
Gambar. 30 Halaman kontak