bab 3 analisa dan perancangan sistem 3.1 gambaran …thesis.binus.ac.id/doc/bab3/2006-2-01117-if-bab...

BAB 3

ANALISA DAN PERANCANGAN SISTEM

3.1 Gambaran Umum Mal Puri Indah

3.1.1 Sejarah Mal Puri Indah

Mal Puri Indah yang terletak di dekat Kantor Walikota Jakarta Barat, tepatnya

berada di Jl. Puri Agung, Puri Indah, Jakarta, didirikan oleh PT Antilope Madju Puri

Indah bekerja sama dengan Procon Matra Indah dan Jones Lang Wotton, agen properti

yang berpusat di Singapura. Sebagai anak perusahaan dari Grup Pondok Indah, PT

Antilope Madju Puri Indah yang biasa disingkat PT AMPI selain mengelola Mal Puri

Indah, juga berkecimpung di bidang real estate. Mal Puri Indah mulai beroperasi sejak

tanggal 17 Januari 1997 (Soft Opening) dan resmi dibuka, sekaligus menjadi hari jadi

Mal pada tanggal 1 November 1997 (Grand Opening) yang disaksikan secara bersama-

sama oleh Menpera pada saat itu, Ir. Akbar Tanjung, Mendikbud Wardiman

Djojonegoro, serta Guberbur DKI Jakarta Sutiyoso.

Menpera Ir. Akbar Tanjung menandatangani prasasti Mal Puri Indah sebagai

tanda diresmikannya pusat perbelanjaan tersebut. Sedangkan Guberbur DKI Jakarta

Sutiyoso menandatangani prasasti Dunia Rekreasi Keluarga – Negeri Kartun milik PT

Anugerah Unggul Persada, yang membangun sarana hiburan dan rekreasi untuk keluarga

berupa arena permainan ketangkasan dan simulator di lantai dua Mal Puri Indah.

Peresmian ini juga dihadiri oleh direksi PT AMPI (Grup Pondok Indah) seperti

Sudwikatmono, Yan Damardi, Direktur Utama PT AMPI Ir. Deddy Kusuma dan sekitar

800 undangan lainnya.

27

Tahap pembangunan Mal Puri Indah ini dimulai dengan pembangunan Bor

Pilling dan Fondasi pada tanggal 24 Agustus 1995, kemudian dilanjutkan dengan Upper

Structure dan Finishing dimulai dari tanggal 20 September 1995. Total investasi yang

dikeluarkan sebesar Rp. 250 miliar (Rp. 150 miliar untuk gedung dan Rp. 100 miliar

untuk tanah). Dibangun di atas lahan seluas 6 hektar dengan luas bangunan 120.906,80

m², Mal Puri Indah terdiri dari basement (46.000 m²), lantai dasar (24.900,80 m²), lantai

1 (25.000 m²), dan lantai 2 (25.000 m²), serta dilengkapi dengan berbagai fasilitas seperti

tempat parkir yang berlokasi di basement dan di luar gedung, food court, kantor pos,

kantin karyawan, mushola, dan center court untuk pusat kegiatan acara dan eksibisi

seluas 460,80 m². Dengan demikian, PT AMPI telah mentaati peraturan rencana Tata

Kota yang dikeluarkan oleh Kantor Dinas Tata Kota, dan telah memiliki Hak Guna

Bangunan (HGB).

Sejak Soft Opening hingga sekarang outlet yang telah terisi sekitar 300 tenant,

termasuk di antaranya Galeri Keris, Ace Hardware, Index Furniture, Toko Buku

Gramedia, Toko Buku Kharisma, Hero Pasar Swalayan, Puri 21, dan Dunia Rekreasi

Keluarga – Negeri Kartun sebagai penyewa utama (anchor tenant). Namun sebagian

besar tenant yang ada berupa tenant makanan. Pada tahun 2002 Mal Puri Indah

mengalami renovasi besar-besaran dan perubahan konsep yang semula hanya merupakan

family mall sekarang menjadi pusat belanja, hiburan, dan rekreasi baik bagi keluarga

maupun bagi kawula muda, seiring dengan pesatnya pertumbuhan komunitas

masyarakat dan visi Mal Puri Indah untuk mengembangkan wilayah Jakarta Barat

terutama kawasan Puri Indah dan sekitarnya.

Mal Puri Indah berbeda dengan mal-mal lain yang ada di Jakarta maupun

Botabek, karena dibangun dengan konsep mal bernuansa seni, hal ini dapat terlihat dari

28

bentuk arsitekturnya yang bergaya Victoria begitu pula tatanan interiornya yang

berkesan artistik. Kubah terbesar di dunia hasil karya seniman Glass Painting terkenal

dari Indonesia, Eddy Noer, dan jam antik raksasa yang tergantung megah di tangah mal

juga menjadi daya tarik tersendiri dari Mal Puri Indah.

Dengan kelebihan dan keunikan yang dimiliki oleh Mal Puri Indah, pihak

pengelola mengharapkan banyak masyarakat yang akan datang memenuhi pusat niaga

ini setiap harinya. Pengunjung datang tidak hanya untuk berbelanja, namun untuk

menikmati pula fasilitas lain seperti food court, bioskop, maupun pusat hiburan lainnya.

Selain itu, pengunjung dapat pula menikmati sajian khusus berupa acara-acara meriah

setiap minggunya yang menunjukkan apresiasi terhadap seni dan budaya, sesuai dengan

konsep Mal Puri Indah. Pihak pengelola selalu berusaha memberikan pelayanan yang

terbaik bagi pengunjung mal dengan motto PURI (Participative, Utmost, Responsive,

dan Inovative) sebagai misi dan masih terus melakukan upaya-upaya pengembangan mal

dan pendekatan yang lebih intensif kepada para pelanggan, termasuk tenant yang

bernaung di dalam Mal Puri Indah.

3.1.2 Struktur Organisasi dan Wewenang Tanggung Jawab

Tugas dari masing-masing divisi yang ada pada struktur organisasi Mal Puri

Indah adalah sebagai berikut :

1. Board of Director

Bertanggung jawab mengambil keputusan penting (decision maker) di dalam

perusahaan dan anak perusahaan lainnya.

29

2. General Manager

Bertanggung jawab mengawasi dua manajer utama, yaitu Manajer Mal dan Manajer

Properti.

3. Mall Manager

Bertanggung jawab dan mengelola mal secara keseluruhan serta bertanggung jawab

pula dalam mengadakan rapat untuk diikuti oleh seluruh divisi Mal Puri Indah.

4. HRD and Personnel

a. Personnel

Bertanggung jawab atas keluar-masuk dan gaji-gaji karyawan, juga menangani

kerja sama dengan bagian parkir dan keamanan.

b. General Affair

Bertanggung jawab atas SDM yang meliputi driver dan office boy dalam hal

jadwal kerja dan pembagian tugas.

5. Operational

a. Building Maintenance

Bertanggung jawab atas perawatan dan penggunaan bangunan di Mal Puri Indah

termasuk ruang tenant.

b. Electrical / Mechanical

Bertanggung jawab atas listrik dan mekanis yang dibutuhkan untuk seluruh area

mal, termasuk perawatannya.

c. Housekeeping, Landscape, and Foodcourt

Bertanggung jawab atas kebersihan di area Mal Puri Indah, area taman baik di

dalam maupun di luar gedung, dan hal-hal yang berurusan dengan area food

court dan segala properti yang digunakan di area tersebut.

30

6. Marketing

a. Tenant Relation, Public Relation, and Promotion

Bertanggung jawab mendistribusikan informasi seputar mal kepada pengunjung,

termasuk kegiatan promosi dan acara yang sedang atau akan diselenggarakan,

dan menjalin hubungan kerja sama dengan tenant.

b. IT and Visual

Menangani dan mengelola segala teknologi informasi pada Mal Puri Indah dan

bertanggung jawab dalam pembuatan media informasi yang meliputi semua hal

berkaitan dengan kegiatan mal berserta tenant yang bernaung di dalamnya, serta

bekerja sama dalam melakukan promosi dengan bagian Promotion,

c. Leasing

Bertanggung jawab dalam urusan administrasi dan perizinan dengan pihak-pihak

terkait di dalam penyelengaraan pameran di dalam area mal.

7. Finance and Accounting

a. Finance

Bertanggung jawab atas keuangan termasuk billing, invoicing, dan kasir.

b. Purchasing

Bertanggung jawab atas administrasi pembelian dan stok barang keperluan mal

yang berada di gudang.

c. Accounting

Bertanggung jawab atas pembukuan yang ada termasuk buku besar dan laporan

keuangan.

d. Tax

Bertanggung jawab atas perpajakan.

32

3.2 Analisa Sistem Berjalan

