T1__BAB III Institutional Repository | Satya Wacana Christian University: Galery Foto Event UKSW T1 BAB III

BAB III
PERANCANGAN SISTEM

1.1. Prototyping Model
Kadang-kadang klien hanya memberikan beberapa
kebutuhan umum software tanpa detail input, proses atau
detail output. Di lain waktu mungkin dimana tim pembangun
(developer) tidak yakin terhadap efisiensi dari algoritma
yang digunakan, tingkat adaptasi terhadap sistem operasi
atau rancangan form user interface. Ketika situasi seperti ini
terjadi

model

prototyping

sangat

membantu

proses

pembangunan software. Secara keseluruhan proses pada
model prototyping dapat digambarkan seperti pada gambar
berikut.

Gambar 3.1 Model Proses Prototyping

9

Pada gambar diatas ada tiga tahap yang dilakukan secara
berulang-ulang atau bisa juga disebut dengan iterasi untuk
mendapatkan hasil software yang sesuai dengan kebutuhan.
Tiga tahap tersebut antara lain:


Pengumpulan kebutuhan: developer dan klien bertemu

dan menentukan tujuan umum, kebutuhan yang
diketahui dan gambaran bagian-bagian yang akan
dibutuhkan berikutnya. Detil kebutuhan mungkin tidak



dibicarakan disini, pada awal pengumpulan kebutuhan.
Perancangan:

perancangan dilakukan cepat

dan

rancangan mewakili semua aspek software yang
diketahui, dan rancangan ini menjadi dasar pembuatan


prototype.
Evaluasi prototype: klien mengevaluasi prototype yang

dibuat dan digunakan untuk memperjelas kebutuhan


software.

Agar model ini bisa berjalan dengan baik, perlu
disepakati bersama oleh klien dan developer bahwa
prototype yang dibangun merupakan alat untuk
mendefinisikan kebutuhan software.

1.2. Gallery Prototype I
Gallery merupakan komponen utama dari sistem ini
karena tujuan utama dari sistem ini adalah untuk mengelola
dan menampilkan foto-foto event. Untuk mempermudah

10

pemahaman tentang bagaimana alur untuk melihat foto
dalam sebuah event akan direpresentasikan dalam diagram
alir sebagai berikut:

Gambar 3.2 Flowchart Gallery Admin

1.3. Database
Database merupakan kumpulan data yang pada

umumnya menggambarkan aktivitas-aktivitas dan pelakunya
dalam suatu organisasi. Penggunaan database ditujukan
untuk

menyimpan,

mencari,

mengelompokkan

dan

membagikan suatu informasi. Sebuah database bisa memiliki
beberapa tabel dan tabel-tabel tersebut dapat saling
berhubungan maupun saling lepas. Sistem database dapat
terbagi dalam empat komponen penting yaitu : data,
hardware, software, dan user .
11

1.4. Build/Revise, Mock-Up
Pada perancangan ini langkah awal yang dilakukan
adalah menyiapkan sebuah database yang akan menyimpan
seluruh informasi yang akan ditampilkan ke dalam web.
Langkah pertama adalah membuat database baru dengan
nama ‘arsipuksw’. Dalam database ‘arsipuksw’ dibuat empat
buah tabel sesuai dengan kebutuhan yaitu:


Tabel Admin
Pada proses login sebagai admin sistem, isi dari tabel
Admin inilah yang akan diidentifikasi. Apabila inputan
username dan password dari user sama dengan
username dan password yang ada di dalam tabel ini
maka user tersebut berhasil menjadi admin sistem.
Detail dari tabel ini adalah sebagai berikut:
T
Edit

Copy

Delete

id
1

username
admin

password
Admin

Gambar 3.3 Tabel Admin Tab Browse

Navigasi:
o Klik admin untuk membuka dan melihat username
serta password
o Apabila username ingin menghapusnya klik pada
delete
o Klik export apabila ingin keluar username

12

Keterangan:
Pada proses login sebagai admin sistem, isi dari tabel
Admin inilah yang akan diidentifikasi. Apabila inputan
username dan password dari user sama dengan
username dan password yang ada di dalam tabel ini
maka user tersebut berhasil menjadi admin sistem
#

Name

Type

Collation

Attributes

Null

Default

Extra

Action

Gambar 3.4 Tabel Admin Tab Structure

Navigasi:
-

Klik browse untuk membuka id, name, password

-

Kolom change untuk merubah name dan password

-

Apabila mau tambah nama klik add

Keterangan:
Pada proses structure name berisi id, username,
password. Pada Type berisi kode int(11), varchar(255).
Pada collaction berisi latin1_swedish_ci. Attributes
berisi kosong. Kolom default berisi none. Dan extra
berisi auto_increment.

13



Tabel Event
Tabel event menyimpan nama dan waktu dari event itu
diadakan. Detail dari tabel ini adalah seperti gambar
dibawah:
T

event

tahun

bulan

tanggal

Gambar 3.5 Event tab browse

Navigasi:
-

Klik delete untuk menghapus event

-

Apabila ingin merubah judul event klik change

-

Klik export untuk keluar username

Keterangan:
Tabel event menyimpan nama dan waktu dari event itu
diadakan.

# Name

Type

Collation Attributes

Null

Default

Gambar 3.6 Event tab structure

14

Extra

Action

Navigasi:
-

Apabila ingin merubah nama event, waktu klik
change

-

Klik browse untuk mencari event, waktu, id

