Perancangan Antarmuka - Perancangan Sistem

BAB III ANALISA DAN PERANCANGAN SISTEM

B. Perancangan Sistem

4. Perancangan Antarmuka

Untuk memudahkan komunikasi antara user dengan sistem

maupun sebaliknya, maka antarmuka adalah bagian yang sangat penting

dan ikut menentukan keberhasilan dari sebuah sistem. Semakin mudah

antarmuka sebuah aplikasi untuk dipelajari, dipahami, dan menarik, maka

user akan merasa nyaman dalam pengoperasian aplikasi sehingga user

akan selalu kembali mengunjungi dan menggunakan aplikasi tersebut.

Antarmuka untuk aplikasi workgroup berbasis web ini akan

dirancang dengan konsep sederhana, namun menarik dan nyaman untuk

dilihat. Halaman-halaman aplikasi workgroup berbasis web akan

dirancang dengan menggunakan elemen tabel dari HTML. Pada

perancangan antarmuka, ada beberapa hal yang perlu diperhatikan, yaitu

rancangan struktur menu dan rancangan halaman yang akan dibahas satu

per satu.

a. Rancangan Struktur Menu

Struktur menu untuk aplikasi workgroup ini dapat dibedakan

menjadi struktur menu administrator workgroup, anggota workgroup,

calon administrator workgroup, dan calon anggota workgroup. Hal ini

disebabkan oleh kewenangan yang berbeda antara keempatnya. Calon

administrator workgroup hanya mempunyai menu buat workgroup

baru dan calon anggota hanya mempunyai menu daftar. Sedangkan

struktur menu administrator dan anggota workgroup ditunjukan

sebagai berikut.

Gambar 3.18 Struktur Menu Administrator Workgroup

Gambar 3.19 Struktur Menu Anggota Workgroup

b. Rancangan Halaman

Komposisi tabel-tabel dari rancangan dasar halaman-halaman

aplikasi workgroup dapat dilihat pada gambar 3.20 berikut.

Gambar 3.20 Rancangan Dasar Antarmuka Aplikasi Workgroup

Tabel untuk bagian banner atas akan diisi dengan gambar

banner yang akan dirancang dengan menggunakan perangkat lunak

pengolahan grafis.

Tabel untuk bagian pokok halaman web akan diisi dengan dua

buah tabel yang tersusun berdampingan secara vertikal, di mana setiap

tabel memiliki ukuran dan fungsi yang berbeda. Tabel bagian kiri akan

berukuran lebih kecil daripada tabel bagian kanan. Tabel bagian kiri

berfungsi untuk penempatan bagian-bagian yang tidak membutuhkan

tempat luas. Sebaliknya, bagian kanan digunakan untuk menempatkan

informasi-informasi yang relatif panjang dan membutuhkan cukup

banyak tempat.

Seperti tabel untuk bagian banner atas, tabel untuk bagian

banner bawah juga akan diisi dengan gambar banner yang akan

dirancang dengan menggunakan perangkat lunak pengolahan grafis.

Tabel untuk

bagian pokok

halaman web.

Tabel untuk

bagian banner

atas.

Bagian

kiri

(informasi

-informasi

singkat).

Bagian kanan

(informasi-informasi

panjang).

Tabel untuk

bagian banner

bawah.

Setiap halaman aplikasi workgroup mempunyai banner atas

dan bawah yang sama. Hal ini sesuai dengan prinsip konsistensi dan

bertujuan supaya user tidak merasa bingung dengan banner yang

berubah-ubah. Sedangkan untuk bagian pokok sendiri, isi dari tabel

bagian kiri dan kanan akan berubah-ubah sesuai dengan halaman yang

dibuka oleh user.

Untuk rancangan halaman-halaman aplikasi workgroup

berbasis web secara keseluruhan dapat dilihat secara berurutan sebagai

berikut.

Gambar 3.21 Rancangan Halaman Utama

Banner atas

Salam

Informasi-informasi tentang aplikasi

workgroup.

Banner bawah

Formulir login

Daftar

Gambar 3.22 Rancangan Halaman Pembuatan Kelompok Baru

Gambar 3.23 Rancangan Halaman Pendaftaran Anggota

Banner atas

Formulir data administrator dan data

workgroup

Banner bawah

Formulir login

Daftar

Buat Workgroup Baru

Buat Reset

Banner atas

Formulir data anggota (untuk

halaman pendaftaran).

Banner bawah

Formulir login

Daftar

Buat Workgroup Baru

Gambar 3.24 Rancangan Halaman Profil

Gambar 3.25 Rancangan Halaman Pengubahan Data Profil

