BAB IV PERANCANGAN SISTEM
4.1 Perancangan 4.1.1
Arsitektur Sistem
Gambar 4.1 Arsitektur Sistem
Gambar 4.2 Arsitektur Deteksi Kemiripan Judul Buku
83
84
Arsitektur sistem e-library dapat dilihat pada gambar 4.1. Pada tersebut, dapat dilihat pengguna terbagi kedalam tiga bagian, yaitu publik, anggota, dan administrator. Masing-masing memiliki hak akses yang berbeda sesuai dengan tingkatnya. Sedangkan gambar 4.2 adalah arsitekur dari deteksi kemiripan judul buku.
4.1.2
Class Diagram Class diagram memperlihatkan kelas, antarmuka, kolaborasi, dan relasi.
Diagram ini menggambarkan interaksi antar kelas. class class diagram
m_file ckomentar + + + + + +
__construct() : void index() : void delete_komentar() : void cari() : void view_komen() : void add_komentar() : void
m_komentar -
id_komentar: int id_upload: int id_user: int isi_komen: text tgl_komen: date jam_komen: time
+ + + + + +
tampil_komentar() : void delete_komentar() : void cari_komentar() : void show_komentar() : void add_komentar() : void total_komen() : void
-
id_upload: int id_user: int id_kategori: int judul_file: varchar gambar: text nim_mhs: int penulis: varchar id_tahun: int deskripsi: text tgl_upload: date publish: varchar total_file: int
+ + + + + + + + + + + + + + + + + +
tampil_file() : void tambah_file() : void ubah_file() : void select_file() : void hapus_file() : void cari_file() : void detail_file() : void upload_file() : void delete_file() : void tampil_data_upload() : void tampil_upload_where() : void jumlah_file() : void select_where() : void daftar_file_baru() : void daftar_ebook_baru() : void cari_buku() : void tampil_user_file() : void ubah_userfile() : void
m_user cfile + + + + + + + + + + + + + + + +
__construct() : void index() : void add_file() : void edit_file() : void delete_file() : void detail_file() : void upload_file() : void hapus_file() : void download_file() : void cari() : void user_file() : void edit_userfile() : void delete_userfile() : void detail_userfile() : void upload_userfile() : void hapus_userfile() : void
cuser + + + + + + + + + + +
__consrtuct() : void index() : void add_user() : void edit_user() : void delete_user() : void cari() : void register() : void reg_sukses() : void reg_gagal() : void aktivasi() : void user_profile() : void
-
id_user: int email_user: varchar password: varchar nama_user: varchar almt_user: varchar kota_user: varchar institusi_user: varchar job_user: varchar hak_akses: varchar tgl_gabung: date kode_aktivasi: varchar aktif: varchar
+ + + + + + + + + + + +
tampil_user() : void tambah_user() : void select_user() : void ubah_user() : void hapus_user() : void cek_email() : void tampil_data_user() : void cari_user() : void reg_user() : void aktivasi_user() : void get_userdata() : void ubah_userprofile() : void
ckategori + + + + + +
__construct() : void index() : void add_kategori() : void edit_kategori() : void delete_kategori() : void cari() : void
ctahun
m_tahun m_kategori -
id_kategori: int nama_kategori: varchar
+ + + + + + + + +
tampil_kategori() : void tambah_kategori() : void select_kategori() : void ubah_kategori() : void hapus_kategori() : void tampil_kategori_by_id() : void daftar_kategori() : void detail_kategori() : void cari() : void
-
id_tahun: int tahun: int
+ + + + + + + + + +
__construct() : void tampil_tahun() : void tambah_tahun() : void select_tahun() : void ubah_tahun() : void hapus_tahun() : void tampil_data_tahun() : void select_where_thn() : void detail_tahun() : void cari_thn() : void
+ + + + + +
__construct() : void index() : void add_tahun() : void edit_tahun() : void delete_tahun() : void cari() : void
Gambar 4.3 Class Diagram E-Library Diagram kelas pada gambar 4.3 menggambarkan keterkaitan antar kelas yang ada pada model dan contoller. Kelas yang ada pada model terdiri dari
85
m_user, m_kategori, m_tahun, m_file, dan m_komentar. Sedangkan kelas yang ada pada controller terdiri dari cuser, ckategori, ctahun, cfile, dan ckomentar. Model menjelaskan atribut-atribut pada database beserta metode untuk memanipulasi database. Sedangkan controller menjelaskan kelas dalam mengontrol aliran model dan view.
4.1.3
Sequence Diagram Diagram sequence (urutan) adalah diagram interaksi yang menekankan
pada pengiriman pesan dalam waktu tertentu. Diagram ini menggambarkan alur kerja dari fungsi-fungsi dalam sistem dengan use-case dimana di dalamnya terdapat aktor. sd login
guest
index
login
m_login
index()
do_login()
cekdb()
return()
Gambar 4.4 Sequence Diagram Login
86
sd registrasi user
guest
index
cuser
m_user
index()
register()
reg_user()
return()
Gambar 4.5 Sequence Diagram Registrasi Anggota
sd manage kategori
admin
index
ckategori
m_kategori
index()
view_kategori()
tampil_kategori()
return()
array()
add_kategori()
tambah_kategori()
return()
array()
edit_kategori()
ubah_kategori()
return()
array()
delete_kategori()
hapus_kategori()
return()
array()
Gambar 4.6 Sequence Diagram Manage Kategori
87
sd manage tahun
admin
index
ctahun
m_tahun
index()
view_tahun()
tampil_tahun()
return()
array()
add_tahun()
tambah_tahun()
return()
array()
edit_tahun()
ubah_tahun()
return()
array()
delete_tahun()
hapus_tahun()
return()
array()
Gambar 4.7 Sequence Diagram Manage Tahun
88
sd manage user
admin
index
cuser
m_user
index()
view_kategori()
tampil_user()
return() array()
add_user() tambah_user()
return() array()
edit_user()
ubah_user()
return()
array()
delete_user()
hapus_user()
return()
array()
Gambar 4.8 Sequence Diagram Manage User
89
sd manage file
admin/anggota
index
cfile
m_file
m_user
m_kategori
index()
view_file()
tampil_file()
return()
tampil_user()
return()
tampil_kategori()
return()
tampil_tahun()
return()
array()
add_file()
tampil_user()
return()
tampil_kategori()
return()
tampil_tahun()
return()
tambah_file()
return()
array()
edit_file()
ubah_file()
return()
array()
delete_file()
hapus_file()
return()
array()
upload_file()
tampil_user()
return()
upload_file()
return()
array()
download_file()
array()
Gambar 4.9 Sequence Diagram Manage File
m_tahun
90
sd manage komentar
admin
index
ckomentar
m_komentar
m_file
index()
view_komentar()
tampil_komentar()
return()
tampil_file()
return()
array()
delete_komentar()
delete_komentar()
return()
array()
Gambar 4.10 Sequence Diagram Manage Komentar
sd tambah komentar
admin/anggota
index
ckomentar
m_komentar
index()
add_komentar()
add_komentar()
return()
array()
Gambar 4.11 Sequence Diagram Tambah Komentar
91
sd ubah profil
anggota
index
cuser
m_user
index()
user_profile()
ubah_userprofile()
return()
array()
Gambar 4.12 Sequence Diagram Ubah Profil
4.1.4
Perancangan Database
1. Diagram Skema
Gambar 4.13 Diagram Skema
92
2. Struktur Tabel Berikut ini adalah struktur tabel dari sistem E-Library Jurusan Teknik Informatika UIN SGD Bandung. 1. Tabel User Nama Tabel: user Primary Key: id_user Foreign Key: tidak ada Fungsi Tabel: untuk menyimpan data-data user. Tabel 4.1 Tabel User No 1.
Nama Field id_user
Tipe Data int (11)
2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
email_user password nama_user almt_user kota_user institusi_user job_user hak_akses tgl_gabung kode_aktivasi aktif
varchar (40) varchar (40) varchar(50) varchar (100) varchar (30) varchar (40) varchar (15) varchar (5) date varchar (20) varchar (1)
Keterangan PK Alamat email user Password user Nama lengkap user Alamat user Kota tempat tinggal user Institusi user Pekerjaan user Hak akses (admin atau user) Tanggal registrasi Kode untuk aktivasi akun Menunjukkan user telah aktivasi akunnya atau belum
2. Tabel Upload Nama Tabel: upload Primary Key: id_upload Foreign Key: id_user, id_kategori, id_tahun Fungsi Tabel: untuk menyimpan data-data buku.
93
Tabel 4.2 Tabel Upload No 1.
Nama Field id_upload
Tipe Data int (11)
2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
id_user id_kategori id_tahun judul_file gambar nim_mhs penulis deskripsi tgl_upload publish
int (11) int (11) int (4) varchar (200) text int (9) varchar (50) text date varchar (1)
12.
total_file
int (11)
Keterangan PK FK FK FK Judul dari buku yang di-upload Cover dari buku Nim mahasiswa Nama penulis Deskripsi singkat buku Tanggal upload buku Menunjukkan buku sudah dipublish atau belum Total file yang ada pada buku
3. Tabel File Nama Tabel: file Primary Key: id_file Foreign Key: id_upload, id_user Fungsi Tabel: untuk menyimpan data-data file yang telah di-upload sesuai dengan judul pada tabel upload. Tabel 4.3 Tabel File No 1.
Nama Field id_file
Tipe Data int (11)
PK
2. 3. 4. 5.
id_upload id_user nama_file tgl_upload
int (11) int (11) text date
FK FK Nama file Tanggal upload file
4. Tabel Kategori Nama Tabel: kategori Primary Key: id_kategori
Keterangan
94
Foreign Key: tidak ada Fungsi Tabel: untuk menyimpan data-data kategori. Tabel 4.4 Tabel Kategori No 1.
Nama Field id_kategori
Tipe Data int (11)
PK
Keterangan
2.
nama_kategori
varchar (50)
Nama kategori
5. Tabel Referensi Tahun Nama Tabel: ref_tahun Primary Key: id_tahun Foreign Key: tidak ada Fungsi Tabel: untuk menyimpan data-data referensi tahun. Tabel 4.5 Tabel Referensi Tahun No 1.
Nama Field id_tahun
Tipe Data int (11)
PK
Keterangan
2.
tahun
int (11)
Tahun
6. Tabel Komentar Nama Tabel: komentar Primary Key: id_komentar Foreign Key: id_upload, id_user Fungsi Tabel: untuk menyimpan data-data komentar. Tabel 4.6 Tabel Komentar No 1.
Nama Field id_komentar
Tipe Data int (11)
Keterangan PK
2. 3. 4.
id_upload id_user isi_komen
int (11) int (11) text
FK FK Isi dari komentar
95
Tabel 4.6 Tabel Komentar (lanjutan) No 5. 6.
Nama Field tgl_komen jam_komen
Tipe Data date time
Keterangan Tanggal komentar Waktu komentar
7. Tabel Captcha Nama Tabel: captcha Primary Key: captcha_id Foreign Key: tidak ada Fungsi Tabel: untuk menyimpan data saat pembuatan dan validasi captcha. Tabel 4.7 Tabel Captcha
4.1.5
No 1.
Nama Field captcha_id
Tipe Data int (11)
PK
Keterangan
2. 3. 4.
captcha_time ip_address word
int (11) varchar (16) varchar (20)
Waktu dari captcha Ip address Kata dalam gambar captcha
Perancangan Antar Muka (Interface) Perancangan antar muka (interface) ini merupakan struktur gambaran
aplikasi web yang akan dibuat. Adapun rancangan antar muka E-Library Jurusan Teknik Informatika UIN Sunan Gunung Djati Bandung adalah sebagai berikut: 4.1.5.1 Perancangan Antar Muka (Interface) Front-End 1.
Rancangan Interface Halaman Utama (Index) Rancangan interface untuk halaman utama ketika user pertama kali masuk
ke website e-library ditunjukkan pada gambar 4.14.
96
Gambar 4.14 Rancangan Interface Halaman Utama (Index) 2.
Rancangan Interface Halaman Registrasi Gambar 4.15 merupakan rancangan interface halaman form pendaftaran
yang dilakukan oleh pengunjung (guest) untuk menjadi anggota.
Gambar 4.15 Rancangan Interface Halaman Registrasi
97
3.
Rancangan Interface Halaman Login Gambar 4.16 merupakan rancangan interface form login bagi anggota
maupun admin untuk dapat masuk ke back-end dari aplikasi sesuai dengan hak aksesnya.
Gambar 4.16 Rancangan Interface Halaman Login 4.
Rancangan Interface Halaman Detil Buku Gambar 4.17 merupakan rancangan interface halaman detil buku. Pada
halaman ini, tombol download dan view tersedia apabila pengguna telah login.
Gambar 4.17 Rancangan Interface Halaman Detil Buku
98
5.
Rancangan Interface Halaman Komentar Gambar 4.18 merupakan rancangan interface dari halaman komentar. Pada
halaman komentar ini terdapat form untuk pengisian komentar juga. Form pengisian komentar tersedia apabila pengguna telah login. Logo UIN
E-Library Jurusan Teknik Informatika UIN Sunan Gunung Djati Bandung
Gambar Header
HOME
KATEGORI
PENCARIAN
CONTROL PANEL
LOGOUT
Detil Buku Cari Judul File
DOKUMEN TERBARU
Gambar
Build Your Own Database Driven Web Site Using PHP MySQL
Cover Buku
Komentar Belum ada komentar
Kirim Komentar Nama
Nama User
Komentar
Kode Verifikasi
QWERTY
Masukkan Kode Submit
Reset
Gambar 4.18 Rancangan Interface Halaman Komentar 6.
Rancangan Interface Halaman Lihat File Gambar 4.19 merupakan rancangan interface dari halaman lihat file.
Halaman ini tidak dapat diakses apabila belum login.
99
Gambar 4.19 Rancangan Interface Halaman Lihat File 4.1.5.2 Perancangan Antar Muka (Interface) Back-End 1.
Rancangan Interface Halaman Utama Admin Gambar 4.20 merupakan rancangan interface dari halaman utama
administrator. Halaman ini adalah back-end yang dikhususkan untuk admin.
Gambar 4.20 Rancangan Interface Halaman Utama Admin
100
2.
Rancangan Interface Halaman Referensi Kategori Gambar 4.21 merupakan rancangan interface halaman referensi kategori.
Pada halaman ini, admin dapat melakukan proses view, insert, update, dan delete data kategori.
Gambar 4.21 Rancangan Interface Halaman Referensi Kategori 3.
Rancangan Interface Halaman Referensi Tahun Gambar 4.22 merupakan rancangan interface halaman referensi tahun.
Pada halaman ini, admin dapat melakukan proses view, insert, update, dan delete data tahun.
Gambar 4.22 Rancangan Interface Halaman Referensi Tahun
101
4.
Rancangan Interface Halaman Manajemen User Gambar 4.23 merupakan rancangan interface halaman manajemen user.
Pada halaman ini, admin dapat melakukan proses view, insert, update, dan delete data user.
Gambar 4.23 Rancangan Interface Halaman Manajemen User 5.
Rancangan Interface Halaman Tambah User Gambar 4.24 merupakan rancangan interface form tambah user. Halaman
ini hampir sama dengan form registrasi anggota, namun form ini khusus untuk admin.
102
Logo UIN
Halaman Administrator E-Library Jurusan Teknik Informatika
Referensi
Data
Web E-Library
Logout
Cari
Tambah Data User Email Password Nama
Alamat
Kota Institusi Pekerjaan Hak Akses
Admin
User
Aktif
Ya
Tidak
Submit
Reset
Gambar 4.24 Rancangan Interface Halaman Tambah User 6.
Rancangan Interface Halaman Manajemen Buku Gambar 4.25 merupakan rancangan interface halaman manajemen buku.
Pada halaman ini, admin dapat melakukan proses view, insert, update, dan delete data buku.
Gambar 4.25 Rancangan Interface Halaman Manajemen Buku
103
7.
Rancangan Interface Halaman Tambah Buku Gambar 4.26 merupakan rancangan interface form tambah buku.
Gambar 4.26 Rancangan Interface Halaman Tambah Buku 8.
Rancangan Interface Halaman Detil Buku Gambar 4.27 merupakan rancangan interface halaman detil buku.
Halaman ini hampir sama dengan halaman detil buku pada front-end, namun dengan tambahan tombol untuk upload file, dan hapus file.
104
Gambar 4.27 Rancangan Interface Halaman Detil Buku
9.
Rancangan Interface Halaman Lihat File Gambar 4.28 merupakan rancangan interface halaman lihat file. Halaman
ini sama dengan halaman lihat file pada front-end aplikasi, namun hanya dapat diakses oleh admin.
Gambar 4.28 Rancangan Interface Halaman Lihat File
105
10.
Rancangan Interface Halaman Upload File Gambar 4.29 merupakan rancangan interface form upload file. Pada form
ini, admin dapat melakukan proses upload lebih dari satu file.
Gambar 4.29 Rancangan Interface Halaman Upload File
11.
Rancangan Interface Halaman Manajemen Komentar Gambar 4.30 merupakan rancangan interface halaman manajemen
komentar. Pada form ini, admin dapat melakukan proses delete komentar.
Gambar 4.30 Rancangan Interface Halaman Manajemen Komentar
106
12.
Rancangan Interface Halaman Utama Anggota Gambar 4.31 merupakan rancangan interface halaman utama anggota.
Halaman ini adalah back-end yang dikhususkan untuk anggota.
Gambar 4.31 Rancangan Interface Halaman Utama Anggota 13.
Rancangan Interface Halaman Manage File Gambar 4.32 merupakan rancangan interface halaman manajemen buku
bagi anggota. Pada halaman ini, anggota dapat melakukan proses view, insert, update, dan delete data buku milik anggota tersebut. Logo UIN
User Control Panel E-Library Jurusan Teknik Informatika
Manage My File
Manage Profile
Web E-Library
Logout
Cari
Manage File + Tambah Buku Nomor
Kategori Jurusan
Judul Buku
Nama Penulis
Tahun
Tanggal Upload
Status Publish
Detil
Ubah
Hapus
Detil
Ubah
Hapus
Gambar 4.32 Rancangan Interface Halaman Manage File 14.
Rancangan Interface Halaman Tambah Buku Gambar 4.33 merupakan rancangan interface form tambah buku bagi
anggota.
107
Logo UIN
User Control Panel E-Library Jurusan Teknik Informatika
Manage My File
Manage Profile
Web E-Library
Logout
Cari
Tambah Data Buku Judul File Browse..
Gambar Kategori
E-Book
NIM Nama Penulis Tahun
2005
Deskripsi
Submit
Reset
Gambar 4.33 Rancangan Interface Halaman Tambah Buku
15.
Rancangan Interface Halaman Detil Buku Gambar 4.34 merupakan rancangan interface halaman detil buku bagi
anggota. Halaman ini sama dengan halaman detil buku pada halaman detil buku admin.
Gambar 4.34 Rancangan Interface Halaman Detil Buku
108
16.
Rancangan Interface Halaman Lihat File Gambar 4.35 merupakan rancangan interface halaman lihat file. Halaman
ini sama dengan halaman lihat file pada front-end aplikasi dan halaman lihat file admin, namun hanya dapat diakses oleh anggota.
Gambar 4.35 Rancangan Interface Halaman Lihat File 17.
Rancangan Interface Halaman Upload File Gambar 4.36 merupakan rancangan interface form upload file bagi
anggota.
Gambar 4.36 Rancangan Interface Halaman Upload File
109
18.
Rancangan Interface Halaman Manage Profile Gambar 4.37 merupakan rancangan interface form ubah profil anggota. Logo UIN
User Control Panel E-Library Jurusan Teknik Informatika
Manage My File
Manage Profile
Web E-Library
Logout
Cari
Manage User Profile Email
[email protected]
Password Konfirmasi Password Nama
Nama Jl. Alamat
Alamat
Kota
Kota
Institusi
UIN SGD Bandung
Pekerjaan
Mahasiswa Submit
Gambar 4.37 Rancangan Interface Halaman Manage Profile
4.1.6
Algoritma Proses Utama
1. Algoritma Proses Registrasi Variabel data_registrasi: array Kondisi awal: field pada form registrasi telah terisi Kondisi akhir: registrasi berhasil, dilanjutkan ke akun Begin read data_registrasi if data_registrasi = TRUE then registrasi berhasil else muncul pesan kesalahan kembali ke form registrasi endif End
2. Algoritma Proses Login Variabel email_user, password: char
aktivasi
110
Kondisi awal: email_user dan password telah diisi Kondisi akhir: masuk ke halaman utama Begin if (email_user dan password) = TRUE then masuk ke halaman utama else muncul pesan kesalahan kembali ke form login endif End
3. Algoritma Proses Lihat Data Variabel data: array Kondisi awal: Kondisi akhir: menampilkan data Begin if data = TRUE then tampilkan data else muncul pesan tidak ada data endif End
4. Algoritma Proses Input Data Variabel data_input: array Kondisi awal: semua field telah diisi Kondisi akhir: data disimpan ke database Begin if data_input = TRUE then add data else muncul pesan kesalahan kembali ke form input data endif End
5. Algoritma Proses Deteksi Kemiripan Pada Input Judul Buku Variabel judul_file, data: char hasil: array
111
num, jml_kata, i, persen: int Kondisi awal: semua field telah diisi Kondisi akhir: muncul/tidak muncul peringatan kemiripan judul buku Begin read judul_file explode judul_file berdasarkan spasi num = count(judul_file) jml_kata = num - 1 for i dari 0 to num do row = pencarian ke tabel data buku endfor if row > 0 then foreach row as data similar_text (judul_file, data[i], persen) if (persen >= 80 dan persen <= 99) then hasil[] = data endif endforeach endif if count(hasil) > 0) then return hasil; else hasil = "T"; return hasil; endif End
6. Algoritma Ubah Data Variabel data_update: array Kondisi awal: field telah dirubah Kondisi akhir: data yang dirubah disimpan ke database Begin pilih data yang dirubah if data_update = TRUE then update data else muncul pesan kesalahan kembali ke form ubah data endif End
112
7. Algoritma Proses Hapus Data Variabel Kondisi awal: Kondisi akhir: data yang dipilih dihapus dari database Begin pilih data yang dihapus if pesan_konfirmasi = TRUE then delete data else kembali ke halaman lihat data endif End
8. Algoritma Proses Cari Data Variabel teks_cari: char Kondisi awal: field pencarian telah diisi Kondisi akhir: menampilkan/tidak menampilkan data yang dicari Begin read teks_cari if teks_cari = TRUE then tampilkan data else muncul pesan data tidak ditemukan endif End
9. Algoritma Proses Upload File Variabel data_upload: array Kondisi awal: semua field telah diisi Kondisi akhir: data disimpan ke database Begin read data_upload if data_upload = TRUE then upload data else muncul pesan kesalahan kembali ke form upload file endif End
