BAB 4 PERANCANGAN DAN IMPLEMENTASI. dikembangkan dengan Windows Sockets Programming

63

PERANCANGAN DAN IMPLEMENTASI

4.1 Perancangan Aplikasi

Aplikasi ini

dikembangkan dengan Windows Sockets Programming

menggunakan bahasa pemrograman

Visual Basic

6.0 pada sisi client maupun server.

Aplikasi ini terdiri dari

server

dan

client

yang saling bergantung antar keduanya,

kedua program harus berjalan bersamaan agar bisa melakukan fungsinya

masing-masing sesuai yang diharapkan. Program

server

bertugas untuk menerima koneksi

dari

client, mengakses

database, mengatur konektivitas dengan

client, dan

memberikan layanan-layanan sesuai dengan permintaan dari program

client.

Program

client

adalah program yang dijalankan oleh user

untuk melakukan

fungsi-fungsi yang ada dalam program tersebut.

Berdasarkan hasil analisis, maka perancangan sistem dilakukan dengan

metode perancangan terstruktur melalui tahapan–tahapan berikut :

-

Pembuatan Use Case Diagram

-

Pembuatan State Diagram

-

Pembuatan Sequence Diagram

-

Pembuatan Rancangan Layar

4.1.1

Use Case Diagram

4.1.1.1 Use Case Client System

4.1.1.2 Use Case Server System

Gambar 4.2

Use Case Server System

4.1.2 State Diagram

4.1.2.1 State Diagram Client

Gambar 4.4 State Diagram Client Set Server’s IP

Gambar 4.5 State Diagram Client Change Password

Main Menu

Announcement History Klik Ann. History /

Tampil Form Ann. History

Download File Klik Download File /

Tampil Form Download File

Klik Call Admin / Tampil Form Call Admin

Call Admin

Verifikasi Logout Klik Logout /

Tampil Verifikasi Logout

Klik Close/Tampil Main Menu

Login Klik Yes /

Tampil Login About

Klik About / Tampil Form About

Gambar 4.7 State Diagram Client Download File

Gambar 4.8 State Diagram Client Call Admin

4.1.2.2

State Diagram Server

Gambar 4.10

State Diagram Server Announcement

Daftar simbol

state diagram:

= initial state

= final state

= state

4.1.3 Sequence Diagram

Client Frame

Enabled Login

CLIENT

Server Frame Database Server

User

SERVER

Login

Winsock Client Winsock Server

Kirim LGFL Kirim LGOK berhasil login Load Lakukan Koneksi Koneksi Berhasil Load

Tampilkan layar Login

Connect INFO TRON|hostname

Status Client Terhubung

Username, Password Masukan Username, Password

Kirim LGIN|Username|Password

Username, Password Verifikasi Username & Password (False)

Tampilkan pesan gagal login

gagal login

Verifikasi Username & Password (True)

Status User Login Tampilkan Menu Utama

Client Frame File Download::User

Client Winsock Server Winsock Database Server

Inisiasi koneksi Jalankan File Download

Kirim *KLAS username

Client Server

Query kode-kode kelas Hasil query kode-kode kelas Kirim *DATK kodekelas

Tampilkan kode kelas Pilih kode kelas

Proses jumlah pertemuan

Kirim *MATK kodekelas

Query jumlah pertemuan Hasil query jumlah pertemuan Kirim *DATM pertemuan

Klik Akses File

Proses detil permintaan

Kirim *LIST pertemuan|matakuliah#username

Kirim *LISF size|filename Proses dan tampilkan file

Klik download

Proses informasi file

Kirim *FILE path|filepointer #totalsize Kirim (File 512 byte fragment)

Cek otoritas user Otoritas user diterima

*[selama size > 512 byte] Kirim (File < 512 byte fragment) Proses file dan save ke Temp

Proses data dan tulis ke file Tampil jumlah pertemuan

Client Frame

Jalankan Call Admin

Tampilkan Form Call Admin Tulis Pesan CLIENT Server Frame Kirim pesan User SERVER Send

Winsock Client Winsock Server

Tampilkan pesan Baca Pesan tulis respon Kirim respon kirim CALL|&pesan Kirim CALL|&respon tampil respon Baca respon tampil respon Admin send Tampilkan Pesan

Server Frame

Jalankan Announcement

Tampilkan Form Announcement Tulis Pesan SERVER Client Frame Kirim pesan Admin CLIENT Broadcast