Halaman pengubahan data profil meliputi halaman

pengubahan data pribadi dan pengubahan deskripsi workgroup dengan

rancangan tampilan yang sama, kecuali isi dari formulirnya yang

berbeda.

Banner atas

Banner bawah

Kalender

Formulir data pribadi

Atau

Formulir data workgroup

(hanya untuk administrator)

Kembali ke halaman profil

Simpan

Banner atas

Banner bawah

Kalender

Foto

diri

Data pribadi

Data workgroup

Ubah data pribadi | Ubah data kelompok (hanya untuk administrator)

Gambar 3.26 Rancangan Halaman Agenda

Gambar 3.27 Rancangan Halaman Penambahan Agenda

Banner atas

Formulir pengisian agenda baru

Kembali ke halaman Agenda

Banner bawah

Kalender

Simpan Reset

Banner atas

]Agenda bulan

Agenda bulan ini | Tambah Agenda

Tanggal Nama agenda

Isi agenda

Waktu

Pembuat >> Ubah | Hapus

Banner bawah

Kalender

Gambar 3.28 Rancangan Halaman Pengubahan Agenda

Untuk penghapusan agenda tidak ada tampilan halaman

khusus. Jika link hapus salah satu agenda pada halaman agenda dipilih,

maka data akan terhapus dan ditampilkan halaman agenda setelah

salah satu data dihapus.

Gambar 3.29 Rancangan Halaman Buku Alamat

Banner atas

Banner bawah

Kalender

Simpan

Tambah Alamat

Nama : dan seterusnya …

e-mail : [email protected] >> Ubah | Hapus

Lihat Buku Alamat : A B C … Z

Foto

diri

Banner atas

Formulir pengubahan agenda yang berisi data

agenda yang akan diubah

Kembali ke halaman Agenda

Banner bawah

Kalender

Gambar 3.30 Rancangan Halaman Penambahan Buku Alamat

Gambar 3.31 Rancangan Halaman Pengubahan Buku Alamat

Untuk penghapusan buku alamat juga tidak ada halaman

khusus. Jika link hapus salah satu isi buku alamat pada halaman buku

alamat dipilih, maka data akan terhapus dan ditampilkan halaman buku

alamat setelah salah satu data dihapus.

Banner atas

Banner bawah

Kalender

Simpan

Formulir data buku alamat yang berisi data

buku alamat yang akan diubah

Kembali ke halaman buku alamat

Simpan

Banner atas

Banner bawah

Kalender

Simpan

Formulir data buku alamat

Kembali ke halaman buku alamat

Simpan Reset

Gambar 3.32 Rancangan Halaman Pengumuman

Gambar 3.33 Rancangan Halaman Penambahan Pengumuman

Banner atas

Banner bawah

Kalender

Simpan

Formulir data pengumuman

Kembali ke halaman pengumuman

Simpan Reset

Banner atas

Banner bawah

Kalender

Simpan

Tambah Pengumuman

Judul Pengumuman

Isi

Waktu kirim

Pengirim

(5 berita per halaman)

Gambar 3.34 Rancangan Halaman Forum

Fasilitas tambah topik, ubah, dan hapus hanya tersedia untuk

administrator workgroup saja.

Gambar 3.35 Rancangan Halaman Penambahan Topik Forum

Banner atas

Formulir tambah topik

Kembali ke halaman forum

Banner bawah

Kalender

Buat Reset

Banner atas

Tambah Topik

Topik

Tanggapi | Lihat Tanggapan | Ubah | Hapus

Deskripsi

Topik …

Banner bawah

Kalender

Gambar 3.36 Rancangan Halaman Tanggap Forum

Gambar 3.37 Rancangan Halaman Lihat Tanggapan Forum

Banner atas

Topik

Deskripsi

Kirim tanggapan | Kembali ke halaman forum

Tanggapan

Kembali ke halaman forum

Banner bawah

Kalender

Banner atas

Formulir pengisian tanggapan

Kembali ke halaman forum

Banner bawah

Kalender

Gambar 3.38 Rancangan Halaman Pengubahan Topik Forum

Untuk penghapusan topik forum tidak ada halaman khusus.

Jika link hapus salah satu topik forum dipilih, maka data akan terhapus

dan ditampilkan halaman forum setelah salah satu data dihapus.

Gambar 3.39 Rancangan Halaman Chat Room

Banner atas

Formulir pengubahan topik

Kembali ke halaman forum

Banner bawah

Kalender

Simpan

Banner atas

Nama :

Pesan :

Banner bawah

Kalender

Kumpulan pesan

Kirim