Sistem yang sedang berjalan pada Mal Puri Indah sekarang ini yaitu memusatkan

fokus kerjanya pada kegiatan promosi. Kegiatan promosi terhadap acara dan program

yang sedang diselenggarakan di dalam Mal Puri Indah sebagian besar masih

menggunakan media cetak seperti brosur-brosur yang diletakkan pada tempat-tempat

tertentu di dalam Mal Puri Indah, agar para pengunjung yang tertarik dapat

mengambilnya, sedangkan pihak tenant sendiri membagikan brosur-brosur kepada

pelanggan ketika sedang berkunjung. Baik pihak Mal Puri Indah maupun tenant telah

menempatkan poster-poster mengenai acara yang akan berlangsung pada lokasi-lokasi

yang strategis. Penerbitan majalah Mal Puri Indah juga dilakukan setiap 3 (tiga) bulan

sekali dan didistribusikan ke alamat sejumlah pelanggan tertentu. Disamping media

cetak, Mal Puri Indah memberikan informasi secara berkala melalui speaker mal kepada

pelanggan yang sedang berkunjung.

Kegiatan promosi melalui media cetak tersebut dirasakan masih kurang efektif

karena memerlukan pengeluaran yang lebih besar. Pengeluaran tersebut meliputi biaya

cetak brosur, poster, dan majalah, serta biaya personil yang bertugas menempelkan

poster dan mendistribusikan majalah tersebut. Jika batas program acara sudah lewat

atau ada perubahan, maka seluruh brosur, media cetak, dan poster yang tersisa akan

ditarik kembali dan diganti dengan yang baru.

Mal Puri Indah sendiri pernah memiliki website pada awal pengoperasian Mal

Puri Indah. Pengoperasian website tersebut tidak berlangsung lama karena pihak Mal

Puri Indah kekurangan tenaga administrator yang handal untuk mengupdate website

tersebut.

33

3.3 Analisa Permasalahan dan Solusi Masalah

3.3.1 Analisa Permasalahan

Untuk mengetahui permasalahan yang ada pada sistem yang sedang berjalan,

dilakukan wawancara terhadap pihak Mal Puri Indah serta penyusunan pertanyaan-

pertanyaan dalam bentuk kuesioner. Adapun jumlah kuesioner yang dibagikan adalah

sebanyak 100 lembar kuesioner yang masing-masing kuesionernya terdiri dari 10

pertanyaan. Pembagian kuesioner ini dilakukan pada tanggal 2 Oktober 2005 di Mal Puri

Indah kepada para pengunjung Mal Puri Indah. Dari 100 kuesioner yang dibagikan, ada

12 kuesioner yang tidak diisi secara lengkap (tidak valid), jadi kuesioner yang valid

sebanyak 88 kuesioner. Pengunjung yang mengisi kuesioner terdiri dari pria dan wanita

dari remaja sampai yang tua. Kuesioner dan hasilnya dapat dilihat pada lampiran

kuesioner awal halaman L1.

Berdasarkan hasil analisa kuesioner, dapat kita simpulkan bahwa informasi yang

disajikan oleh Mal Puri Indah dapat diakses dengan mudah oleh para pengunjung Mal

Puri Indah, tetapi banyak pengunjung masih merasakan informasi yang disajikan kurang

lengkap karena tidak dijelaskan secara terperinci. Hal ini dapat dilihat dari kuesioner

nomor 2 dan 3. Dari kuesioner nomor 7 kita dapat lihat bahwa hampir semua responden

(95%) mengharapkan adanya Website Mal Puri Indah yang dapat memberikan mereka

informasi tentang mal tersebut. Apalagi fasilitas internet di Indonesia mudah dijangkau

terutama di Jakarta. Menurut hasil analisa kuesioner nomor 8 dan 9, website yang

menarik adalah yang didukung dengan unsur multimedia (teks, gambar, suara, animasi,

dan video). Berdasarkan hasil kuesioner nomor 10, pengunjung menginginkan website

yang dirancang untuk Mal Puri Indah disertai dengan peta lokasi yang bisa memberi

petunjuk mengenai lokasi Mal Puri Indah.

34

Dari hasil wawancara dengan pihak Mal Puri Indah tentang sistem promosi yang

sedang berjalan saat ini, terdapat beberapa kelemahan sistem tersebut yang menjadi

kendala bagi pihak Mal Puri Indah dalam mengoptimalkan promosi mal tersebut.

Kendala-kendala tersebut antara lain adalah sebagai berikut :

1. Masalah biaya yang harus dikeluarkan untuk mencetak brosur-brosur, dan biaya

iklan-iklan di radio, koran, serta majalah. Selain itu diperlukan biaya bagi personil-

personil yang bertugas menempelkan poster dan mendistribusikan majalah tersebut.

2. Brosur-brosur yang diletakkan di tempat-tempat tertentu di Mal Puri Indah akan

terbuang sia-sia jika pengunjung tidak tertarik untuk mengambilnya.

3. Setiap kali ada perubahan tanggal pelaksanaan program-program yang akan

diselenggarakan di Mal Puri Indah, mereka harus mencetak ulang brosur-brosur

tentang acara tersebut. Hal ini sangat tidak efisien, karena perlu waktu dan biaya

tambahan untuk mengupdate dan mencetak ulang brosur tersebut.

3.3.2 Usulan Pemecahan Masalah

Melihat beberapa kendala yang dihadapi oleh pihak Mal Puri Indah dalam hal

promosi kepada pelanggan, serta hasil analisis kuesioner bahwa responden menyambut

baik usulan dikembangkannya website bagi Mal Puri Indah, maka website sebagai salah

satu alternatif sistem promosi yang akan dibangun merupakan solusi yang tepat bagi

masalah yang ada, karena informasi dapat disajikan lebih menarik, jelas, dan selalu up to

date. Dengan menerapkan website sebagai alternatif sistem promosi, pihak Mal Puri

Indah dapat mengurangi pencetakan brosur, iklan, dan majalah, sehingga biaya promosi

dapat ditekan.

35

Sistem promosi yang akan dikembangkan terdiri dari dua aplikasi dan satu

database. Kedua aplikasi tersebut adalah client-site (Front End) dan admin-site (Back

End). Sedangkan database tersebut berisi data-data acara, toko, fasilitas, kategori toko

serta data-data administrator yang dapat diupdate melalui admin-site.

Aplikasi client-site berupa website yang menyediakan informasi tentang toko-

toko, acara-acara, fasilitas-fasilitas, dan peta lokasi Mal Puri Indah yang dapat diakses

oleh siapa saja dan di mana saja melalui jaringan internet. Website ini didukung dengan

unsur-unsur multimedia (text, gambar, animasi, audio dan video) sehingga lebih menarik

dan informatif. Aplikasi client-site ditujukan terutama untuk promosi Mal Puri Indah

kepada masyarakat luas. Data yang ditampilkan dalam client-site bersifat dinamis

sehingga lebih fleksibel dan up to date. Data ini diperoleh langsung dari database yang

bisa diupdate melalui admin-site oleh administrator bersangkutan.

Sedangkan aplikasi admin-site digunakan untuk mengupdate data-data toko,

acara, fasilitas, dan kategori toko-toko Mal Puri Indah yang ada di database. Aplikasi

admin-site hanya dapat diakses oleh administrator yang memiliki hak akses dimana

administrator sendiri dapat mengubah data administrator yang ada di database.

Kelebihan-kelebihan dengan diterapkannya sistem promosi berupa website pada

Mal Puri Indah, diantaranya yaitu :

1. Dengan adanya website tersebut, pihak Mal Puri Indah dapat menghemat biaya

untuk mencetak brosur-brosur, majalah, poster, serta biaya iklan-iklan baik di radio,

koran, maupun majalah; sehingga dana untuk kegiatan promosi dapat dikurangi.

2. Para pelanggan dapat dengan mudah mencari tahu informasi perkembangan Mal Puri

Indah, acara-acara yang akan diadakan di Mal Puri Indah, serta lokasi dimana Mal

36

Puri Indah berada pada website tersebut dengan didukung unsur-unsur multimedia

yang lebih menarik.

3. Secara geografis, website tersebut dapat mencapai jangkauan promosi yang lebih

luas karena dapat diakses dimana saja, kapan saja, dan juga dapat menekan

pengeluaran biaya yang besar. Seiring dengan perkembangan dunia internet yang

semakin pesat di Indonesia dan minat masyarakat terhadap internet yang semakin

tinggi, membuat orang merasa betah untuk mencari informasi melalui internet.

Internet juga memberikan kemudahan karena penyebaran informasi menjadi lebih

cepat dan akurat.

4. Data-data tersebut dapat diupdate dengan mudah apabila sewaktu-waktu terjadi