Winsock Server Winsock Client

Tampilkan pesan

Baca Announcement kirim ANNC|&pesan

User

Tampilkan Announcement has been sent

--Database Server

Update MsAnn

Load Form ShowAnn

Gambar 4.15 Sequence Diagram Broadcast Announcement

4.2

Tabel Protokol Komunikasi Client-Server

Berikut ini adalah tabel yang berisi daftar protokol yang digunakan dalam

komunikasi antara client dan server:

NO Proses Client

Server Keterangan

1

Login

TRON INFO

-

Server

mengirimkan INFO sebagai

tanda bahwa koneksi

client

dan

server

berhasil

-

Client

mengirimkan TRON sebagai

tanda bahwa

client

dengan hostname(n)

terhubung.

LGIN LGFL

-

Client

mengirim protokol LGIN sebagai

tanda bahwa ada user yang mencoba

untuk login

-

Server

mengirim protokol LGFL

sebagai tanda bahwa query dengan

username

(n) dan

password

(n) gagal

sehinggal login gagal.

LGOK -

Server

mengirim protokol LGOK

sebagai tanda bahwa query dengan

sehingga login sukses.

2

Announcement

History

ANNH

NAAN

-

Client

mengirim protokol

ANNH

sebagai tanda bahwa user me-request

pengumuman dari database

-

Server

mengirim protokol NAAN

sebagai tanda bahwa Query di database

pengumuman

EOF,

sehingga

pengumuman kosong

ANNH

-

Server

mengirim protokol

ANNH,

sebagai tanda Query not EOF, dan

client

dapat

menampilkan

isi

pengumuman.

3

Download File

*KLAS

*DATK

-

Client

mengirim protokol

*KLAS

sebagai tanda

request

dari

client

ke

server

untuk

pengiriman

kode

matakuliah.

-

Server

mengirim protokol *DATK

sebagai tanda bahwa

server

memenuhi

request

dari

client

dengan mengirim

Kode mata kuliah.

*MATK

*DATM

-

Client

mengirim

protokol

*MATK

sebagai tanda

request

dari

client

ke

server

untuk

pengiriman

kode

pertemuan untuk kode matakuliah(n).

-

Server

mengirim protokol *DATM

sebagai tanda bahwa server

memenuhi

request

dari

client

dengan mengirim

kode pertemuan matakuliah(n).

*LIST

*LISF

-

Client

mengirim

protokol

*LIST

sebagai tanda

request client

ke

server

untuk

mengirim

list

file

dari

matakuliah(n) pada pertemuan(x).

-

Server

mengirim

protokol

*LISF

sebagai tanda bahwa

server

memenuhi

request

dari client

dengan mengirim list

file

dari

matakuliah(n)

pada

pertemuan(x).

*FILE

-

Client

mengirim

protokol

*FILE

sebagai tanda

request

dari

client

ke

server

untuk mengirimkan file yang

telah dipilih client.

4

Call Admin

CALL

CALL

-

Client

mengirim

protokol

CALL

sebagai tanda pengiriman pesan dari

client

ke server.

-

Server

mengirim

protokol

CALL

sebagai tanda pengiriman pesan dari

server

ke client.

5

Broadcast

Announcement

ANNC

-

Server

mengirim protokol

ANNC

sebagai tanda pengiriman pengumuman

dari server

ke seluruh client

aktif.

6

Server Status

STAT

-

Server

mengirim

protokol

STAT

sebagai tanda pengiriman status

server

ke client

Tabel 4.1 Tabel Protokol Komunikasi Client-Server

4.3 Perancangan Database

Model

database

yang digunakan adalah

database relational. Perancangan

database

terdiri dari tabel–tabel yang dirancang dengan menggunakan program

Microsoft SQL Server 2000, yang dapat dilihat pada perancangan dibawah ini.

Nama Tabel : MsUser

Keterangan : Tabel ini menyimpan semua data–data mengenai nama pemakai

aplikasi ini yang terdiri dari mahasiswa, dosen dan karyawan

terdaftar di STIE YP Karya.

Nama Field

Data Type

Length

Username

Varchar

7

Name

Varchar

30

Password

Varchar

30

Status

Int

Nama Tabel : MsAnnouncement

Keterangan : Tabel ini menyimpan semua data–data pengumuman yang pernah

dikirim oleh admin.

