BAB IV ANALISA DAN PERANCANGAN 4.1
Analisa Sistem Analisis
sistem
pengembangan web
ini
merupaakan
penguraian
dari
suatu
sistem
yang utuh kedalam bagian-bagian komponennya dengan
maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan dan kebutuhan-kebutuhan yang diharapakan sehingga dapat diusulakan perbaiakannya. 4.1.1
Analisa Sistem yang Sedang Berjalan
a. Deskripsi Masalah Sarana penyampaian informasi di MTs Al Ishlah Garawangi masih bersifat manual dengan menggunakan tulisan yang berupa surat dan lisan.Karena hal tersebut
menimbulkan
maslah
yaitu membutuhkan waktu
lama
dalam
penyampaian informasi,penyimpanan data, dan membutuhkan biaya yang tidak sedikit. b. Pemecahan Masalah Berdasarkan uraian deskripsi maslah diatas maka diperlukan sebuah sitem baru yang dapat digunakan untuk penyampaian informasi MTs Al Ishlah Garawangi tanpa membutuhkan waktu yang lama yang biaya yang banyak berupa website yang dapat diakses kapanpun dan dimana saja.
45
46
4.1.2
Analisa Kebutuhan Fungsional Analisis kebutuhan fungsional dilakukan untuk memberikan gambaran
mengenai permasalahan dan prosedur yang sedang berjalan saat ini di MTs Al Ishlah Garawangi 4.1.3
Analisa Kebutuhan Non Fungsional Analisis kebutuhan nonfungsional menggambarkan kebutuhan luar system
yang diperlukan untuk menjalankan aplikasi yang dibangun. Kebutuhan nonfungsional untuk mengoperasikan Aplikasi ini meliputi kebutuhan perangkat keras, kebutuhan perangkat lunak, dan pengguna yang akan menggunakan aplikasi. 4.1.4
Analisa Sistem yang Diusulkan Untuk mengtasi masalah mengenai informasi dan data yang masih manual
maka dibuat sistem baru yang memanfaatkan teknologi informasi khususnya media internet agar dapat diakses dengan cepat dan mudah.Untuk hak akses website ini terbagi menjadi dua yaitu : 1. Admin : admin merupakan user yang dapat menggunakan sistem sepenuhnya yaitu dapat melakukan pengeditan, penginputan data dan penghapusan data, menggunakan tools yang tersedia. 2. User : user dapat melihat informasi tentang sekolah, berits, dan mengisi jejak pendapat. 4.1.5
Analisa Perangkat Keras Perangkat keras yang digunakan untuk pembuatan website ini adalah
sebagai berikut:
47
1. Intel Core i3 2.6 Ghz 2. Memori 1 GB 3. Hardisk 320 GB 4. Monitor 5. Mouse 6. Keyboard 4.1.6
Analisa Perangkat Lunak Perangkat keras yang digunakan untuk pembuatan website ini adalah
sebagai berikut: 1. Browser Internet (Google Chrome atau Mozilla Firefox) 2. Software editor (notepad++). 3. Aplikasi Server (xampp) 4. Desain gambar/tampilan (Corel Draw, Phothoshop) 5. Star UML 4.2
Perancangan
4.2.1
Pemodelan Sistem
a. Use Case Diagram Use Case diagram terdiri dari actor dan sitem.Dalam Use Case diagram sistem ini terdapat dua aktor yaitu admin dan user.Admin dan User memiliki hak akses system yang berbeda yang digambarkan pada Gambar 4.1
48
System
Home
profil User guru
siswa
fitur
Jejak Pendapat
Gambar 4.1 Use Case User
49
System FITUR
tambah
edit <
>
login
<>
Data siswa
<>
admin <>
hapus
<>
<> Data Guru
tambah <>
<>
<> Logout
edit
<> hapus
menu dan profiil setting admin
lihat admin
<<extend>> <<extend>> <<extend>>
tambah admin
Gambar 4.2 Use Case Admin
Login Melihat Data Admin
Home Profil
fitur Tambah Data Admin
<>
Guru Siswa
<> <<extend>>
Admin
agenda <<extend>> data siswa <>
<<extend>>
<<extend>>
lokasi sekolah
<<extend>>
<<extend>>
cari siswa
data guru Jejak Pendapat
berita Pengaturan admin informasi sekolah
log out
Gambar 4.3 Use Case Sistem
User
50
Deskripsi Use Case Diagram 1. Use Case Login Aktor
:Admin
Deskripsi
: Jika login admin memasukkan username beserta password agar
dapat
masuk
kesistem
sehingga
admin
bisa
merubah,menghapus,dan menambah update data terbaru. 2. Use Case Fitur Aktor
:Admin dan User
Deskripsi
:Di menu Fitur terdapat beberapa sub bagian menu yang bisa
diakses
oleh
user
diantaranya
agenda,peta
sekolah,kontak sekolah,dan galeri kegiatan.Untuk menu fitur yang bisa diakses oleh admin agenda, berita, buku tamu, galeri kegiatan, info sekolah, jajak pendapat dan prestasi yang dapat diupdate oleh admin. 3. Use Case Setting Admin Aktor
:Admin
Deskripsi
:Menu untuk pengaturan admin
4. Use Case Data Guru Aktor
:Admin
Deskripsi
:Terdapat
menu
menghapus data 5. Use Case Data Siswa Aktor
:Admin
untuk
mengubah,menambah,dan
51
Deskripsi
:Terdapat
menu
untuk
mengubah,menambah,dan
menghapus data 6. Use Case Logut Aktor
:Admin
Deskripsi
:Untuk keluar dari system
7. Use CasevHome Aktor
:User
Deskripsi
:Untuk keluar dari sistem
8. Use Case Profil Aktor
:User
Deskripsi
: Tampilan Awal saat website diakses
9. Use Case Siswa Aktor
:User
Deskripsi
:Untuk melihat data-data siswa yang menempuh pendidikan di MTS
10. Use Case Guru Aktor
: User
Deskripsi
: Untuk melihat data-data Guru yang mengabdi di MTS
52
b. Activity Diagram 1. Activity Diagram Admin a. Login
Admin
Input Username
Sistem
Login Gagal
Input Pasword Login Berhasil Menampilkan Form Admin
Gambar 4.4 Activity Diagram Login Admin
53
b. Input Data Siswa
Sistem
Admin Login
Pilih menu Data Siswa
Pilih Kelas
Pilih Kelas
Menampilkan Data Siswa
Update Edit
Iya
Hapus
Simpan
Gambar 4.5 Activity Diagram Input data siswa
54
c. Pencarian Siswa
Gambar 4.6 Activity Diagram Pencarian Siswa
55
2. Activity Diagram User a. Lihat Data Siswa
User
Buka Website
Sistem
Menampilkan Form utama
Memilih menu siwa Menampilkan Data siswa Pilih Direktori siswa
Pilih Kelas
Gambar 4.7 Activity Diagram lihat Data Siswa
56
b. Lihat Data Guru atau Tata Usaha
User
Buka Website
Sistem
Menampilkan Form utama
Memilih menu guru Menampilkan Data Pilih Direktori Guru
Pilih Data
Gambar 4.8 Activity Diagram lihat Data Guru atau TU
57
c. Sequence Diagram
Admin
Databse
Sistem Admin
Sistem User
User
1 : Buka Website Admin()
2 : Meminta Username dan password() 3 : Verifikasi Data()
4 : Valid() 5 : Menampilkan Menu Admin()
6 : Update,Edit,Delet,Simpan()
7 : Menyimpan Data()
8 : Mengirim Data() 9 : Menampilkan Menu()
10 : Memilih Menu()
Gambar 4.9 Sequence Diagram
58
d. Class Diagram
fitur
agenda +no +tanggal +judul +kegiatan
+agenda() +berita() +buku_tamu() +galeri() +info_sekolah() +jejak_pendapat() +prestasi()
data_guru +direktori_guru() index
+tambah() +edit() +hapus()
+username +Password
berita
+Login()
+fitur() +setting_admin() +data_guru() +data_siswa()
data_siswa +direktori_siswa() setting_admin
tambah_admin
+tambah_admin() +lihat_admin() +menu_profil()
+username +password +email +hak_akses
+agenda() +galeri_foto() +peta_situs() +kontak_sekolah()
main_menu
Home +berita()
+Profil() +guru() +siswa() +fitur()
guru +direktori_guru() +prestasi_guru() +kalender _akademik()
+pertanyaan +id +tanggal +status +edit() +hapus()
siswa +prestasi() +eskul() +osis() +direktori_siswa()
+visi_misi() +sejarah() +sarana() +struktur() +kepsek() +prestasi()
Gambar 4.10 Class Diagram
Basis Data
galeri
+lihat_foto() +edit() +hapus() prestasi +no +foto +keterangan +edit() +hapus()
profil
4.2.2
+tambah() +edit() +hapus()
+tambah() +edit() +hapus()
jajak_pendapat
menu_profil
fiture
+no +tanggal +judul
+no +tanggal +judul_album +jumlah +tambah_foto
+tambah()
+home() +profili() +guru() +siswa() +fitur()
info_sekolah
+no +judul +tanggal +komentar
menu_admin
59
a. Relasi Tabel galeri berita PK
PK
berita_id isi subject pengirim posttime postdate visit
album_id ket
N
1 1 galeri_album PK
1
PK
1
buku_tamu PK
id_tamu nama email alamat komentar posttime postdate ipkom tanggapan
user_id kode_user jenis_user username password email ip waktu kunjung status
album_id album tanggal
User
N
galeri_id
N
1
agenda PK
1
N agenda_picture PK
agenda_id picture_sm_name picture_bg_name picture_detail
1
Gambar 4.11 Relasi Tabel
file_id date_start date_end evenTitle EvenDetail color status picture
1
60
b. Perancangan Tabel 1. Tabel User (Admin) Tabel 4.1 Tabel User (Admin) Nama Field
Tipe Data
Ukuran
Userid
Int
11
Username
Varchar
50
Password
Varchar
200
Email
Varchar
100
Ip
Varchar
15
Waktu
Varchar
20
Kunjung
Int
11
Status
Int
1
2. Tabel Pegawai Tabel 4.2 Tabel Pegawai Nama Field
Tipe Data
Ukuran
Userid
Int
5
Nama
Varchar
30
Nip
Varchar
25
Kelamin
Char
2
Alamat
Varchar
60
61
Nama Field
Tipe Data
Ukuran
Tugas
Varchar
30
Telp
Varchar
15
Hp
Varchar
15
Email
Varchar
30
Pelajaran
Varchar
200
tgl_lahir
Varchar
15
tmp_lahir
Varchar
20
Kode
Varchar
10
Pangkat
Varchar
50
Kategori
Char
1
Profilstaff
Longtext
3. Tabel Siswa Tabel 4.3 Tabel Siswa Nama Field
Tipe Data
Ukuran
user_id
Varchar
25
Nama
Varchar
30
Kelas
Varchar
10
Alamat
Varchar
60
tgl_lahir
Varchar
15
Telp
Varchar
15
62
Nama Field
Tipe Data
Ukuran
Agama
Varchar
10
Kelamin
Char
1
tmp_lahir
Varchar
20
tgl_input
Varchar
15
Sttb
Varchar
10
Nem
Varchar
10
Wali
Varchar
50
4. Tabel Berita Tabel 4.4 Tabel Berita Nama Field
Tipe Data
Ukuran
Id
Int
10
Isi
Longtext
Subject
Text
Pengirim
Varchar
40
Posttime
Varchar
20
Postdate
Varchar
20
Visits
Int
11
63
5. Tabel Galeri Tabel 4.5 Tabel Galeri Nama Field
Tipe Data
Ukuran
Idalbum
Int
15
Album
Varchar
100
Tanggal
Varchar
20
6. Tabel Agenda Tabel 4.6 Tabel Agenda Nama Field
4.2.3
Tipe Data
Ukuran
calendar_event
Int
date_start
Datetime
date_end
Datetime
eventTitle
Varchar
EvenDetail
Text
color
Varchar
255
status
Int
2
picture
Int
11
file_id
Int
11
Perancangan Antarmuka (interface)
a. Perancangan Antamuka Halaman Admin 1. Rancangan interface halaman Login Admin
11
255
64
Gambar 4.12 Login Admin 2. Rancangan interface halaman Home Admin
Gambar 4.13 Home Admin
65
3. Interface Fitur
Gambar 4.14 Interface Fitur
4. Interface Setting Admin
Gambar 4.15 Interface Setting Admin
66
5. Interface Data Guru
Gambar 4.16 Interface Setting Admin
6. Interface Data Siswa
Gambar 4.17 Interface Setting Admin
67
b. Perancangan Antamuka Halaman User 1. Interface Home User
Gambar 4.18 Interface Home User
68
2. Interface Profil
Gambar 4.19 Interface Profil
69
3. Interface Guru
Gambar 4.20 Interface Guru
4. Interface Siswa
Gambar 4.21 Interface Siswa