Keterangan:
Setelah database siap dan telah diketahui gambaran
umum tentang kebutuhan dari sistem maka pada tahap
kedua ini sistem akan langsung dibangun guna
mendapatkan prototype setiap komponen dari sistem.


Tabel Guestbook
Semua request dari user akan disimpan dalam tabel ini,
tabel Guestbook, gambar dibawah adalah detail
tabelnya:
T

id

nama

email

komentar

Gambar 3.7 Guestbook tab browse

Navigasi:
-

Untuk merubah nama, email klik change

-

Apabila ingin keluar klik export

-

Klik delete apabila ingin menghapus

15

Keterangan:
Setelah database siap dan telah diketahui gambaran
umum tentang kebutuhan dari sistem maka pada tahap
kedua ini sistem akan langsung dibangun guna
mendapatkan prototype setiap komponen dari sistem.
#

Name

Type

Collation

Attributes

Null

Default

Extra

Action

Gambar 3.8 Guestbook tab structure

Navigasi:
-

Untuk merubah nama, email klik change

-

Klik browse untuk mencari nama, email

Keterangan:
Setelah database siap dan telah diketahui gambaran
umum tentang kebutuhan dari sistem maka pada tahap
kedua ini sistem akan langsung dibangun guna
mendapatkan prototype setiap komponen dari sistem.

16



Tabel Image
Fungsi utama dari tabel ini adalah untuk menyimpan
nama file yang telah diupload oleh admin. Detail dari
tabel Image adalah sebagai berikut:

#

Name

Type

Collation

Attributes

Null

Default

Extra

Action

Gambar 3.5 Tabel Image tab browse

Navigasi:
-

Klik browse untuk mencari id, nama, email, waktu

-

Apabila ingin merubah nama dan email klik
change

Keterangan:
Setelah database siap dan telah diketahui gambaran
umum tentang kebutuhan dari sistem maka pada tahap
kedua ini sistem akan langsung dibangun guna
mendapatkan prototype setiap komponen dari sistem.

17

# Name Type Collation Attributes

Null

Default

Extra Action

Gambar 3.6 Tabel Image tab structure

Setelah database siap dan telah diketahui gambaran
umum tentang kebutuhan dari sistem maka pada tahap
kedua ini sistem akan langsung dibangun guna
mendapatkan prototype setiap komponen dari sistem.
Komponen-komponen tersebut antara lain yaitu:

1.4.1. Admin Side

Pada sub bab ini akan dibahas mengenai apa saja
komponen-komponen yang akan dibangun pada
admin side, sesuai dengan keinginan klien yang
merupakan hasil dari tahap Listen To Customer.
1.4.2. HTML
HTML

(Hypertext

Markup

Language)

merupakan salah satu format yang digunakan dalam
dokumen dan program yang berjalan di web browser .
HTTP
protokol

(hypertext

transfer

protocol)

merupakan

yang

digunakan

untuk

mentransfer

dokumen–dokumen web yang ditulis atau berformat
HTML.

18

Dikatakan markup language karena HTML
berfungsi untuk memperindah file teks biasa untuk
ditampilkan pada program web browser . Hal ini
dilakukan dengan menambahkan elemen atau sering
disebut sebagai tag-tag pada file teks biasa tersebut.
1.4.3. MySQL
MySQL adalah Relation Database Manajemen
System (RDBMS) yang menggunakan standard SQL
(Structured Query Language), yaitu bahasa standar

yang paling banyak digunakan untuk mengakses
database. Suatu database relational menyimpan data

dalam tabel-tabel terpisah, hal ini memungkinkan
kecepatan dan fleksibelitas. SQL dirancang khusus
untuk berkomunikasi dengan database.
1.4.4. PHP
PHP (Personal Home Page) adalah bahasa
server-side scripting yang menyatu dengan HTML

untuk membuat halaman web yang dinamis. Maksud
dari server-side scripting adalah sintaks dan perintahperintah yang diberikan akan sepenuhnya dijalankan
di server , tetapi disertakan pada dokumen HTML.
PHP dikembangkan khususnya untuk mengakses
dan memanipulasi data yang ada di database sever
open source seperti MySQL, dengan demikian tingkat

kompabilitasnya terhadap database server gratis

19

seperti MySQL sangat baik. (Referensi Coding
Pemrograman Web HTML, ASP, PHP Tingkat
Dasar,2005).

Bahasa ini mempunyai kelebihan yaitu open
source (gratis), kompabilitasnya dengan berbagai

macam jenis database, dan dapat digunakan dengan
sistem operasi dan web server apapun.
1.4.5. Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 adalah sebuah

HTML editor profesional untuk mendesain secara
visual dan mengelola situs atau halaman web.
Dreamweaver memiliki ruang kerja, fasilitas, dan

mampu

untuk

meningkatkan

produktivitas

dan

efektivitas dalam desain maupun membangun suatu
situs web, serta dilengkapi dengan fasilitas untuk
manajemen situs yang cukup lengkap.
Dreamweaver mempunyai kemampuan bukan

hanya sebagai software untuk desain web saja, tetapi
juga untuk menyunting kode serta pembuatan aplikasi
web

dengan

menggunakan

berbagai

bahasa

pemrograman web, antara lain JPS, PHP, ASP dan
COLDFUSION.

20

1.4.6. Source Code
Galery .php






$(function() {
$( "#datepicker" ).datepicker();
});








GALLERY
EVENT

21

UKSW

List
Event