perubahan. Hal ini tentunya akan lebih efisien jika dilihat dari segi waktu karena Mal

Puri Indah tidak perlu lagi menarik kembali brosur-brosur yang sudah ada hanya

untuk memperbaiki perubahan-perubahan tersebut , sehingga pengeluaran biaya

dapat ditekan.

3.4 Perancangan Sistem

3.4.1 Rancangan Hirarki/ Struktur Menu

Rancangan hirarki/ struktur menu Website Mal Puri Indah terbagi menjadi

beberapa hirarki/ struktur menu, antara lain : Struktur Menu Front End dan Struktur

Menu Back End. Berikut ini adalah struktur menu Website Mal Puri Indah yang akan

dirancang.

1. Struktur Menu Front End

Website Mal Puri Indah mempunyai struktur menu navigasi utama yang

tampil konsisten untuk setiap halamannya. Untuk menu navigasi utama dirancang

37

semudah mungkin agar user dapat menemukan halaman-halaman (page-page) yang

diinginkan. Adapun struktur menu navigasi Front End Website Mal Puri Indah

sebagai berikut :

Halaman Utama

Prof il Fas ilitas Toko A cara

Intro

Hubungi Kami

Webs ite Mal Puri Indah

Gambar 3.2 Struktur Menu Transisi Layar Pembuka

Struktur menu transisi layar pembuka Website Mal Puri Indah dimulai dari

halaman Intro kemudian masuk ke Halaman Utama yang terdiri dari menu Profil,

Acara, Toko, Fasilitas, dan Hubungi Kami.

Sejarah Mal

Prof il

StrukturBangunan

Mal Puri Indah

Gambar 3.3 Struktur Menu Halaman Profil

38

Struktur menu halaman Profil Website Mal Puri Indah berisi tentang sejarah

dan Struktur Bangunan Mal Puri Indah.

Fasilitas

Telekomunikasi ParkirBank, ATM,Money Changer Lain-lain

Detil Bank, ATM,Money Changer

DetilTelekomunikasi Detil Parkir Detil Lain-lain

Gambar 3.4 Struktur Menu Halaman Fasilitas

Struktur menu halaman Fasilitas Website Mal Puri Indah terdiri dari fasilitas

Bank, ATM, Money Changer ; Telekomunikasi; Parkir; serta Lain-Lain. Fasilitas-

fasilitas tersebut disertai dengan detil (penjelasan lengkap) masing-masing fasilitas.

Toko

A B C D E F HG I J

Toko1...n

Toko1...n

Toko1...n

Toko1...n

Toko1...n

Toko1...n

Toko1...n

Toko1...n

Toko1...n

Toko1...n

DetilToko

DetilToko

DetilToko

DetilToko

DetilToko

DetilToko

DetilToko

DetilToko

DetilToko

DetilToko

Gambar 3.5 Struktur Menu Halaman Toko

39

Keterangan :

A = Supermarket dan Departemen Store F = Elektronik dan Komputer

B = Pakaian, Tas, dan Sepatu G = Optik dan Perhiasan

C = Kesehatan dan Kecantikan H = Makanan

D = Buku dan Pendidikan I = Perabotan

E = Hobi dan Hiburan J = Lain-lain

Struktur menu halaman Toko Website Mal Puri Indah terdiri dari beberapa

kategori toko dari A sampai J. Dari kategori-kategori toko tersebut terbagi lagi

menjadi beberapa toko yang merupakan bagian dari kategori toko tersebut. Masing-

masing toko juga disertai dengan detil (penjelasan lengkap) toko.

Acara

Acara 1 Acara 2 Acara 3 Acara 4 Acara ...n

Detil Acara 1 Detil Acara 2 Detil Acara 3 Detil Acara 4 Detil Acara ...n

Gambar 3.6 Struktur Menu Halaman Acara

Struktur menu halaman Acara Website Mal Puri Indah terdiri dari beberapa

acara disertai dengan detil (penjelasan lengkap) masing-masing acara tersebut.

40

Hubungi Kami

Alamat, No.Telepon, Fax,E-mail Mal Puri Indah

Gambar 3.7 Struktur Menu Halaman Hubungi Kami

Struktur menu halaman Hubungi Kami Website Mal Puri Indah berisi

Alamat, No. Telepon, Fax, serta E-mail Mal Puri Indah yang bisa dihubungi.

2. Struktur Menu Back End

Struktur menu bagian Back End dirancang sesederhana mungkin untuk

memudahkan administrator melakukan maintenance, sehingga sistem tidak terlalu

kompleks dan dapat dengan mudah digunakan. Adapun struktur menu navigasi Back

End Website Mal Puri Indah sebagai berikut :

41

Admin Login

Halaman Utama Admin

msAcara

Insert Acara

Update Acara

Delete Acara

msToko

Insert Toko

Update Toko

Delete Toko

msFasilitas

Insert Fasilitas

Update Fasilitas

Delete Fasilitas

katToko

Insert kat_Toko

Update kat_Toko

Delete kat_Toko

msAdmin

Insert Admin

Ubah Password

Delete Admin

View Full

View Full

View Full

katFasilitas

Insert kst_Fasilitas

Update kat_Fasilitas

Delete kat_Fasilitas

Gambar 3.8 Struktur Menu Halaman Utama Admin

42

Struktur menu halaman Utama Admin terdiri dari menu msAcara, msToko,

msFasilitas, katToko, katFasilitas, dan msAdmin. Administrator dapat melakukan

insert, update, delete, serta view full data dalam database pada menu msAcara,

msToko, msFasilitas. Sedangkan untuk menu katToko dan katFasilitas, administrator

hanya dapat melakukan insert, update, dan delete data. Untuk menu msAdmin,

administrator dapat melakukan insert, ubah password, serta delete pada tabel

msAdmin.

3.4.2 Rancangan State Transition Diagram (STD)

Berdasarkan struktur menu diatas, aplikasi Front End Website Mal Puri Indah

dapat direpresentasikan dengan State Transition Diagram (STD) sebagai berikut :

43

1. Rancangan State Transition Diagram Bagian Front End

Internet Browser

Menunggu hubungan keweb server

Menunggu pilihan user

Halaman Utama

Profil

Fasilitas

Toko

Acara

Ketik URL,cari di internetURL tidak ditemukan,muncul pesan error

Klik "Halaman Utama"Tampilkan Halaman Utama

Klik "Profil"Tampilkan halaman Profil

Klik "Fasilitas"Tampilkan halaman Fasilitas

Klik "Toko"Tampilkan halaman Toko

Klik "Acara"Tampilkan halaman Acara

Hubungi Kami

Klik "Hubungi Kami"Tampilkan halaman HubungiKami

Intro

Halaman Utama

Gambar 3.9 State Transition Diagram Bagian Front End

Apabila URL Website Mal Puri Indah yang diketikkan oleh user ditemukan

maka akan masuk ke halaman Intro Website Mal Puri Indah. Kalau user klik tombol

44

“Skip”, maka akan langsung masuk ke Halaman Utama Website Mal Puri Indah.

Pada Halaman Utama itu sendiri user dapat masuk ke halaman-halaman lain seperti

halaman Profil, halaman Fasilitas, halaman Toko, halaman Acara, serta halaman

Hubungi Kami.

2. Rancangan State Transition Diagram Halaman Utama

W ebsite Mal Puri Indah

Halaman Utam a

Detil Inform asi

Klik halam an lainTampilkan halaman lain

Klik "Halam an Utama"Tampilkan Halaman Utam a

Klik Image, Judul, Detil salah satu InformasiTam pilkan detil inform asi tersebutKlik "Halam an Utama"

Gambar 3.10 State Transition Diagram Halaman Utama

Apabila user klik tombol “Halaman Utama” maka akan ditampilkan Halaman

Utama; jika user klik image, judul, detil salah satu informasi maka akan ditampilkan

halaman Detil Informasi yang diklik tersebut; dan jika user klik halaman lain maka

akan ditampilkan halaman lain yang diinginkan.

45

3. Rancangan State Transition Diagram Halaman Profil

Website Mal Puri Indah

Profil

Klik halaman lainTampilkan halaman lain

Klik "Profil"Tampilkan halaman Profil

Klik "Profil"

Detil Profil

Klik Image, Judul, Detil salah satu profilTampilkan detil profil tersebut

Gambar 3.11 State Transition Diagram Halaman Profil

Apabila user klik tombol “Profil” maka akan ditampilkan halaman Profil;

jika user klik image, judul, detil salah satu profil maka akan ditampilkan halaman

Detil Profil yang diklik tersebut; dan jika user klik halaman lain maka akan

ditampilkan halaman lain yang diinginkan.

46

4. Rancangan State Transition Diagram Halaman Fasilitas


Fasilitas