Nama Field

Data Type

Length

Tanggal

Datetime

-Announcement

Varchar

256

Tabel 4.3 Tabel MsAnnouncement

Nama Tabel : MsSubject

Keterangan : Tabel ini menyimpan semua data–data mata kuliah yang tersedia

STIE YP Karya dan dapat diambil mahasiswa.

Nama Field

Data Type

Length

ClassCode

Varchar

5

ClassSubject

Varchar

40

Meetings

Int

-Tabel 4.4 -Tabel MsSubject

Nama Tabel : MsUserSubject

Keterangan : Tabel ini menyimpan semua data–data yang menghubungkan

MsSubject dan MsUser dan menjelaskan pengguna yang mana yang

mengambil mata kuliah yang mana.

Nama Field

Data Type

Length

Username

Varchar

7

ClassCode

Varchar

5

Berikut adalah gambar ERD yang dibuat dalam perancangan

database

aplikasi ini:

Gambar 4.16

Entity Relationship Diagram

4.4 Perancangan Layar

4.4.1 Perancangan Layar Server

Gambar 4.18 Layar Utama Server

4.4.2 Perancangan Layar Client

Gambar 4.20 Layar Login

Gambar 4.22 Layar Set Server’s IP

Gambar 4.23 Layar Change Password

Gambar 4.25 Layar History

Gambar 4.27 Layar Subject List

Gambar 4.29 Layar Logout

4.5 Implementasi

4.5.1 Spesifikasi Sistem

Sama seperti teknologi yang lain, perangkat lunak yang dirancang ini

juga membutuhkan spesifikasi perangkat keras dan perangkat lunak yang

memadai agar dapat diimplementasikan dengan baik. Untuk mendukung

proses pengembangan aplikasi,

testing, implementasi, dan evaluasi, maka

spesifikasi perangkat keras dan lunak yang memenuhi persyaratan harus

tersedia.

Dalam proses adopsi aplikasi baru ini, tidak diperlukan adanya

perangkat keras baru karena aplikasi ini dapat berjalan dengan baik diatas

perangkat keras yang telah dimiliki pihak STIE sekarang. Sedangkan untuk

perangkat lunak, ada beberapa aplikasi yang perlu diinstalasi dan

dikonfigurasi terlebih dahulu.

4.5.1.1 Kebutuhan Perangkat Lunak

Untuk mendukung sistem yang akan diimplementasikan, maka

aplikasi ini membutuhkan sumber daya komputer berupa piranti

lunak dengan spesifikasi sebagai berikut :

Jenis Perangkat Lunak

SERVER

CLIENT

Sistem Operasi

Microsoft Windows

XP

Microsoft Windows

XP

Database Server

Microsoft SQL Server

2000

Tabel 4.6 Tabel Kebutuhan Perangkat Lunak

4.5.1.2 Kebutuhan Perangkat Keras

Untuk

menjalankan

aplikasi

ini,

direkomendasikan

menggunakan spesifikasi perangkat keras sebagai berikut :

Jenis Perangkat Keras

SERVER

CLIENT

Prosesor

Intel Pentium 4 2.0

GHz atau setingkat

Intel Pentium 4 2.0

GHz atau setingkat

RAM

1 GB

512 MB

Harddisk Space

5 GB

100 MB

4.5.2 Prosedur Operasional

4.5.2.1 Aplikasi Server

Pada bagian ini akan dijelaskan langkah demi langkah untuk

menjalankan aplikasi pada sisi

server

dalam STIE YP Karya Suite.

Adapun program

server

dijalankan di komputer

server

yang akan

diletakan di bagian akademis kampus. Langkah–langkah untuk

menjalankan program server adalah sebagai berikut :

1. Masuk kedalam sistem operasi windows sesuai dengan

requirement

yang telah disebutkan sebelumnya.

2. Kemudian

install

SQL Server 2000 pada komputer

server

untuk

keperluan database server.

3. Setelah SQL Server 2000

terinstall dengan benar, maka jalankan

Enterprise Manager

yang merupakan salah satu aplikasi dari SQL

Server 2000

untuk membuat

database

baru. Buatlah

database

baru dengan nama ’ypkaryasuite’.

4. Setelah

database

’ypkaryasuite’ telah terbuat, maka jalankan

Query Analyzer

untuk membuat tabel-tabel yang diperlukan

untuk mendukung berjalannya aplikasi. Adapun Query Language

