BAB
IV
RANCANGAN DAN IMPLEMENTASI SISTEM
Diagram Rancangan Sistem
Penulis membuat
Diagram Rancangan sistem dengan menggunakan sistem OOAD (Object Oriented Analysis and Design) yaitu menggunakan UML (Unified Modeling Language) yang terdiri
dari Use Case Diagram, Class Diagram, Sequence Diagram dan Activity Diagram.
4.1.1 Use Case Diagram
Use Case Diagram
adalah gambaran graphical dari
beberapa atau semua actor, use case,
dan interaksi diantara komponen-komponen tersebut yang memperkenalkan suatu
sistem yang akan dibangun. Use Case
diagram menjelaskan manfaat sutau sistem jika dilihat menurut pandangan orang
yang berada di luar sistem. Diagram ini menunjukan fungsionalitas suatu sistem
atau kelas dan bagaimana sistem tersebut berinteraksi dengan dunia luar.
Berikut adalah model use case diagram pada website Yayasan Islamic Center Ar -
Rahmah :
Gambar 4.1 Use case xxxxxxx
4.1.2 Class Diagram
Class Diagram menggambarkan struktur
sistem dari segi pendefinisian kelas kelas yang akan dibuat untuk membangun
sistem. Kelas memiliki apa yang diebut atribut dan metode atau operasi.
4.1.3 Sequence Diagram
Diagram Sekuence menggambarkan
kelakuan/perilaku objek pada use case dengan mendeskripsikan waktu hidup objek
dan message yang dikirimkan dan diterima antar objek. Untuk mengetahui
objek-objek yang terlibat dalam sebuah uce case beserta metode-metode yang
dimiliki kelas yang diinstansiasi menjadi objek itu.
Sequence Admin
Keterangan Sequence
Admin :
1.
Menampilkan Form Untuk Login
2.
Admin Mengisi Username dan Password
3.
Validasi Data
4.
Tampil Pesan kesalahan jika data tidak
sesuai
5.
Sistem mengambil data jika sesuai
6.
Mengecek data Login di database
7.
Login OK
8.
Menampilkan halaman Utama Website
Sequence
Kelola
Keterangan Sequence Kelola
1.
User Mengakses Website
2.
Menampilkan Halaman Website
3.
Menampilkan Form
4.
Entri Data
5.
Kembali kehalaman Website
4.1.4 Activity Diagram
Activity Diagram memodelkan alur kerja
sebuah proses bisnis dan urutan aktivitas dalam suatu proses. Sedangakan
scenario use case berfungsi untuk mengetahui alur cerita dari activity diagram
tersebut agar lebih mudah dimengerti. Berdasarkan use case diagram yang sedang
berjalan pada AMIK Wahana Mandiri diatas, maka dapat digambarkan activity
diagram dan scenario use casenya sebagai berikut .
4.2 Rancangan Halaman Website
Rancangan
tampilan diperlukan secara mutlak didalam proses pembuatan aplikasi halaman
website karena bagian ini langsung berhubungan dengan user.
4.2.1 Rancangan Site Map
Pada saat pengguna membuka situs ini
maka halaman Home yang akan muncul pertama kali.
|
HOME
|
|
BUKU
TAMU
|
|
FORM DATA
|
|
PROFIL
|
|
GALERI
|
|
DATA
ALUMNI
|
Gambar Site Map
4.2.2 Rancangan Halaman Website
Pada
saat user membuka situs ini maka halaman Home yang akan muncul pertama kali.
Halaman ini berisi beberapa menu, diantaranya sebagai berikut.
|
HEADER
|
|
MENU LOGIN
|
|
HOME
|
|
BUKU
TAMU
|
|
FORM DATA
|
|
PROFIL
|
|
GALERI
|
|
DATA ALUMNI
|
|
GAMBAR FLASH
|
|
JAM
|
|
INFORMASI ATAU BERITA
|
Keterangan :
1.
MENU,
Terdiri dari beberapa tombol seperti :
a. Home
digunakan untuk menampilkan halaman yang berisi informasi mengenai Yayasan
Islamic Center Ar – Rahmah.
b. Profil
terdiri dari dari beberapa sub menu diantaranya sejarah, fasilitas, struktur,
visi dan misi.
c. Galeri
berisi tentang dokumentasi tentang kegiatan yang ada pada Yayasan.
d. Form
Data berisi tentang form untuk input
data alumni yang hanya dapat di akses oleh admin
saja.
e. Data
Alumi berisi tabel tentang data semua alumni yang sudah diinput.
f. Buku
Tamu digunakan sebagai alat komunikasi antara satu user dengan user lainnya,
antara alumni dengan alumni lainnya maupun antara alumni denga pengurus yang
juga bisa memberikan masukkan atau komentar mereka terhadap Yayasan Islamic
Center Ar - Rahmah.
2. HEADER berada
dibawah menu yang merupakan gambar static (diam).
3. Widget / Sidebar
yang berada di samping website terdiri dari Galeri Flash, Gambar Flash,
Blogroll dan Jam. Ini berguna untuk memperindah tampilan website.
4. HALAMAN INFORMASI
berisikan informasi-informasi tentang Yayasan Islamic Center Ar - Rahmah secara
keseluruhan.
4.3 Rancangan Basis Data
1. Tabel Login
|
Field
|
Type
|
Length
|
Extra
|
Primary
|
|
username
|
varchar
|
20
|
|
|
|
password
|
varchar
|
20
|
|
|
2. Tabel Data Alumni
|
Field
|
Type
|
Length
|
Extra
|
Primary
|
|
Nis
|
Int
|
20
|
|
Primary
|
|
Nama
|
Varchar
|
50
|
|
|
|
tempat_tanggallahir
|
Varchar
|
100
|
|
|
|
Jenis
|
Varchar
|
10
|
|
|
|
Alamat
|
Varchar
|
15
|
|
|
|
Status
|
varchar
|
100
|
|
|
|
Sd
|
|
|
|
|
|
Smp
|
|
|
|
|
|
Sma
|
|
|
|
|
|
Jurusan
|
|
|
|
|
|
Universitas
|
|
|
|
|
|
tahun_lulus
|
Varchar
|
20
|
|
|
3. Tabel Buku Tamu (tabel)
|
Field
|
Type
|
Length
|
Extra
|
Primary
|
|
nama
|
Varchar
|
50
|
|
|
|
email
|
Varchar
|
50
|
|
|
|
pesan
|
Varchar
|
200
|
|
|
4. Tabel Home
|
Field
|
Type
|
Length
|
Extra
|
Primary
|
|
id
|
int
|
5
|
|
primary
|
|
judul
|
text
|
|
|
|
|
home
|
text
|
|
|
|
4.4 Rancangan Tampilan Website
Suatu sistem terdiri dari sejumlah
komponen yang saling berkaitan satu sama lain dan membentuk satu kesatuan.
Sebuah sistem yang baik selayaknya dapat menyajikan informasi yang akurat dan
mudah dipahami.
1.
Tampilan
Login Admin
2.
Tampilan
Home
3.
Tampilan
Profil
4.
Tampilan
Form input data
5.
Tampilan
Data Alumni
6.
Tampilan
Buku Tamu
4.5 Implementasi Perangkat Keras dan Perangkat Lunak
Dalam membuat dan merancang halaman
website Yayasan Islamic Center Ar - Rahmah dibutuhkan beberapa persyaratan
minimum dari Software maupun Hardware yang akan dibutuhkan agar
website dapat berjalan sesuai dengan yang kita inginkan. Tujuan dari tahap
implementasi ini adalah untuk memastikan perangkat lunak yang dibuat bekerja
secara efektif sesuai yang diharapkan dalam membantu menyelesaikan perancangan
website dan menyelesaikan masalah pada pendaftaran siswa baru Yayasan Islamic
Center Ar - Rahmah.
Implementasi Perangkat Keras
Spesifikasi
perangkat keras yang digunakan penulis adalah :
1. Prosessor :
2. Memory : 2 GB
3. Harddisk :
4. VGA
Card :
5. Monitor :
6. Keyboard
dan Mouse
Implementasi Perangkat Lunak
Perangkat
lunak yang digunakan penulis adalah :
1. Sistem
Operasi : Microsoft
Windows 7
2. Server
a. Web
Server : Local Host
b. Database
Server : MySQL Server Versi
3. Web
Editor : Adobe
Dreamweaver CS4
4. Web
Browser : Google
Chrome