Klik "Fasilitas"Tampilkan halaman Fasilitas

Klik "Fasilitas"

Detil Fasilitas

Klik Image, Judul, Detil salah satu FasilitasTampilkan detil fasilitas tersebut

Gambar 3.12 State Transition Diagram Halaman Fasilitas

Apabila user klik tombol “Fasilitas” maka akan ditampilkan halaman

Fasilitas; jika user klik image, judul, detil pada salah satu fasilitas yang ada di layar

maka akan ditampilkan halaman Detil Fasilitas yang diklik tersebut; dan jika user

klik halaman lain maka akan ditampilkan halaman lain yang diinginkan.

47

5. Rancangan State Transition Diagram Halaman Toko


Toko


Klik "Toko"Tampilkan halaman Toko

Klik "Toko"

Daftar Toko

Klik Image, Judul salah satu Kategori TokoTampilkan Daftar Toko per Kategori

Detil Toko


Klik Image, Judul salah satu tokoTampilkan detil toko tersebut

Peta Lokasi Toko

Klik Lokasi TokoTampilkan peta lokasi toko tersebut

Gambar 3.13 State Transition Diagram Halaman Toko

Apabila user klik tombol “Toko” maka akan ditampilkan halaman Toko; jika

user klik image atau judul salah satu kategori toko yang ada di layar maka akan

ditampilkan daftar toko dari kategori yang diklik tersebut; jika user klik image atau

judul salah satu toko maka akan ditampilkan halaman Detil Toko yang diklik

tersebut; jika user klik lokasi toko maka akan ditampilkan peta lokasi toko tersebut;

48

dan jika user klik halaman lain maka akan ditampilkan halaman lain yang

diinginkan.

6. Rancangan State Transition Diagram Halaman Acara


Acara


Klik "Acara"Tampilkan halaman Acara

Klik "Acara"

Detil Acara

Klik Image, Judul, Detil salah satu acaraTampilkan detil acara tersebut

Gambar 3.14 State Transition Diagram Halaman Acara

Apabila user klik tombol “Acara” maka akan ditampilkan halaman Acara;

jika user klik pada image, judul, detil salah satu acara yang ada di layar maka akan

ditampilkan halaman Detil Acara yang diklik tersebut; dan jika user klik halaman

lain maka akan ditampilkan halaman lain yang diinginkan.

49

7. Rancangan State Transition Diagram Halaman Hubungi Kami


Hubungi Kami


Klik "Hubungi Kami"Tampilkan halaman Hubungi Kami

Klik "Hubungi Kami"

Gambar 3.15 State Transition Diagram Halaman Hubungi Kami

Apabila user klik tombol “Hubungi Kami” maka akan ditampilkan halaman

Hubungi Kami; dan jika user klik halaman lain maka akan ditampilkan halaman lain

yang diinginkan.

50

8. Rancangan State Transition Diagram Bagian Back End

Halaman Login Admin

Menunggu pilihanadministrator

Halaman msAcara

Halaman msToko

Halaman msFasilitas

Halaman katToko

Halaman katFasilitas

Klik "Login"Verifikasi Username Password

Proses Login gagalTampilkan pesan kesalahan

Klik " msAcara"Tampilkan halaman msAcara

Klik "msToko"Tampilkan halaman msToko

Klik "msFasilitas"Tampilkan halaman msFasilitas

Klik "katToko"Tampilkan halaman katToko

Klik "katFasilitas"Tampilkan halaman katFasilitas

Halaman msAdmin

Klik "msAdmin"Tampilkan halaman msAdmin

Proses Login

Halaman Utama Admin

Proses Login suksesTampilkan Halaman Utama Admin

Klik "Logout"Tampilkan Halaman Login Admin

Gambar 3.16 State Transition Diagram Halaman Bagian Back End

Apabila administrator ingin melakukan maintenance data yang ada dalam

database, maka administrator terlebih dahulu harus melakukan login untuk masuk ke

51

halaman Utama Admin, caranya dengan mengisi field “Username” dan “Password”,

kemudian klik tombol “Login”. Jika tombol “Reset” diklik, maka seluruh field akan

dikosongkan. Username dan password yang dimasukkan akan dicek pada modul

Proses Login. Apabila hasil dari proses login sukses maka akan ditampilkan halaman

Utama Admin, dan jika proses login gagal (username atau password tidak valid)

maka akan ditampilkan pesan kesalahan pada halaman Login Admin. Jika

administrator ingin keluar dari halaman Utama Admin, maka klik “Logout” dan akan

ditampilkan halaman Login Admin. Pada Halaman Utama Admin administrator

dapat masuk ke halaman-halaman lainnya seperti halaman msAcara, msToko,

msFasilitas, katToko, katFasilitas, dan msAdmin.

9. Rancangan State Transition Diagram Halaman Utama Admin

Halaman UtamaAdmin

Halaman Lain

Klik "Utama"Tampilkan Halaman Utama Admin

Klik "Utama"Tampilkan Halaman Utama Admin

Klik menu lainTampilkan halaman lain

Halaman LoginAdmin

Klik "Logout"Tampilkan Halaman Login Admin

Gambar 3.17 State Transition Diagram Halaman Utama Admin

52

Setelah masuk ke halaman Utama Admin, administrator dapat melihat jumlah

pengunjung Website Mal Puri Indah pada layar. Apabila administrator klik halaman

lain (msAcara, msToko, msFasilitas, katToko, katFasilitas, msAdmin) maka akan

ditampilkan halaman yang diklik tersebut.

10. Rancangan State Transition Diagram Halaman msAcara

HalamanmsAcara

Halaman InsertAcara

Halaman UpdateAcara

Halaman DeleteAcara

View Full

Klik "Insert"Tampilkan Halaman Insert Acara

Klik "Add"Tampilkan Halaman msAcara

Klik "View Full"Tampilkan Halaman View Full

Klik "Cancel"

Klik "Update"Tampilkan Halaman Update Acara

Klik "Save"Tampilkan Halaman msAcara

Klik "Cancel"

Klik "Delete"Tampilkan Halaman Delete Acara

Klik "Delete"Tampilkan Halaman msAcara

Klik "msAcara"Tampilkan Halaman msAcara

Klik "Cancel"

Halaman Lain


Klik "msAcara"Tampilkan Halaman msAcara

Halaman LoginAdmin Klik "Logout"

Tampilkan Halaman Login Admin

Gambar 3.18 State Transition Diagram Halaman msAcara

Setelah masuk ke halaman msAcara, administrator dapat melakukan insert,

update, delete ,serta view full data dengan klik salah satu tombol tersebut, kemudian

akan masuk ke halaman yang diinginkan. Pada halaman Insert akan ditampilkan

53

field-field untuk penambahan data, kemudian klik tombol “Add” untuk menambah

record baru ke dalam database dan masuk ke halaman msAcara. Pada halaman

Update akan ditampilkan field-field untuk pengubahan data, kemudian klik tombol

“Save” untuk menyimpan record yang diubah ke dalam database dan masuk ke

halaman msAcara. Pada halaman Delete akan ditampilkan field-field record yang

akan dihapus, kemudian klik tombol “Delete” untuk menghapus record yang dipilih

dan masuk ke halaman msAcara. Jika administrator klik tombol “Cancel” ,akan

masuk ke halaman msAcara. Sedangkan tombol “View Full” untuk menampilkan

semua field secara lengkap. Apabila administartor klik menu lain (msAcara,

msToko, msFasilitas, katToko, katFasilitas, msAdmin) maka akan ditampilkan

halaman lain menu yang diklik tersebut. Jika klik “Logout” akan ditampilkan

halaman Login Admin.

54

11. Rancangan State Transition Diagram Halaman msToko

Halaman msToko

Halaman InsertToko

Halaman UpdateToko

Halaman DeleteToko

View Full

Klik "Insert"Tampilkan Halaman Insert Toko

Klik "Add"Tampilkan Halaman msToko


Klik "Cancel"

Klik "Update"Tampilkan Halaman Update Toko

Klik "Save"Tampilkan Halaman msToko

Klik "Cancel"

Klik "Delete"Tampilkan Halaman Delete Toko

Klik "Delete"Tampilkan Halaman msToko

Klik "msToko"Tampilkan Halaman msToko

Klik "Cancel"

Halaman Lain


Klik "msToko"Tampilkan Halaman msToko



Gambar 3.19 State Transition Diagram Halaman msToko

Setelah masuk ke halaman msToko, administrator dapat melakukan insert,




record baru ke dalam database dan masuk ke halaman msToko. Pada halaman



halaman msToko. Pada halaman Delete akan ditampilkan field-field record yang

55


dan masuk ke halaman msToko. Jika administrator klik tombol “Cancel” ,akan

