BAB IV PERANCANGAN SISTEM
4.1
Perancangan sistem Perancangan sistem adalah suatu struktur sistem dimana setiap elemen
yang terpisah diatur dalam kesatuan yang utuh dan bermanfaaat. Perancangan ini dibuat dengan maksud untuk memenuhi kebutuhan para pengguna sistem. rancangan sistem yang akan digambarkan diperancangan sistem di market place kedalam bentuk website, Rancangan ini meliputi penggambaran dalam bentuk Use Case, Activity Diagram, Sequence Diagram, Class Diagram, dan Struktur rancangan tampilan website. 4.2
Use Case Diagram Use Case merupakan sebuah teknik yang digunakan dalam pengembangan
sebuah software atau sistem informasi untuk menangkap kebutuhan fungsional dari sistem yang bersangkutan, Use Case menjelaskan interaksi yang terjadi antara ‘aktor’ – inisiator dari interaksi sistem itu sendiri dengan sistem yang ada, sebuah Use Case direpresentasikan dengan urutan langkah yang sederhana. Adapun aktor adalah sesuatu atau seseorang yang ada di luar sistem dan ikut berperan serta dalam aktifitas sistem. Aktor bisa berupa: End User, perangkat hardware, bahkan sistem yang lain. Setiap use case merupakan sebuah
47
48
seri yang lengkap dari sebuah event kejadian, dilihat dari sudut pandang aktor. Fokus dari sebuah use case adalah menjelaskan bagaimana mencapai sebuah tujuan atau goal.
System DAFTAR
LOGIN
MELIHAT & EDIT PROFIL user
PASANG IKLAN
LOGOUT
Gambar 4.10 Use Case Diagram
49
4.3
Perancangan Prosedur Activity Diagram Perancangan prosedur dapat terlihat jelas dari gambaran – gambaran yang
telah digambarkan pada use case yang meliputi berbagai activity seperti daftar login, pasang iklan, sampai ke tahap logout. 4.3.1 Activity Diagram daftar Aliran sistem daftar pada website adalah sebagai berikut : 1.
User memilih dafar
2.
Lalu sistem menampilkan halaman daftar
3.
Lalu user memasukkan nama lengkap, e-mail, password dan confirm password.
4.
Ketika user selesai melakukan daftar , maka sistem menampilkan pesan
USER
SISTEM
DAFTAR
MENAMPILKAN HALAMAN DAFTAR
MENGISI EDITAN DAFTAR
EDITAN DAFTAR
MENEKAN DAFTAR
MENAMPILKAN PESAN TERIMA KASIH TELAH MENDAFAR
TERDAFTAR
Gambar 4.11 Activity Diagram daftar
50
4.3.2 Activity Diagram Login Aliran sistem login pada website adalah sebagai berikut : 1.
User memasukkan username dan password.
2.
Ketika login sukses maka tampilan halaman depan akan ditampilkan oleh sistem.
USER
SISTEM
LOGIN
LOGIN GAGAL PERIKSA KEMBALI EMAIL DAN PAS
MENAMPILKAN HALAMAN DEPAN
T
SUKSES Y
AKUN TELAH LOGIN
Gambar 4.12 Activity Diagram Login
51
4.3.3 Activity Diagram Melihat dan Mengedit Profil Pribadi Aliran sistem dalam melihat dan mengedit profil sebagai berikut : 1.
User menekan menu setting.
2.
Sistem akan menampilkan setting profile.
3.
Lalu user mengisi editan profil dan save
USER
SISTEM
SETTING
MENAMPILKAN SETTING PROFIL
MENGISI EDITAN PROFIL
TAMPILAN EDITAN PROFIL
SAVE
Gambar 4.13 Activity Diagram Melihat dan Mengedit Profil
52
4.3.4 Activity Diagram Memasang iklan Aliran sistem dalam memasang iklan sebagai berikut : 1.
User menekan menu pasang iklan.
2.
Sistem akan menampilkan postingan edit iklan.
3.
User melakukan postingan dan sisem menampilkan peesan postingan iklan sukses
USER
SISTEM
PASANG IKLAN
MENAMPILKAN POSTINGAN IKLAN
MENGISI EDITAN PASANG IKLAN
TAMPILAN EDITAN POSTINGAN
POSTING
MENAMPILKAN PESAN POSTING IKLAN SUKSES
Gambar 4.14 Activity Diagram memasang iklan
53
4.3.5 Activity Diagram LogOut Aliran sistem log out sebagai berikut : 1.
Pengguna menekan menu label Logout.
2.
Sistem akan menampilkan halaman depan
3.
Dan sistem akan menampilkan halaman depan login pada web tersebut
USER
SISTEM
LOGOUT
MENAMPILKAN MENAMPILKAN HALAMAN DEPAN
Gambar 4.15 Activity Diagram Log Out 4.4
Class Diagram Class adalah deksripsi kelompok dengan objek – objek dengan property,
prilaku (operasi) , dan relasi yang sama. Sehingga dengan adanya class diagram dapat memberikan pandangan global atas sebuah sistem. Hal tersebut tercermin dari class-class yang ada dan relasinya satu dengan lainnya.
54
Untuk mendesain sebuah sistem, dibutuhkan juga class diagram dan objek diagram. Sedangkan yang dimaksud objek diagram adalah diagram yang memberikan gambaran struktur model sebuah sistem, dalam kurun waktu tertentu. Obyek diagram lebih konkrit daripada kelas diagram, dan sering digunakan untuk memberikan contoh-contoh, ataupun dalam menguji kasus untuk diagram kelas. Diagram Objek ini berfokus pada atribut, objek dan hubungan/korelasi antar objek.
iklan N
N
1
1 CS
-cs_id Ascending -cs_nama -cs_email -cs_pass -cs_kota -cs_hp -cs_bb -cs_line -cs_wechat -cs_kakao -cs_alamat -cs_tentang -cs_tgl -cs_status_member -cs_pp -cs_cover -cs_emailver -cs_md5ver +construct() +forgotMd5() +getTotalProduk() +getStatus() +getCsUrl() +csDaftar() +isSessionMe() +updateCover() +updatePp() +iklanAktif() +forgot() +hapus_cs() +ver()
daerah - daerah_id -daerah_nama -daerah_quote +construct() +getListSelectDae rah()
-iklan_id -cs_id -daerah_id -kategori_sub_id -iklan_nama -iklan_harga -iklan_tgl -iklan_tgl_up -iklan_kondisi -iklan_tipe -iklan_tentang +construct() +getBigFirstGambar() +getSmallFirstGambar() +getListGambar() +getArrayGambar() +getJmlPaging() +getListQuery() +getListIklanCs() +getIdNewIklan() +pasangIklan() +upPosisi() +IklanTerkait()
Gambar 4.16 Class Diagram
N
1 kategori_sub -kategori_sub_id -kategori_id -kategori_sub_nama +construct() N
1
kategori -kategori_id -kategori_nama - kategori_gbr +construct() +getListSelectKategori() +getListPasangSelectKatego ri()
55
4.5
Sequence Diagram Sequence diagram (diagram urutan) adalah suatu diagram yang
memperlihatkan atau menampilkan interaksi-interaksi antar objek di dalam sistem yang disusun pada sebuah urutan atau rangkaian waktu. Interaksi antar objek tersebut termasuk pengguna, display. Sequence diagram digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai sebuah respon dari suatu kejadian/even untuk menghasilkan output tertentu. Sequence Diagram diawali dari apa yang me-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan. Diagram ini secara khusus berasosiasi dengan use case diagram. Sequence diagram juga memperlihatkan tahap demi tahap apa yang seharusnya terjadi untuk menghasilkan sesuatu didalam use case. Sequence diagram juga dapat merubah atribut atay method pada class yang telah dibentuk oleh class diagram, bahkan menciptakan sebuah class baru. Sequence diagram memodelkan aliran logika dalam sebuah sistem dalam cara yang visual. Dibawah ini merupakan gambaran sequence diagram market place :
56
4.5.1 Sequence Diagram daftar Sequence Diagram daftar pada perancangan market place berbasis website ini adalah sebagai berikut :
USER
DATABASE
HOME
DAFTAR
verifikasi SUKSES
MENAMPILKAN PESAN TELAH TERDAFTAR
Gambar 4.17 Sequence Diagram daftar
57
4.5.2 Sequence Diagram login Sequence Diagram login
pada perancangan market place berbasis
website ini adalah sebagai berikut :
USER
LOGIN PAGE
DATABASE
HOME
LOGIN
EMAIL & PASS
SUKSES
MENAMPILKAN HALAMAN DEPAN
Gambar 4.18 Sequence Diagram login
58
4.5.3 Sequence Diagram edit profil Sequence Diagram edit profil pada perancangan market place berbasis website ini adalah sebagai berikut :
USER
EDIT PROFIL
DATABASE
HOME
EDIT DATA
DATA BERUBAH
SUKSES
MENAMPILKAN DATA YANG DI UBAH
Gambar 4.19 Sequence Diagram edit profil
59
4.5.4
Sequence Diagram pasang iklan
Sequence Diagram pasang iklan pada perancangan market place berbasis website ini adalah sebagai berikut :
USER
DATABASE
HOME
PASANG IKLAN
POSTING
POSTINGAN SELESAI
Gambar 4.20 Sequence Diagram pasang iklan
60
4.5.5
Sequence Diagram Log Out
Sequence Diagram Log Out pada perancangan market place berbasis website ini adalah sebagai berikut :
USER
DATABASE
HOME
LOG OUT
SELESAI
MENAMPILKAN HALAMAN DEPAN
Gambar 4.21 Sequence Diagram LogOut 4.6
Struktur Tabel Struktur tabel merupakan urutan isi atau data – data item yang ada pada
tabel database. Rancangan struktur ini dimaksudkan untuk dapat melakukan kegiatan – kegiatan dalam pencarian data untuk mempermudah kerja sistem. Struktur tabel yang terdapat pada market place adalah sebagai berikut :
61
a.
b.
Tabel 4.1 Struktur Tabel Artikel Nama Tabel
: Tabel Artikel
Primary Key
: id_art
No
Nama Field
Type
Size
1
id_art
bigint
20
2
judul
varchar
100
3
Sub_judul
varchar
200
4
isi
text
-
Tabel 4.2 Struktur Tabel cs (coustomer) Nama Tabel
: Tabel cs
Primary Key
: cs_ id
No
Nama Field
Type
Size
1
cs_ id
bigint
20
2
cs_nama
varchar
50
3
cs_email
varchar
50
4
cs_pass
varchar
20
5
cs_kota
varchar
20
6
Cs_hp
bigint
12
7
Cs_bb
varchar
10
8
Cs_line
varchar
30
62
c.
9
Cs_wechat
Varchar
10
10
Cs_kakao
varchar
30
11
Cs_alamat
varchar
70
12
Cs_tentang
text
-
13
Cs_tanggal
varchar
50
14
Cs_status_member
enum
(‘1’,’2’,’3’,’4’)
15
Cs_pp
varchar
2000
16
Cs_cover
varchar
2000
17
Cs_emailver
enum
(‘0’,’1’)
18
Cs_md5ver
varchar
25
Tabel 4.3 Struktur Tabel cs_forgot Nama Tabel
: Tabel cs_forgot
Primary Key
: cs_id
No
Nama Field
Type
Size
1
Cs_id
bigint
20
2
Pass_new
varchar
20
3
Md5_link
varchar
30
63
d.
e.
Tabel 4.4 Struktur Tabel daerah Nama Tabel
: Tabel daerah
Primary Key
: daerah_id
No
Nama Field
Type
Size
1
Daerah_id
bigint
20
2
Daerah_nama
varchar
200
3
Daerah_quote
varchar
500
Tabel 4.5 Struktur Tabel iklan Nama Tabel
: iklan
Primary Key
: iklan_id
No
Nama Field
Type
Size
1
Iklan_id
bigint
20
2
Cs_id
bigint
20
3
Daerah_id
bigint
20
4
Kategori_sub_id
bigint
20
5
Iklan_nama
varchar
200
6
Iklan_harga
bigint
20
7
Iklan_tgal
varchar
50
varchar
20
8
Iklan_tgal_up
64
f.
g.
9
Iklan_kondisi
enum
(‘baru’,’bekas’)
10
Iklan_tipe
enum
(‘dicari’,’djual’,’sewa’,’jasa’)
11
Iklan_tentang
text
-
Tabel 4.6 Tabel iklan_img Nama Tabel
: iklan_img
Primary Key
: id_img
No
Nama Field
Type
Size
1
id_img
bigint
20
2
Iklan_id
bigint
20
3
url_gbr_thumb
varchar
2000
4
url_gbr_big
varchar
2000
Tabel 4.7 Tabel kategori Nama Tabel
: Tabel kategori
Primary Key
: kategori_id
No
Nama Field
Type
Size
1
kategori_id
bigint
20
2
kategori_nama
varchar
100
3
kategori_gbr
varchar
1000
65
h.
i.
Tabel 4.8 Tabel kategori_sub Nama Tabel
: kategori_sub
Primary Key
: kategori_sub_id
No
Nama Field
Type
Size
1
kategori_sub_id
bigint
20
2
kategori_ id
bigint
20
3
kategori_sub_nama
varchar
200
Tabel 4.9 Tabel kepod Nama Tabel
: Tabel kepod
Primary Key
: id_ kepod
No
Nama Field
Type
Size
1
id_ kepod
bigint
20
2
org_kepod
varchar
20
3
Sek_kepod
varchar
50
66
4.7
Struktur Program Struktur program adalah suatu konsep pembuatan yang mempunyai fungsi
untuk mengelompokkan instruksi kedalam sub program fungsional dimana setiap sub program tersebut memiliki tugas dan fungsi tertentu yang digunakan untuk mendukung dari keseluruhan program yang dibuat. Struktur program yang dibuat adalah sebagai berikut :
STRUKTUR PROGRAM
INPUT
DATA USER
PROSES
OUPUT
PASANG IKLAN
HASIL POSTINGAN IKLAN
Gambar 4.22 Struktur Program
67
4.8
Perancangan Struktur Menu Struktur menu merupakan bentuk umum dalam suatu perancangan aplikasi
yang dapat memudahkan pengguna dalam menggunakan sistem yang dibangun. Dengan adanya struktur menu ini, maka proses pengolahan data diharapkan lebih cepat dilakukan, sehingga keterlambatan dalam penyajian data dapat ditekan seminimal mungkin. Struktur menu yang dibuatkan dalam sistem ini terdiri dari menu-menu dan submenunya. Dapat dilihat dari gambar berikut :
MENU UTAMA
LOGIN
DAFTAR
MY PAGE
TAMPILAN HALAMAN DEPAN LOGIN
SETTING
LOGOUT
Gambar 4.23 Struktur Menu
PASANG IKLAN
TAMPILAN POSTING
68
4.9
Perancangan Tampilan Form Perancangan
antar
muka
atau
perancangan
interface
merupakan
perancangan form-form yang ada dalam aplikasi. Disini menggambarkan perancangan form – form yang akan divisualisasikan melalui Microsoft Visio. Dengan adanya antar muka form ini berbagai pengguna baik, pengguna awam maupun yang sudah berpengalaman dapat mengoperasikan program ini tanpa adanya kesulitan yang besar. 1. Form daftar
LOGIN
PASANG IKLAN
PENCARIAN
Nama Lengkap
SEMUA DAERAH
SEMUA KATEGORI
xxx
Email
xxx
Password
xxx
Confirm
xxx
DAFTAR
Daftar
Gambar 4.24 Form daftar
CARI
69
2. Form Tampilan Login
PASANG IKLAN
MY PAGE
PENCARIAN
DIREKTORI DAERAH
SEMUA DAERAH
SETING
SEMUA KATEGORI
LOGOUT
CARI
DIREKTORI KATEGORI
Gambar 4.25 Form Tampilan Login 3. Form Tampilan Profil
PASANG IKLAN
MY PAGE
PENCARIAN
SEMUA DAERAH
SETING
SEMUA KATEGORI
FOTO PROFIL
HOME IKLAN ALAMAT
KONTAK
Gambar 4.26 Form Tampilan Profil
LOGOUT
CARI
70
4. Form Tampilan Setting profil
PASANG IKLAN
MY PAGE
PENCARIAN
SEMUA DAERAH
SETING
SEMUA KATEGORI
SETING MENU FOTO PROFIL
Gambar 4.27 Form Tampilan Setting profil
LOGOUT
CARI