Gambar 3.40 Rancangan Halaman File Manager

Gambar 3.41 Rancangan Halaman Anggota Baru

Banner atas

Banner bawah

Kalender

Simpan

Identitas

Terima Tolak

(setiap halaman berisi 5 data anggota baru)

Halaman : 1 2 3 …

Foto

diri

Banner atas

Upload File Baru

(setiap halaman berisi 10 file)

Halaman : 1 2 3 …

Banner bawah

Kalender

Nama File Waktu Pengirim Hapus

Hapus

A. Struktur Penyimpanan File

Untuk memudahkan pengelolaan keseluruhan file yang ada, maka akan

dibuat sebuah struktur folder di mana dibuat folder yang berbeda untuk

menyimpan file dari fasilitas aplikasi yang berbeda. Folder-folder tersebut

akan diberi nama sesuai nama fasilitas aplikasi. Penulis membuat struktur

folder sebagai berikut :

Gambar 4.1 Struktur Penyimpanan File

File utama dan file yang tidak termasuk ke dalam folder di atas, seperti

index.php dan sebagainya, langsung disimpan di dalam folder workgroup.

B. Implementasi Basis Data

Setelah membuat rancangan basis data pada tahap perancangan, maka

rancangan tersebut selanjutnya direalisasikan ke dalam bentuk basis data

sebenarnya. Seperti pada bagian awal telah disebutkan bahwa server basis data

akan menggunakan MySQL, dan aplikasi workgroup berbasis web ini dengan

bahasa pemrograman PHP, maka untuk basis data sistem akan dibuat sebuah

file PHP yang berfungsi untuk instalasi basis data ke dalam server secara

otomatis bila basis data belum tersedia pada saat pertama sistem dijalankan.

File instalasi basis data ini akan disimpan dengan nama install_db.php.

Berikut adalah kodeprogramnya.

<?php

//koneksi dengan MySQL

$connect=mysql_connect("localhost","","");

//jika koneksi gagal, menampilkan pesan dari error yang terjadi if(!connect){

echo "<script>alert('".mysql_error()."');</script>";

exit;

}

//buat basis data workgroup jika basis data belum ada $sql="create database if not exists workgroup;";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//memilih basis data workgroup mysql_select_db("workgroup");

//buat tabel user jika tabel user belum ada $sql="create table if not exists user

( username varchar(16) unique not null primary key, password varchar(50) not null,

status tinyint unsigned not null, nama_kelompok varchar(30) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel group1 jika tabel group belum ada $sql="create table if not exists kelompok

( nama_kelompok varchar(30) unique not null primary key, deskripsi mediumtext not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel agenda jika tabel agenda belum ada $sql="create table if not exists agenda

( no_agenda int unsigned not null auto_increment primary key, judul varchar(50) not null,

isi mediumtext not null, waktu datetime not null,

waktu_selesai datetime not null, username varchar(16) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel berita jika tabel berita belum ada $sql="create table if not exists berita

( no_berita int unsigned not null auto_increment primary key, judul varchar(50) not null,

berita mediumtext not null, waktu datetime not null, username varchar(16) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel buku_alamat jika tabel buku_alamat belum ada $sql="create table if not exists buku_alamat

( no_alamat int unsigned not null auto_increment primary key, nama varchar(50) not null,

jenis_kelamin tinyint unsigned not null, pekerjaan varchar(30) not null,

alamat varchar (75) not null, kota varchar (20) not null,

no_telp varchar(16),

email varchar(75),

username varchar(16) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error."');</script>");

//buat tabel file jika tabel file belum ada $sql="create table if not exists file

( no_file int unsigned not null auto_increment primary key, nama_file varchar(50) not null,

waktu datetime not null, username varchar(16) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel chat jika tabel chat belum ada $sql="create table if not exists chat

( no_chat int unsigned not null auto_increment primary key, pesan mediumtext not null,

waktu datetime not null, username varchar(16) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel forum jika tabel forum belum ada $sql="create table if not exists forum

( no_forum int unsigned not null auto_increment primary key, nama varchar(50) not null,

deskripsi mediumtext not null, username varchar(16) not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>");

//buat tabel tanggapan jika tabel tanggapan belum ada $sql="create table if not exists tanggapan

( no_tanggapan int unsigned not null auto_increment primary key, isi mediumtext not null,

pengirim varchar(16) not null, waktu datetime not null, no_forum int unsigned not null

);";

$hasil=mysql_query($sql) or die("<script>alert('".mysql_error()."');</script>"); ?>

Dalam dokumen PENGEMBANGAN APLIKASI WORKGROUP BERBASIS WEB (Halaman 71-89)