masuk ke halaman msToko. Sedangkan tombol “View Full” untuk menampilkan





12. Rancangan State Transition Diagram Halaman msFasilitas

HalamanmsFasilitas

Halaman InsertFasilitas

Halaman UpdateFasilitas

Halaman DeleteFasilitas

View Full

Klik "Insert"Tampilkan Halaman Insert Fasilitas

Klik "Add"Tampilkan Halaman msFasilitas


Klik "Cancel"

Klik "Update"Tampilkan Halaman Update Fasilitas

Klik "Save"Tampilkan Halaman msFasilitas

Klik "Cancel"

Klik "Delete"Tampilkan Halaman Delete Fasilitas

Klik "Delete"Tampilkan Halaman msFasilitas

Klik "msFasilitas"Tampilkan Halaman msFasilitas

Klik "Cancel"

Halaman Lain


Klik "msFasilitas"Tampilkan Halaman msFasilitas



Gambar 3.20 State Transition Diagram Halaman msFasilitas

56

Setelah masuk ke halaman msFasilitas, administrator dapat melakukan insert,




record baru ke dalam database dan masuk ke halaman msFasilitas. Pada halaman



halaman msFasilitas. Pada halaman Delete akan ditampilkan field-field record yang


dan masuk ke halaman msFasilitas. Jika administrator klik tombol “Cancel”, akan

masuk ke halaman msFasilitas. Sedangkan tombol “View Full” untuk menampilkan





57

13. Rancangan State Transition Diagram Halaman katToko

HalamankatToko

Halaman InsertkatToko

Halaman UpdatekatToko

Halaman DeletekatToko

Klik "Insert"Tampilkan Halaman Insert katToko

Klik "Add"Tampilkan Halaman katToko

Klik "Cancel"

Klik "Update"Tampilkan Halaman Update katToko

Klik "Save"Tampilkan Halaman katToko

Klik "Cancel"

Klik "Delete"Tampilkan Halaman Delete katToko

Klik "Delete"Tampilkan Halaman katToko

Klik "katToko"Tampilkan Halaman katToko

Klik "Cancel"

Halaman Lain


Klik "katToko"Tampilkan Halaman katToko



Gambar 3.21 State Transition Diagram Halaman katToko

Setelah masuk ke halaman katToko, administrator dapat melakukan insert,

update, dan delete data dengan klik salah satu tombol tersebut, kemudian akan

masuk ke halaman yang diinginkan. Pada halaman Insert akan ditampilkan field-field

untuk penambahan data, kemudian klik tombol “Add” untuk menambah record baru

ke dalam database dan masuk ke halaman katToko. Pada halaman Update akan

ditampilkan field-field untuk pengubahan data, kemudian klik tombol “Save” untuk

menyimpan record yang diubah ke dalam database dan masuk ke halaman katToko.

Pada halaman Delete akan ditampilkan field-field record yang akan dihapus,

kemudian klik tombol “Delete” untuk menghapus record yang dipilih dan masuk ke

58

halaman katToko. Jika administrator klik tombol “Cancel”, akan masuk ke halaman

katToko. Apabila administartor klik menu lain (msAcara, msToko, msFasilitas,

katToko, katFasilitas, msAdmin) maka akan ditampilkan halaman lain menu yang

diklik tersebut. Jika klik “Logout” akan ditampilkan halaman Login Admin.

14. Rancangan State Transition Diagram Halaman katFasilitas

HalamankatFasilitas

Halaman InsertkatFasilitas

Halaman UpdatekatFasilitas

Halaman DeletekatFasilitas

Klik "Insert"Tampilkan Halaman Insert katFasilitas

Klik "Add"Tampilkan Halaman katFasilitas

Klik "Cancel"

Klik "Update"Tampilkan Halaman Update katFasilitas

Klik "Save"Tampilkan Halaman katFasilitas

Klik "Cancel"

Klik "Delete"Tampilkan Halaman Delete katFasilitas

Klik "Delete"Tampilkan Halaman katFasilitas

Klik "katFasilitas"Tampilkan Halaman katFasilitas

Klik "Cancel"

Halaman Lain


Klik "katFasilitas"Tampilkan Halaman katFasilitas



Gambar 3.22 State Transition Diagram Halaman katFasilitas

Setelah masuk ke halaman katFasilitas, administrator dapat melakukan insert,

update, dan delete data dengan klik salah satu tombol tersebut, kemudian akan

masuk ke halaman yang diinginkan. Pada halaman Insert akan ditampilkan field-field

untuk penambahan data, kemudian klik tombol “Add” untuk menambah record baru

59

ke dalam database dan masuk ke halaman katFasilitas. Pada halaman Update akan

ditampilkan field-field untuk pengubahan data, kemudian klik tombol “Save” untuk

menyimpan record yang diubah ke dalam database dan masuk ke halaman

katFasilitas. Pada halaman Delete akan ditampilkan field-field record yang akan

dihapus, kemudian klik tombol “Delete” untuk menghapus record yang dipilih dan

masuk ke halaman katFasilitas. Jika administrator klik tombol “Cancel”, akan masuk

ke halaman katFasilitas. Apabila administartor klik menu lain (msAcara, msToko,

msFasilitas, katToko, katFasilitas, msAdmin) maka akan ditampilkan halaman lain

menu yang diklik tersebut. Jika klik “Logout” akan ditampilkan halaman Login

Admin.

15. Rancangan State Transition Diagram Halaman msAdmin

HalamanmsAdmin

Halaman InsertAdmin

Halaman UbahPassword

Halaman DeleteAdmin

Klik "Insert"Tampilkan Halaman Insert Admin

Klik "Add"Tampilkan Halaman msAdmin

Klik "Cancel"

Klik "Ubah Password"Tampilkan Halaman Ubah Password

Klik "Save"Tampilkan Halaman msAdmin

Klik "Cancel"

Klik "Delete"Tampilkan Halaman Delete Admin

Klik "Delete"Tampilkan Halaman msAdmin

Klik "msAdmin"Tampilkan Halaman msAdmin

Klik "Cancel"

Halaman Lain


Klik "msAdmin"Tampilkan Halaman msAdmin



Gambar 3.23 State Transition Diagram Halaman msAdmin

60

Setelah masuk ke halaman msAdmin, administrator dapat melakukan insert,

ubah password, dan delete data admin dengan klik salah satu tombol tersebut,

kemudian akan masuk ke halaman yang diinginkan. Pada halaman Insert akan

ditampilkan field-field untuk penambahan data, kemudian klik tombol “Add” untuk

menambah record baru ke dalam database dan masuk ke halaman msAdmin. Pada

halaman Ubah Password akan ditampilkan field-field untuk pengubahan password,

kemudian klik tombol “Save” untuk menyimpan record yang diubah ke dalam

database dan masuk ke halaman msAdmin. Disini akan dilakukan pengecekan

terhadap password lama, password baru serta konfirmasi password. Apabila tidak

valid maka akan ditampilkan pesan kesalahan. Pada halaman Delete akan

ditampilkan field-field record yang akan dihapus, kemudian klik tombol “Delete”

untuk menghapus record yang dipilih dan masuk ke halaman msAdmin. Jika

administrator klik tombol “Cancel” , akan masuk ke halaman msAdmin. Apabila

administartor klik menu lain (msAcara, msToko, msFasilitas, katToko, katFasilitas,

msAdmin) maka akan ditampilkan halaman lain menu yang diklik tersebut. Jika klik

“Logout” akan ditampilkan halaman Login Admin.

61

3.4.3 Rancangan Layar

Rancangan Layar untuk Website Mal Puri Indah adalah sebagai berikut :

1. Rancangan Layar Halaman Intro

OnOff

Skip Intro >>

Animasi Flash

Gambar 3.24 Rancangan Layar Halaman Intro

Halaman Intro menampilkan animasi-animasi flash tentang Mal Puri Indah,

di mana terdapat tombol “Skip Intro” agar user dapat langsung masuk ke Halaman

Utama Mal Puri Indah. Terdapat juga tombol “On” dan “Off” untuk menghidupkan

atau mematikan suara. Tombol “On” dan “Off” ini juga terdapat di halaman-halaman

lainnya.

62

2. Rancangan Layar Halaman Utama

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil

HubungiKamiFasilitas

Image-1

Informasi-2Image-

2Detil >>

Image-3

Informasi-1Informasi-3

Detil >> Detil >>

Selamat Datang...Promo

Banner

Gambar 3.25 Rancangan Layar Halaman Utama

Pada halaman ini, user dapat melakukan link ke halaman Profil, halaman

Acara, halaman Toko, halaman Fasilitas, serta halaman Hubungi Kami. Jika user

klik image, judul, atau detil salah satu informasi yang ada di layar, maka akan

