BIMBINGAN BAB IV

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