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

(1)

9 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.

(2)

10

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

(3)

11

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 data base dapat

terbagi dalam empat komponen penting yaitu : data,

(4)

12

 T  id username password

Edit Copy Delete 1 admin Admin

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:

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

(5)

13

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

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.

(6)

14  Tabel Event

Tabel event menyimpan nama dan waktu dari event itu

diadakan. Detail dari tabel ini adalah seperti gambar

dibawah:

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.

Gambar 3.6 Event tab structure  T  event tahun bulan tanggal

(7)

15

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:

Gambar 3.7 Guestbook tab browse

Navigasi:

- Untuk merubah nama, email klik change

- Apabila ingin keluar klik export

(8)

16

Keterangan:

Gambar 3.8 Guestbook tab structure

Navigasi:

- Untuk merubah nama, email klik change

- Klik browse untuk mencari nama, email

Keterangan:

(9)

17  Tabel Image

Fungsi utama dari tabel ini adalah untuk menyimpan

nama file yang telah diupload oleh admin. Detail dari

tabel Image adalah sebagai berikut:

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:

(10)

18

Gambar 3.6 Tabel Image tab structure

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 (hypertext transfer protocol) merupakan

protokol yang digunakan untuk mentransfer

dokumen–dokumen web yang ditulis atau berformat

HTML.

(11)

19

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

perintah-perintah yang diberikan akan sepenuhnya dijalankan

di server, tetapi disertakan pada dokumen HTML.

PHP dikembangkan khususnya untuk mengakses

dan memanipulasi data yang ada di databa se sever

open source seperti MySQL, dengan demikian tingkat

(12)

20

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 Drea mweaver 8 adalah sebuah

HTML editor profesional untuk mendesain secara

visual dan mengelola situs atau halaman web.

Dreamwea ver 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.

Dreamwea ver 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

(13)

21 1.4.6. Source Code

Galery .php

<html>

<head>

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

$event = $_POST["event"]; $date = $_POST["date"];

$tahun = substr($date,6,10); $bulan = substr($date,0,2); $tanggal = substr($date,3,2); //include ("function.php"); ?>

<?php

$con=mysqli_connect("localhost","root ","","arsipuksw"); ?>

<form method="post"

action="function.php"

(14)

22 UKSW</H1></td></tr> <tr></tr>

<tr><td colspan="3" align="center"><h3>List

Event</h3></td></tr>

<tr><table border="0" align="center"> <?php

$sql="SELECT * FROM event";

$result =

mysqli_query($con, $sql);

while($row=mysqli_fetch_row($res ult)){

echo "<tr>";

echo "<td align='left' style='width:200px'><a

href='index.php?page=view_galeri&&eve nt=$row[0]'>(+) $row[0]</a></td>";

echo "</tr>"; }

echo "<tr><td colspan='3'>";

$sql = "SELECT count(image) FROM IMAGE";

$result =

mysqli_query($con, $sql);

echo "<u>Total Photo : $row[0]</u>";

}

$sql = "SELECT count(event) FROM event";

$result =

(15)

23

echo " || <u>Total Event : $row[0]</u>";

}

echo "</td></tr>";

?>

</table></tr> </table>

</form> </body> </html>

Keterangan:

Source code ini berisi tentang tanggal pemungut, tempat event,

tempat tanggal, tahun, local host, arsip. Event bisa ditambah dan

dihapus, kalau ditambah lewat tanda (+) dan kalau dihapus lewat

(-) serta bisa menambah tanggal event. Event total bisa dilihat

lewat list event. Disetiap event bisa dihapus satu per satu, dan