dihubungkan ke halaman Detil Informasi yang berisi keterangan lengkap tentang

informasi tersebut. (lihat gambar 3.26)

63

3. Rancangan Layar Halaman Detil Informasi

Image

Keterangan Informasi

Gambar 3.26 Rancangan Layar Halaman Detil Informasi

64

4. Rancangan Layar Halaman Profil

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil


Image-1

Detil >>

Sejarah Mal Puri Indah...

Keterangan

Profil

Struktur Bangunan Mal Puri Indah...

Keterangan

Detil >>

Image-2

Banner

Gambar 3.27 Rancangan Layar Halaman Profil

Pada halaman ini berisi profil dari Mal Puri Indah, berupa Sejarah Mal Puri

Indah dan Struktur Bangunan Mal Puri Indah. Untuk melihat keterangan lengkapnya,

user dapat klik image, judul, atau detil salah satu profil (lihat gambar 3.28). User

juga dapat melakukan link ke Halaman Utama, halaman Profil, halaman Acara,

halaman Toko, halaman Fasilitas, serta halaman Hubungi Kami.

65

5. Rancangan Layar Halaman Detil Profil

Image

Keterangan Profil

Gambar 3.28 Rancangan Layar Halaman Detil Profil

66

6. Rancangan Layar Halaman Acara

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil


Image-1

Detil >>

Acara-1 Acara-2

Image-2

Detil >>

Image-3 Image-4

Acara-3 Acara-4

Detil >> Detil >>

1 2 3

Acara - acara...

Banner

Gambar 3.29 Rancangan Layar Halaman Acara

Pada halaman ini berisi acara-acara yang akan diadakan oleh Mal Puri Indah.

Halaman Acara terbagi atas tiga halaman di mana masing-masing halaman terdiri

dari 4 (empat) acara terbaru. Jika user klik image, judul, atau detil salah satu acara

yang ada di layar, maka akan dihubungkan ke halaman Detil Acara yang berisi

keterangan lengkap tentang acara tersebut. (lihat gambar 3.30). User dapat melihat

acara-acara yang lain dengan menekan alternatif link berupa “1 2 3”. User juga

dapat melakukan link ke Halaman Utama, halaman Profil, halaman Acara, halaman

Toko, halaman Fasilitas, serta halaman Hubungi Kami.

67

7. Rancangan Layar Detil Acara

Image

Keterangan Acara

Nama Acara

Gambar 3.30 Rancangan Layar Detil Acara

68

8. Rancangan Layar Halaman Toko

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil


ImageA

ImageB

ImageC

ImageD

ImageE

ImageF

ImageG

ImageH

ImageI

ImageJ

Toko -Toko...

A CB D E

F G H I J

Banner

Gambar 3.31 Rancangan Layar Halaman Toko

Pada halaman ini berisi kategori-kategori toko yang ada di Mal Puri Indah.

Kategori-kategori ini disimbolkan dengan huruf A sampai J di mana masing-masing

huruf mewakili satu kategori. Kategori yang diwakili huruf-huruf tersebut dapat

dilihat di halaman 39 pada struktur menu halaman Toko. Jika user klik nama salah

satu kategori yang ada di layar, maka akan dihubungkan ke halaman Daftar Toko

berdasarkan kategori toko yang diklik tersebut (lihat gambar 3.32). User juga dapat

melakukan link ke Halaman Utama, halaman Profil, halaman Acara, halaman Toko,

halaman Fasilitas, serta halaman Hubungi Kami.

69

9. Rancangan Layar Halaman Daftar Toko

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil


ImageToko-1

ImageToko-2

ImageToko-3

ImageToko-4

ImageToko-5

ImageToko-6

ImageToko-7

ImageToko-n

Nama Kategori

Nama Toko-1 Nama Toko-3Nama Toko-2 Nama Toko-4

Nama Toko-5 Nama Toko-6 Nama Toko-7 Nama Toko-8

1 2 3

Banner

Gambar 3.32 Rancangan Layar Halaman Daftar Toko

Pada halaman ini berisi daftar toko-toko yang ada di Mal Puri Indah

berdasarkan kategori. Jumlah toko yang ditampilkan terdiri dari 8 (delapan) toko,

jika lebih dari 8 toko, maka secara otomatis akan terbentuk halaman berikutnya yang

berisi daftar toko-toko lainnya. Angka “1 2 3” menunjukkan jumlah halaman toko

yang ada, dimana masing-masing halaman menampilkan maksimum 8 toko. Angka

tersebut jika diklik akan link ke halaman toko berdasarkan angkanya. Angka-angka

yang ditampilkan tergantung jumlah halaman toko. Jika user klik image atau nama

salah satu toko dari daftar toko tersebut, maka akan dihubungkan ke halaman Detil

70

Toko yang berisi keterangan lengkap tentang toko tersebut (lihat gambar 3.33). User

juga dapat melakukan link ke Halaman Utama, halaman Profil, halaman Acara,

halaman Toko, halaman Fasilitas, serta halaman Hubungi Kami.

10. Rancangan Layar Halaman Detil Toko

Image

Keterangan Toko

Nama Toko

Gambar 3.33 Rancangan Layar Halaman Detil Toko

71

11. Rancangan Layar Halaman Fasilitas

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil


Image-1

Detil >>

Bank, ATM,... Parkir

Image-2

Detil >>

Image-3 Image-4

Telekomunikasi Lain-lain

Detil >> Detil >>

Keterangan Keterangan

KeteranganKeterangan

Fasilitas...

Banner

Gambar 3.34 Rancangan Layar Halaman Fasilitas

Pada halaman ini berisi fasilitas-fasilitas yang ada di Mal Puri Indah. Secara

umum, fasilitas ini dikelompokkan menjadi 4 kategori seperti yang terlihat pada

rancangan layar di atas. Jika user klik image, judul, dan detil salah satu kategori

fasilitas yang ada di layar, maka akan dihubungkan ke halaman Detil Fasilitas dari

fasilitas yang diklik tersebut (lihat gambar 3.35). User juga dapat melakukan link ke

Halaman Utama, halaman Profil, halaman Acara, halaman Toko, halaman Fasilitas,

serta halaman Hubungi Kami.

72

12. Rancangan Layar Halaman Detil Fasilitas

Image-1 Keterangan Fasilitas

Nama Fasilitas-1

Nama Fasilitas-2

Keterangan FasilitasImage-2

Image-n

.

.

. Nama Fasilitas-n

Keterangan Fasilitas

Gambar 3.35 Rancangan Layar Halaman Detil Fasilitas

Halaman Detil Fasilitas berisi keterangan lengkap dan image semua fasilitas

yang termasuk dalam kategori yang diklik tersebut.

73

13. Rancangan Layar Halaman Hubungi Kami

Animasi Flash

OnOff

Animasi Logo

TokoHalamanUtama

AcaraProfil


Berisi daftar nomor telepon, emaildan fax yang dapat dihubungi

Hubungi kami...

Alamat

No. Telepon

Fax

E-mail

Banner

Gambar 3.36 Rancangan Layar Halaman Hubungi Kami

Pada halaman ini berisi alamat, nomor telepon, fax, dan e-mail Mal Puri

Indah yang dapat dihubungi oleh user. User juga dapat melakukan link ke Halaman

Utama, halaman Profil, halaman Acara, halaman Toko, halaman Fasilitas, serta

halaman Hubungi Kami.

74

14. Rancangan Layar Halaman Login Admin

Username

Password

Login Reset

Gambar 3.37 Rancangan Layar Halaman Login Admin

Halaman ini merupakan halaman Login untuk administrator. Untuk dapat

masuk ke halaman Utama Admin, administrator harus mengisi username dan

password. Jika username atau password yang dimasukkan tidak valid maka akan

tampil pesan kesalahan. Apabila tombol “Reset” diklik, maka seluruh field akan

dikosongkan.

75

15. Rancangan Layar Halaman Utama Admin

Gambar 3.38 Rancangan Layar Halaman Utama Admin

Pada halaman ini terdapat tombol Utama, msAcara, msToko, msFasilitas,

katToko, katFasilitas, msAdmin. Pada halaman ini, administrator dapat melihat

keterangan jumlah pengunjung Website Mal Puri Indah dan sekilas panduan untuk

administrator.

Jika administrator klik tombol “msAcara”, maka akan ditampilkan halaman

tabel msAcara agar administrator dapat melakukan insert, update, delete, dan view

full tabel msAcara tersebut (lihat gambar 3.39).

Keterangan jumlah pengunjung website Mal Puri Indahdan sekilas panduan untuk administrator

Image

Animasi ucapan Selamat Datang [nama admin] LogOut

Utama msAcara msToko msFasilitas katToko katFasilitas msAdmin

76