yang harus dijalankan dalam pembuatan tabel adalah sebagai

berikut :



Untuk membuat Tabel MsUser

create table MsUser

(

Username varchar(7) not null primary key,

Name varchar (30) not null,

Password varchar (30) not null,

Status int not null

)



Untuk membuat Tabel MsAnnouncement

create table MsAnnouncement

(

Tanggal datetime not null primary key,

Announcement varchar(256) not null

)



Untuk membuat Tabel MsSubject

create table MsSubject

(

ClassCode varchar(5) not null primary key,

ClassSubject varchar(40) not null,

Meetings int not null

)



Untuk membuat Tabel MsUserSubject

create table MsUserSubject

(

Username varchar(7),

ClassCode varchar(5),

primary key (Username, ClassCode),

foreign key (Username) references MsUser,

foreign key (ClassCode) references MsSubject

)

5. Ketika tabel-tabel telah terbentuk, maka tugas dari pada

admin

adalah mengisi tabel-tabel tersebut dengan data-data yang ada

pada STIE YP Karya agar program dapat berjalan dengan baik.

Akan tetapi dalam perancangan dan pembuatan aplikasi

tabel-tabel diisi dengan data-data seperlunya untuk keperluan

pengujian. Adapun Query Language

yang dipakai antara lain :



Untuk mengisi tabel MsUser

insert into MsUser values ('0001001','IDING','0001001', '0')