Jika administrator klik tombol “msToko”, maka akan ditampilkan halaman

tabel msToko agar administrator dapat melakukan insert, update, delete ,dan view

full tabel msToko tersebut (lihat gambar 3.40).

Jika administrator klik tombol “msFasilitas”, maka akan ditampilkan

halaman table msFasilitas agar administrator dapat melakukan insert, update, delete,

dan view full tabel msFasilitas tersebut (lihat gambar 3.41).

Jika administrator klik tombol “katToko”, maka akan ditampilkan halaman

tabel kat_Toko agar administrator dapat melakukan insert, update, dan delete tabel

katToko tersebut (lihat gambar 3.42).

Jika administrator klik tombol “katFasilitas”, maka akan ditampilkan

halaman tabel katFasilitas agar administrator dapat melakukan insert, update, dan

delete tabel katFasilitas tersebut (lihat gambar 3.43).

Jika administrator klik tombol “msAdmin”, maka akan ditampilkan halaman

tabel msAdmin agar administrator dapat melakukan insert, ubah password, dan

delete tabel msAdmin tersebut. Pada tabel ini tidak ditampilkan password, untuk

mencegah admin mengubah password admin lainnya (lihat gambar 3.44).

Jika administrator ingin keluar dari halaman-halaman tersebut dapat klik

tombol “LogOut” yang terdapat pada sisi kanan atas.

77

Image