insert into MsUser values ('0001002','NINING

KHOLILLAH','0001002', '0')

insert into MsUser values ('0001003','WULAN RATNA

JUWITA','0001003', '0')

insert into MsUser values ('0001004','RATU ANISA

OKTASARI','0001004', '0')

insert into MsUser values ('0001005','MUHAMMAD

NOVI','0001005', '0')

insert into MsUser values ('0001006','FELICIA','0001006', '0')

insert into MsUser values ('0001007','FITRIA DIAH

HASTUTI','0001007', '0')

insert into MsUser values ('0001008','SUSILAWATI','0001008',

'0')

insert into MsUser values ('0001009','CHRISTIAN DWI

SAHARJO','0001009', '0')

insert into MsUser values ('0001010','NESTA

ZULFIKAR','0001010', '0')



Untuk mengisi tabel MsSubject

insert into MsSubject values ('MP001','Manajemen Pemasaran

1',4)

insert into MsSubject values ('AK002','Akuntansi 2',5)

insert into MsSubject values ('PK002','Perpajakan 2',6)



Untuk mengisi tabel MsUserSubject

insert into MsUserSubject values ('0001001','MP001')

insert into MsUserSubject values ('0001002','AK002')

insert into MsUserSubject values ('0001003','PK002’)

pada langkah ini, tabel MsAnnouncement tidak diisi dengan data,

karena tabel itu akan otomatis ter-update

ketika

admin

menggunakan fungsi announcement

pada aplikasi.

6. Setelah tabel-tabel terbentuk dan terisi data-data dengan benar,

maka aplikasi siap dijalankan. Jalankan server.exe, maka

tampilannya adalah sebagai berikut :

4.5.2.1.1

Tampilan Server File

Gambar 4.30 Tampilan Server File

Gambar diatas merupakan tampilan aplikasi

server

ketika pertama kali

dijalankan. File server

dijalankan pertama kali agar admin

memilih direktori yang

digunakan sebagai file

sumber dari materi yang kemudian bisa di-download

oleh

user. Ketika admin

telah menentukan direktori yang tepat, admin

dapat langsung

menekan tombol ’Start’. Setelah tombol ’Start’ ditekan, maka akan muncul

’dialog box’ sebagai konfirmasi yang tampilannya sebagai berikut.

Gambar 4.31

Dialog Box Confirmation

Merupakan tampilan ’dialog box’ yang muncul ketika tombol ’start’

ditekan. Jika tombol ’cancel’ ditekan maka program akan kembali ke-form

sebelumnya untuk kembali memilih direktori, namun ketika tombol ’Start’

ditekan, maka

’file server’ akan berjalan didalam proses ’background’ (tidak

kelihatan didalam

windows

namun ada di

process manager) dan kemudian akan

memanggil form Server.

4.5.2.1.2

Tampilan Utama Server

Gambar 4.32 Tampilan Utama Server

Merupakan tampilan utama dari aplikasi pada sisi server

STIE YP Karya

Suite.

Pada bagian status, berfungsi sebagai informasi bagi

user

ketika

menjalankan fungsi ’call admin’ yang akan tertera pada program

client

yang

diberikan oleh admin

ketika admin

harus pergi meninggalkan komputer.

Gambar 4.34 Tampilan Messaging

Bagian kanan aplikasi terdapat textbox dengan

vertical scroll

yang

fungsinya untuk menampilkan percakapan dengan client

dan status ketika sebuah

pengumuman telah terkirim. Bagian bawahnya terdapat

textbox

yang berfungsi

sebagai input atas apa yang hendak dikirim oleh

admin. Setelah text diketik dan

receiver

telah ditentukan, maka admin

tinggal meng-klik tombol

’send’

yang ada,

dan pesan akan dikirim dan ditampilkan.

Gambar 4.35 Tampilan PC Status

Bagian kiri terdapat juga

textbox

yang berfungsi untuk menampilkan

status dari client-client

yang sedang login. Ditampilkan berupa nama dari user

dan

di

PC

mana

client

melakukan

login. Dan dibawahnya terdapat tombol untuk

mengirim pengumuman yang jika di-klik tampilan nya sebagai berikut.

Gambar 4.36 Tampilan Announcement

Pengumuman yang akan dikirim diketik pada bagian

textbox

kemudian

ketika pengumuman siap dikirim,

admin

hanya perlu menekan tombol

’Broadcast’, maka pesan akan dikirim ke seluruh client

yang sedang login dengan

pop-up window

dan akan secara otomatis meng-update database, sehingga client

dapat sewaktu-waktu melihat daftar 10 pengumuman terbaru ketika

login

dan

menggunakan fungsi ’Announcement History’.

Dalam pengoperasiannya, aplikasi

server

memiliki beberapa validasi

tertentu ketika dijalankan, beberapa

error message

akan muncul ketika

user

melakukan kesalahan dalam menjalankan program. Beberapa error message

yang

akan tampil antara lain, sebagai berikut :

Gambar 4.37

Error Message Receiver Not Defined

Merupakan tampilan pesan

error

ketika

admin

hendak mengirim pesan,

namun belum menentukan kemana pesan itu akan dikirim, maka program akan

memunculkan sebuah pesan error

agar admin

memilih tujuan pengiriman pesan.

Gambar 4.38

Error Message Forbidden Character

Merupakan pesan

error

yang muncul ketika

admin

mengirim teks yang

mengandung karakter ’|’ didalam pesannya. Karakter ’|’ tidak diperbolehkan

karena alur kode program yang menggunakan karakter ’|’ sebagai tanda dalam

protokol komunikasi antara program client-server.

Gambar 4.39

Dialog Box Konfirmasi Close Server

Merupakan tampilan dialog box

yang akan muncul ketika admin

berusaha

menutup program aplikasi

server

ketika masih ada client

yang terhubung dengan

server. Ketika

user

menekan tombol ’Yes’, maka koneksi

client

diputus paksa

karena server

di-close. Ketika user

menekan tombol ’No’, maka akan kembali ke

tampilan server.

4.5.2.2 Aplikasi Client

Berbeda dengan aplikasi

server

yang membutuhkan proses

instalasi

SQL Server 2000, untuk menjalankan aplikasi

client

tidak

perlu meng-install SQL Server 2000.

Pada aplikasi

client

paket instalasi yang disertakan terdapat

dalam satu direktori dimana dalam direktori tersebut terdapat file-file

pendukung untuk berjalannya aplikasi

client.

File-file

pendukung itu

antara lain :

1. 1 Direktori bernama ‘Sounds’ ; yang berisi 3

file

berekstensi

wav, fungsi dari file

ini adalah sebagai

file

sumber dari bunyi

yang dihasilkan program ketika melakukan fungsi tertentu,

yaitu ; ketika pesan masuk dari admin, ketika ada pengumuman

dari admin, dan ketika user

melakukan logout.

2.

1

file

ip.ypk ; file

ini berisi alamat komputer dimana program

server

dijalankan.

File

ini dapat disesuaikan dengan kebutuhan

ketika program

client

dijalankan dengan terlebih dahulu

mengisi password

untuk menjalankan fungsi ini, sehingga tidak

sembarang

user

dapat mengubah alamat komputer dari server.

Alamat yang tertera dalam file

tersebut dapat berupa ip address

ataupun nama komputer dimana server

dijalankan.

3.

1

file

pwd.ypk ;

file

yang berisi

password

untuk menjalankan

fungsi dari mengubah alamat komputer server

yang dijelaskan

sebelumnya. Secara

default,

password

diset dengan kata

‘default’, namun

admin

dapat mengubah sewaktu-waktu

dengan memanfaatkan fungsi ‘Set Password’ yang juga

disediakan dalam program client.

4.

1 file

client.exe ; merupakan file

utama dari aplikasi client.

Semua file

dan direktori tersebut terdapat dalam satu direkori

bernama ’STIEYPKaryaSuite’.

Langkah-langkah untuk meng-install

aplikasi client

adalah:

1. Satu tingkat dengan direktori tersebut terdapat

file

bernama

install.bat.

2. Jalankan file

install.bat.

File

install.bat

dibuat

dengan

menggunakan

Batch

Programming

yang isinya:

echo Install STIE YP Karya Suite

echo Scanning disk drive

echo Please wait

REG ADD

HKCU\Software\Microsoft\Windows\CurrentVersion\Run /v

clientSTIEYPKarya /t REG_SZ /d "%C:\Program

Files\STIEYPKaryaSuite\client.exe%" /f

xcopy STIEYPKaryaSuite "C:\Program Files\STIEYPKaryaSuite"

/I /S

echo. Install Complette!

Install.bat akan secara langsung meng-copy

direktori

STIEYPKaryaSuite

ke

C:\Program

Files\STIEYPKaryaSuite.

Install.bat juga akan menulis sebuah

string registry

agar

file

client.exe

dijalankan setiap kali startup windows.

Karena fungsi dari aplikasi client

ini yang tidak hanya untuk

melakukan komunikasi dengan server

tetapi juga sebagai pengaman

agar tidak sembarang

user

dapat menggunakan komputer tanpa

otorisasi yang jelas, maka setiap kali komputer dinyalakan program

client.exe otomatis dijalankan dan mengharuskan

user

untuk

login

terlebih dahulu untuk menggunakan komputer.

Maka ketika aplikasi

client

dijalankan tampilannya adalah

sebagai berikut :

4.5.2.2.1 Tampilan Client Login

Gambar 4.40 Tampilan Client Login

Tampilan awal daripada aplikasi

client

yang mengharuskan

user

untuk

melakukan

login, baik untuk menggunakan program ini maupun hanya sekedar

untuk mengunakan komputer.

Username

yang digunakan untuk melakukan login

yang terdiri dari 7

digit

angka adalah tidak lain NIM ataupun Kode Dosen, dan

password

yang digunakan ialah NIM ataupun Kode Dosen. User

dapat mengganti

password

yang secara

default

disediakan dengan mendatangi

admin

atau

mengirim

instant message

ke

admin

untuk mengubah

database server

karena

untuk versi ini belum tersedia fasilitas untuk penggantian password

milik

user.

Fungsi-fungsi lain yang ada dalam form

ini adalah fungsi untuk mengeset

alamat komputer server

dan mematikan komputer.

Gambar 4.41 Tombol

Set IP

Tombol dalam

form login

yang fungsinya untuk mengubah alamat

komputer

server

dijalankan. Ketika tombol di-klik maka akan tampil

form

berikut:

Gambar 4.42 Tampilan Enter Password

User

diharuskan untuk memasukan

password

terlebih dahulu untuk

menjalankan fungsi yang ada, hal ini ditujukan agar tidak sembarang user

dapat

manjalankan fungsi ini karena apabila pengaturan yang dibuat salah, maka

jalannya program akan terganggu.

Gambar 4.43 Tampilan Set Servers IP

Ketika tombol set server’s IP di-klik, maka muncul form

untuk mengganti

alamat komputer yang sudah tersedia sebelumnya. Dalam form

ini, alamat yang

sudah tertulis sebelumnya didapat dari membaca

file

ip.ypk yang disertakan

dalam paket installasi.

User

dapat mengganti alamat komputer

server dengan

mengisi textbox

yang tersedia lalu meng-klik tombol ‘set’.

Gambar 4.44

Error Message Please Fill IP

Pesan

error

yang muncul ketika

user

berusaha mengeset dengan

string

kosong, maka validasi program memunculkan peringatan agar

user

mengisi

alamat komputer server dengan benar.

Gambar 4.45 Tampilan Change Password

Form

yang akan tampil ketika

user

meng-klik tombol ‘Change

Password’.

Password

yang digunakan untuk mengganti alamat komputer

server

dapat diganti sesuai keinginan dengan menjalankan fungsi ini.

Password

yang

tertulis sebelumnya didapatkan program dengan membaca file

pwd.ypk yang juga

disertakan dalam paket installasi aplikasi

client.

Dengan memasukan

password

baru, program otomatis akan meng-overwrite

password lama yang ada dalam file

pwd.ypk.

Gambar 4. 46

Error Message Please Fill Password

Tampilan pesan error

yang akan muncul ketika user

menekan tombol ‘set’

tanpa mengisi textbox

yang ada.

Gambar 4.47

Error Message Password Didn’t Match

Tampilan pesan

error

yang akan muncul ketika

user

memasukan

password

baru yang berbeda ketika hendak dikonfirmasi ulang pada textbox

yang

kedua.

Gambar 4.48 Tombol

Turn Off PC

4.5.2.2.2 Tampilan Main Menu

Gambar 4.49 Tampilan Main Menu

Ketika

user

telah berhasil melakukan

login, maka tampilan

form login

akan tertutup dan memunculkan

form

baru yang merupakan tampilan dari

form

‘main menu’. Dari

form

inilah semua kontrol program dijalankan. Terdapat

kontrol ‘sound’ yang berfungsi bagi

user

untuk memilih apakah

user

ingin

mendengar suara ketika ada pesan masuk ataupun tidak.

Terdapat juga tombol

logout

yang berfungsi bagi

user

untuk

logout

dan

kembali ke halaman login

ketika selesai menggunakan program.

Keempat tombol yang ada dalam

form

‘main menu’ ini adalah yang

merupakan fungsi-fungsi utama dari aplikasi client.

4.5.2.2.3 Tampilan History Announcement

Gambar 4.50 Tampilan Announcement History

Ketika tombol ‘Announcement History’ di-klik maka akan tampil

form

‘Announcement History’ yang menampilkan sepuluh pengumuman terbaru yang

pernah di-broadcast

oleh

server

dengan mengambil data pengumuman dari

database server MsAnnouncement. Hal ini difungsikan agar setiap

user

tetap

dapat membaca pengumuman-pengumuman terbaru walapun ketika pengumuman

pertama kali disebarkan oleh admin, komputer client

sedang tidak dalam keadaan

login.

4.5.2.2.4 Tampilan Announcement

Gambar 4.51 Tampilan Announcement

Berbeda dengan

form

‘Announcement History’ yang muncul ketika

user

meng-klik tombol ‘Announcement History’. Form

‘Announcement’ muncul secara

tiba-tiba sebagai

pop-up window

setiap

admin

mengirim sebuah pengumuman

melalui aplikasi server

ketika ada user

yang login. Ketika

form

ini muncul, form

juga mengeluarkan suara

wav

sebagai tanda bahwa

admin

mengirim

pengumuman. Pengumuman yang disampaikan tidak hanya ditampilkan dalam

bentuk

form

ke

client

yang

login

tetapi juga ditulis kedalam

database server

MsAnnouncement

agar

user

yang sedang tidak

login

tetap dapat melihat

pengumuman dengan menjalankan fungsi ‘History Announcement’.

4.5.2.2.5 Tampilan Download File

Gambar 4.52 Tampilan Download File

Form

yang akan muncul ketika tombol ‘Download File’

ditekan. Dalam

form

ini

user

dapat men-download file-file

perkuliahan yang ada di komputer

server. User

dapat memilih file

yang akan di-download

dengan memasukan kode

mata kuliah pada detail

subject code

dan dengan memasukan detail

meeting.

Ketika detail materi telah dipilih, maka

user

dapat menekan tombol ‘access’

untuk melihat isi direktori

server

dari detail yang telah dipilih untuk memilih file

yang akan di-download.

Gambar 4.53 Error Message Detail Not Selected

Tampilan pesan error

yang muncul ketika user

menekan tombol ‘access’

yang ada di

form

‘file downloader’

tanpa mengisi detail ‘subject code’

maupun

‘meeting’.

Gambar 4.54 Tampilan File Downloaded

Form

yang akan muncul ketika user

menekan tombol ‘access’ dan dengan

detail yang telah terpilih dengan jelas. Pada form

ini user dapat memilih file

yang

akan di-download sesuai dengan direktori yang telah dipilih sebelumnya dengan

menekan nama

file

kemudian menekan tombol ‘access’. Maka akan tampil

animasi progress bar

dibawah yang menunjukan persentase proses download file.

Ketika

file

telah selesai dan sukses di-download, maka akan tampil notifikasi

berupa kotak pesan bagi user.

Gambar 4.55

Dialog Box File Already Exist

Kotak dialog yang muncul ketika user

memilih untuk men-download file

yang telah ada di direktori client

sebelumnya.

4.5.2.2.6 Tampilan Call Admin

Gambar 4.56 Tampilan Call Admin

Form

yang muncul ketika user

meng-klik tombol ‘call admin’ pada form

‘main menu’. Merupakan fungsi yang dapat digunakan user

untuk mengirimkan

pesan instant ke

admin

yang berada di komputer

server. Pesan yang ditulis ke

dalam textbox

bagian bawah akan terkirim ke komputer server

dengan meng-klik

tombol ‘Send’ dan juga akan ditampilkan percakapan antara

client-server

pada

textbox

bagian atas.

Status admin

yang tertulis pada bagian atas diberikan oleh admin

melalui

aplikasi

server

sehingga

user

mengetahui keberadaan

admin. Terdapat 3 macam

status yang tersedia secara

default

yaitu ‘Stand By’, ‘Away’, ‘Busy’ dan

admin

bisa menulis status sesuai keinginan terlepas dari status yang sudah disediakan

secara default.

4.5.2.2.7 Tampilan About

Gambar 4.57 Tampilan About

Tampilan

form

yang muncul ketika

user

meng-klik tombol ‘About’ pada

form

‘main menu’. Form

yang dibuat hanya sebagai informasi dari versi aplikasi

STIE YP Karya

Suite

dan nama-nama yang terlibat dalam proses pembuatan

aplikasi.

4.5.2.2.8 Tampilan Logout

Gambar 4.58

Dialog Box Logout

Tampilan dialog box yang muncul ketika user

meng-klik tombol ‘logout’

pada form Main. Apabila user

meng-klik tombol ‘No’ maka user

akan kembali

ke form ‘Main’. Namun apabila user meng-klik tombol ‘Yes’

maka program

kembali ke form Login

dan secara otomatis menghapus seluruh file-file

yang

telah di-download

ke direktori ‘Temp’.

4.6 Evaluasi

Kaidah tampilan server menurut

eight golden rules of interface design

yang

disediakan pada bab 2 :



Gambar 4.30 dirancang menurut kaidah no. 7



Gambar 4.31 dirancang menurut kaidah no. 4, no.3



Gambar 4.32- 4.35 dirancang menurut kaidah no. 7



Gambar 4.36 dirancang menurut kaidah no. 3, no.6



Gambar 4.37, 4.38 dirancang menurut kaidah no. 3



Gambar 4.39 dirancang menurut kaidah no. 3, no. 5

Kaidah tampilan client menurut

eight golden rules of interface design

yang

disediakan pada bab 2 :



Gambar 4.40 dirancang menurut kaidah no. 4, no. 7



Gambar 4.41 - 4.43 dirancang menurut kaidah no. 2



Gambar 4.44, 4.46, 4.47 dirancang menurut kaidah no. 3



Gambar 4.48 dirancang menurut kaidah no. 2



Gambar 4.49 dirancang menurut kaidah no. 2, no. 4, no. 7, no 8



Gambar 4.50 dirancang menurut kaidah no. 7



Gambar 4.52 dirancang menurut kaidah no. 2, no. 3, no.8



Gambar 4.53 dirancang menurut kaidah no. 3



Gambar 4.54 dirancang menurut kaidah no. 3, no. 4, no. 7.



Gambar 4.55 dirancang menurut kaidah no. 5, no 6



Gambar 4.56 dirancang menurut kaidah no. 7



Gambar 4.57 dirancang menurut kaidah no. 4



Gambar 4.58 dirancang menurut kaidah no. 3, no. 6

Semua perancangan warna, citarasa

icon, dan perancangan proses kerja

form

adalah menurut kaidah eight golden rules of interface design yang diberikan pada bab 2

secara tepatnya adalah menurut kaidah no. 1 yang menjaga segala kekonsistenan dari

segala unsur.