Animasi ucapan Selamat Datang [nama admin LogOut

Tabel msAcara

Insert

Kembali ke atas

kdAcara nmAcara Penyelenggara tglMulai tglSelesai

DeleteUpdate view fullA-1.............

A-n

Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin

Update Delete view full

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.


Gambar 3.39 Rancangan Layar Halaman Tabel msAcara

78

Image


Tabel msToko

Insert

Kembali ke atas

kdToko nmToko kdKategori Lokasi noTelp

DeleteUpdate view fullT-001.............

T-n



.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.


Gambar 3.40 Rancangan Layar Halaman Tabel msToko

79

Image


Tabel msFasilitas

Insert

Kembali ke atas

kdFasilitas nmFasilitas Lokasi kdKategori

DeleteUpdate view fullF-01.............

F-n



.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.


Gambar 3.41 Rancangan Layar Halaman Tabel msFasilitas

80

Image


Tabel katToko

Insert

Kembali ke atas

kdKategori nmKategori ketKategori

DeleteUpdateK-1.............

K-n


Update Delete

DeleteUpdate

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Gambar 3.42 Rancangan Layar Halaman Tabel katToko

81

Image

Animasi ucapan Selamat Datang [nama admin LogOut

Tabel katFasilitas

Insert

Kembali ke atas

kdKategori nmKategori ketKategori

DeleteUpdateK-1.............

K-n


Update Delete

DeleteUpdate

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Gambar 3.43 Rancangan Layar Halaman Tabel katFasilitas

82

Image


Tabel msAdmin

InsertKembali ke atas

Username

DeleteUbah Password


Ubah Password

Ubah Password

Delete

Delete

Admin-1

Admin-n

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Gambar 3.44 Rancangan Layar Halaman Tabel msAdmin

83

16. Rancangan layar Halaman Insert

Image

Animasi ucapan Selamat Datang [nama admin]

Insert DataTabel ....

Field...1 :

Field...2 :

Field...3 :.....

Field...n :

Add Cancel


Gambar 3.45 Rancangan Layar Halaman Insert

Jika administrator akan melakukan penambahan data pada salah satu tabel,

maka akan muncul field-field tabel yang akan ditambahkan. Apabila administrator

yakin record tersebut akan diinsert maka klik tombol “Add”. Jika administrator klik

tombol “Cancel” maka penambahan data akan dibatalkan dan kembali ke tabel

semula.

84

17. Rancangan layar Halaman Update

Gambar 3.46 Rancangan Layar Halaman Update

Jika administrator akan melakukan perubahan data pada salah satu record,

maka akan muncul field-field record yang akan diubah. Apabila adminstrator yakin

record tersebut akan diubah maka klik tombol “Save”. Jika administrator klik

tombol “Cancel” maka perubahan data akan dibatalkan dan kembali ke tabel semula.

Image


Update DataTabel ....

Field...1:

Field...2:

Field...3:.....

Field...n:

Save Cancel


85

18. Rancangan Layar Halaman Delete

Image

Animasi ucapan Selamat Datang [nama admin]

Delete DataTabel ....

Field...1 :

Field...2 :

Field...3 :.....

Field...n :

Delete Cancel


Gambar 3.47 Rancangan Layar Halaman Delete

Jika administrator akan menghapus data salah satu record ,maka akan

muncul field-field record yang akan dihapus. Apabila administrator yakin record

tersebut akan dihapus maka klik tombol “Delete”. Jika administrator klik tombol

“Cancel” maka penghapusan data akan dibatalkan dan kembali ke tabel semula.

86

19. Rancangan Layar Halaman Ubah Password

Image


Ubah PasswordTabel msAdmin

Username :

Password Lama :

Password Baru :

Konfirmasi Password :

Save Cancel


( min.5 ; max.20 )

Gambar 3.48 Rancangan Layar Halaman Ubah Password

Jika administrator akan mengubah password lama ke password yang baru,

maka akan muncul field-field tabel untuk ubah password. Administrator harus

memasukkan password lama, password baru yang diinginkan dan konfirmasi

password baru tersebut. Jika administrator yakin record tersebut akan diubah maka

klik “Save”, jika tidak akan kembali ke tabel semula.

87

20. Rancangan Layar Halaman View Full

Tabel ....Isi lengkap dari record yang dipilih

Field...1 :Field...2 :Field...3 :

.

.

.

.

.

Field...n :

Gambar 3.49 Rancangan Layar Halaman View Full

Pada layar ini akan ditampilkan keterangan lengkap suatu record pada tabel-

tabel yang ada.

3.4.4 Rancangan Database

Database yang dirancang untuk mendukung sistem promosi yang dikembangkan

terdiri dari 6 tabel, yaitu tabel msToko, msAcara, msFasilitas, katToko, katFasilitas dan

msAdmin. Berikut ini rincian dari rancangan masing-masing tabel tersebut.

88

1. Nama Tabel : msToko

Keterangan Tabel : Tabel semua toko yang ada di Mal Puri Indah

Primary Key : kdToko

Tabel 3.1 Tabel msToko

Nama Field Tipe Data Lebar Key Keterangan Contoh

kdToko Char 4 Primary Kode toko T001

nmToko Varchar 30 - Nama toko Fiesta Steak

kdKategori Char 4 Foreign Kode kategori

toko

KT08

Lokasi Varchar 15 - Lantai dan nomor

toko

2nd # FC 221

noTelp Varchar 12 - Nomor telepon

toko

021-53672716

08137538835

9

ketToko Text - Keterangan toko Fiesta Steak

menyediakan

steak terlezat

untuk Anda...

fotoToko Varchar 20 - Nama file foto

toko

Fiesta.jpeg

Website Varchar 40 - Nama website

toko

bersangkutan

www.

baleno.com

89

2. Nama Tabel : msAcara

Keterangan Tabel : Tabel acara-acara yang diselenggarakan di Mal Puri Indah

Primary Key : kdAcara

Tabel 3.2 Tabel msAcara


kdAcara Char 3 Primary Kode acara A01

nmAcara Varchar 50 - Nama acara TheAdventure

With

Doraemon

Penyelengg

ara

Varchar 50 - Nama

penyelenggara

acara

PT Elex

Media

Computindo

tglMulai Date - Tanggal acara

dimulai

25-10-2005

tglSelesai Date - Tanggal acara

selesai

01-11-2005

ketAcara Text - Keterangan acara Acara The

Adventure

With

Doraemon ....

fotoAcara Varchar 20 - Nama file foto

acara

Doraemon.jpg

90

3. Nama Tabel : msFasilitas

Keterangan Tabel : Tabel fasilitas-fasilitas yang terdapat di Mal Puri Indah

Primary Key : kdFasilitas

Tabel 3.3 Tabel msFasilitas


kdFasilitas Char 3 Primary Kode fasilitas F01

nmFasilitas Varchar 30 - Nama fasilitas ATM Mandiri

kdKategori Char 3 Foreign Kode kategori KF1

Lokasi Varchar 24 - Lantai dan nomor

fasilitas

Basement

ATM Center #

2

noTelp Varchar 12 - Nomor telepon

fasilitas

021-5822334

ketFasilitas Text - - Keterangan

fasilitas

Anda dapat

mengambil

uang tunai

melalui ATM

Mandiri...

fotoFasilitas Varchar 20 - Nama foto

fasilitas

atm_bca.jpg

91

4. Nama Tabel : katToko

Keterangan Tabel : Tabel kategori dari toko-toko yang ada di Mal Puri Indah

Primary Key : kdKategori

Tabel 3.4 Tabel katToko


kdKategori Char 4 Primary Kode kategori

toko

KT02

nmKategori Varchar 30 - Nama kategori

toko

Pakaian, tas

dan sepatu

ketKategori Varchar 50 - Keterangan

kategori

Pakaian

wanita, pria,

anak-anak

foto_katToko Varchar 20 - Nama file foto

kategori toko

Pakaian.jpg

92

5. Nama Tabel : katFasilitas

Keterangan Tabel : Tabel kategori dari fasilitas-fasilitas yang ada di Mal Puri Indah

Primary Key : kdKategori

Tabel 3.5 Tabel katFasilitas


kdKategori Char 3 Primary Kode kategori

fasilitas

KF2

nmKategori Varchar 20 - Nama kategori

fasilitas

Telekomunika

si

ketKategori Varchar 75 - Keterangan

kategori

Warnet,

wartel,

telepon umum

foto_kat-

Fasilitas

Varchar 20 - Nama file foto

kategori fasilitas

Telekomunika

si.jpg

93

6. Nama Tabel : msAdmin

Keterangan Tabel : Tabel data administrator

Primary Key : Username

Tabel 3.6 Tabel msAdmin


username Varchar 20 Primary Nama user Nani Wijaya

password Char 32 - Hasil enkripsi

dari password

user dalam 32

karakter random

Hasil enkripsi

nani =

02ea2ae2a237

c0422

85e093e6972e

aa9

3.4.5 Spesifikasi Proses

Berikut ini adalah spesifikasi proses dari modul-modul yang mendukung website

Mal Puri Indah:

Modul transisi layar pembuka

Tampilkan Intro

Jika klik tombol Skip

Panggil modul Halaman Utama

Akhir jika

Tutup layar Intro

94

Modul Halaman Utama

Tampilkan Halaman Utama

Jika klik tombol Halaman Utama


Akhir jika

Jika klik tombol Profil

Panggil modul halaman Profil

Akhir jika

Jika klik tombol Acara

Panggil modul halaman Acara

Akhir jika

Jika klik tombol Toko

Panggil modul halaman Toko

Akhir jika

Jika klik tombol Fasilitas

Panggil modul halaman Fasilitas

Akhir jika

Jika klik tombol Hubungi Kami

Panggil modul Hubungi Kami

Akhir jika

Jika klik salah satu image, judul, atau Detil

Tampilkan halaman Detil Informasi

Akhir jika

95

Jika klik tombol kembali

Panggil modul halaman sebelumnya

Akhir jika

Tutup layar Halaman Utama

Modul halaman Profil

Tampilkan halaman Profil



Akhir jika



Akhir jika



Akhir jika



Akhir jika



Akhir jika



96

Akhir jika


Tampilkan halaman Detil Profil

Akhir jika



Akhir jika

Tutup layar halaman Profil

Modul halaman Acara

Tampilkan halaman Acara



Akhir jika



Akhir jika



Akhir jika



Akhir jika


97


Akhir jika



Akhir jika


Tampilkan halaman Detil Acara

Akhir jika

Jika klik salah satu alternatif link

Tampilkan halaman yang diinginkan

Akhir jika



Akhir jika

Tutup layar halaman Acara

Modul halaman Toko

Tampilkan halaman Toko



Akhir jika



Akhir jika

98



Akhir jika



Akhir jika



Akhir jika



Akhir jika

Jika klik salah satu nama kategori toko

Panggil modul halaman Daftar Toko

Akhir jika



Akhir jika

Tutup layar halaman Toko

99

Modul halaman Daftar Toko

Tampilkan halaman Daftar Toko

Jika klik image atau nama salah satu toko

Tampilkan halaman Detil Toko

Akhir jika

Tutup layar halaman Daftar Toko

Modul halaman Fasilitas

Tampilkan halaman Fasilitas



Akhir jika



Akhir jika



Akhir jika



Akhir jika



100

Akhir jika



Akhir jika


Tampilkan halaman Detil Fasilitas

Akhir jika



Akhir jika

Tutup layar halaman Fasilitas

Modul halaman Hubungi Kami

Tampilkan halaman Hubungi Kami



Akhir jika



Akhir jika



Akhir jika


101


Akhir jika



Akhir jika


Panggil modul halaman Hubungi Kami

Akhir jika



Akhir jika

Tutup layar halaman Hubungi Kami

Modul halaman Login Admin

Tampilkan halaman Login Admin

Masukkan username

Masukkan password

Jika klik tombol Login

Buka database tabel msAdmin

Jika username = “Username”

Jika password = “Password”

Panggil modul halaman Utama Admin

Selain Jika

Tampilkan pesan kesalahan

102

Akhir jika

Akhir jika

Tutup database tabel msAdmin

Selain jika

Kosongkan seluruh field

Akhir jika

Tutup layar halaman Login Admin

Modul halaman Utama Admin

Tampilkan halaman Utama Admin

Jika klik tombol Utama

Panggil modul halaman Utama Admin

Akhir Jika

Jika Klik tombol msAcara

Panggil modul halaman msAcara

Akhir jika

Jika klik tombol msToko

Panggil modul halaman msToko

Akhir Jika

Jika Klik tombol msFasilitas

Panggil modul halaman msFasilitas

Akhir jika

Jika klik tombol katToko

Panggil modul halaman katToko

103

Akhir Jika

Jika Klik tombol katFasilitas

Panggil modul halaman katFasilitas

Akhir jika

Jika Klik tombol msAdmin

Panggil modul halaman msAdmin

Akhir jika

Tutup layar halaman Utama Admin

Modul halaman msAcara

Buka database msAcara

Ambil data pada tabel msAcara

Tampilkan data tabel msAcara

Jika klik Insert

Panggil modul Insert

Akhir jika

Jika klik Update

Panggil modul Update

Akhir jika

Jika klik Delete

Panggil modul Delete

Akhir jika

Jika klik View Full

Panggil modul View Full

104

Akhir jika

Tutup database msAcara

Modul halaman msToko

Buka database msToko

Ambil data pada tabel msToko

Tampilkan data tabel msToko

Jika klik Insert


Akhir jika

Jika klik Update


Akhir jika

Jika klik Delete


Akhir jika

Jika klik View Full


Akhir jika

Tutup database msToko

Modul halaman msFasilitas

Buka database msFasilitas

Ambil data pada tabel msFasilitas

105

Tampilkan data tabel msFasilitas

Jika klik Insert


Akhir jika

Jika klik Update


Akhir jika

Jika klik Delete


Akhir jika

Jika klik View Full


Akhir jika

Tutup database msFasilitas

Modul halaman katToko

Buka database katToko

Ambil data pada tabel katToko

Tampilkan data tabel katToko

Jika klik Insert


Akhir jika

Jika klik Update


106

Akhir jika

Jika klik Delete


Akhir jika

Tutup database katToko

Modul halaman katFasilitas

Buka database katFasilitas

Ambil data pada tabel katFasilitas

Tampilkan data tabel katFasilitas

Jika klik Insert


Akhir jika

Jika klik Update


Akhir jika

Jika klik Delete


Akhir jika

Tutup database katFasilitas

Modul halaman msAdmin

Buka database msAdmin

Ambil data pada tabel msAdmin

107

Tampilkan data tabel msAdmin

Jika klik Insert


Akhir jika

Jika klik Ubah Password

Panggil modul Ubah Password

Akhir jika

Jika klik Delete


Akhir jika

Tutup database msAdmin

Modul Insert

Tampilkan halaman Insert

Jika klik Add

Validasi semua field pada halaman Insert

Jika valid

Ambil data dari semua field

Buka database

Simpan dalam database

Tutup database

Selain jika


Akhir jika

108

Akhir jika

Jika klik Cancel

Kembali ke halaman sebelumnya

Akhir jika

Tutup halaman Insert

Modul Update

Tampilkan halaman Update

Jika klik Save

Validasi semua field pada halaman Update

Jika valid

Ambil data dari semua field

Buka database

Simpan dalam database

Tutup database

Selain jika


Akhir jika

Akhir jika

Jika klik Cancel


Akhir jika

Tutup halaman Update

109

Modul Delete

Tampilkan halaman delete

Jika klik Delete

Hapus data dari database

Akhir jika

Jika klik Cancel


Akhir jika

Tutup halaman delete

Modul View Full

Tampilkan halaman View Full

Buka database

Ambil data dari database

Tampilkan data record secara lengkap

Tutup database

Tutup halaman View Full

bab 3 analisa dan perancangan sistem 3.1 gambaran …thesis.binus.ac.id/doc/bab3/2006-2-01117-if-bab...

Documents