bab 3 analisa dan perancangan sistem 3.1 gambaran …thesis.binus.ac.id/doc/bab3/2006-2-01117-if-bab...
Post on 15-Mar-2019
216 Views
Preview:
TRANSCRIPT
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.
31
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
Website Mal Puri Indah
Fasilitas
Klik halaman lainTampilkan halaman lain
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
Website Mal Puri Indah
Toko
Klik halaman lainTampilkan halaman lain
Klik "Toko"Tampilkan halaman Toko
Klik "Toko"
Daftar Toko
Klik Image, Judul salah satu Kategori TokoTampilkan Daftar Toko per Kategori
Detil Toko
Klik halaman lainTampilkan halaman lain
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
Website Mal Puri Indah
Acara
Klik halaman lainTampilkan halaman lain
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
Website Mal Puri Indah
Hubungi Kami
Klik halaman lainTampilkan halaman lain
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 menu lainTampilkan 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 "View Full"Tampilkan Halaman View Full
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 menu lainTampilkan halaman lain
Klik "msToko"Tampilkan Halaman msToko
Halaman LoginAdmin Klik "Logout"
Tampilkan Halaman Login Admin
Gambar 3.19 State Transition Diagram Halaman msToko
Setelah masuk ke halaman msToko, 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
field-field untuk penambahan data, kemudian klik tombol “Add” untuk menambah
record baru ke dalam database dan masuk ke halaman msToko. 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 msToko. Pada halaman Delete akan ditampilkan field-field record yang
55
akan dihapus, kemudian klik tombol “Delete” untuk menghapus record yang dipilih
dan masuk ke halaman msToko. Jika administrator klik tombol “Cancel” ,akan
masuk ke halaman msToko. 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.
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 "View Full"Tampilkan Halaman View Full
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 menu lainTampilkan halaman lain
Klik "msFasilitas"Tampilkan Halaman msFasilitas
Halaman LoginAdmin Klik "Logout"
Tampilkan Halaman Login Admin
Gambar 3.20 State Transition Diagram Halaman msFasilitas
56
Setelah masuk ke halaman msFasilitas, 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
field-field untuk penambahan data, kemudian klik tombol “Add” untuk menambah
record baru ke dalam database dan masuk ke halaman msFasilitas. 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 msFasilitas. Pada halaman Delete akan ditampilkan field-field record yang
akan dihapus, kemudian klik tombol “Delete” untuk menghapus record yang dipilih
dan masuk ke halaman msFasilitas. Jika administrator klik tombol “Cancel”, akan
masuk ke halaman msFasilitas. 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.
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 menu lainTampilkan halaman lain
Klik "katToko"Tampilkan Halaman katToko
Halaman LoginAdmin Klik "Logout"
Tampilkan Halaman Login Admin
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 menu lainTampilkan halaman lain
Klik "katFasilitas"Tampilkan Halaman katFasilitas
Halaman LoginAdmin Klik "Logout"
Tampilkan Halaman Login Admin
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 menu lainTampilkan halaman lain
Klik "msAdmin"Tampilkan Halaman msAdmin
Halaman LoginAdmin Klik "Logout"
Tampilkan Halaman Login Admin
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
HubungiKamiFasilitas
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
HubungiKamiFasilitas
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
HubungiKamiFasilitas
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
HubungiKamiFasilitas
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
HubungiKamiFasilitas
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
HubungiKamiFasilitas
Berisi daftar nomor telepon, emaildan fax yang dapat dihubungi
Hubungi kami...
Alamat
No. Telepon
Fax
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
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Update Delete view full
Gambar 3.39 Rancangan Layar Halaman Tabel msAcara
78
Image
Animasi ucapan Selamat Datang [nama admin] LogOut
Tabel msToko
Insert
Kembali ke atas
kdToko nmToko kdKategori Lokasi noTelp
DeleteUpdate view fullT-001.............
T-n
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
Update Delete view full
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Update Delete view full
Gambar 3.40 Rancangan Layar Halaman Tabel msToko
79
Image
Animasi ucapan Selamat Datang [nama admin] LogOut
Tabel msFasilitas
Insert
Kembali ke atas
kdFasilitas nmFasilitas Lokasi kdKategori
DeleteUpdate view fullF-01.............
F-n
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
Update Delete view full
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Update Delete view full
Gambar 3.41 Rancangan Layar Halaman Tabel msFasilitas
80
Image
Animasi ucapan Selamat Datang [nama admin] LogOut
Tabel katToko
Insert
Kembali ke atas
kdKategori nmKategori ketKategori
DeleteUpdateK-1.............
K-n
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
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
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
Update Delete
DeleteUpdate
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Gambar 3.43 Rancangan Layar Halaman Tabel katFasilitas
82
Image
Animasi ucapan Selamat Datang [nama admin] LogOut
Tabel msAdmin
InsertKembali ke atas
Username
DeleteUbah Password
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
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
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
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
Animasi ucapan Selamat Datang [nama admin] LogOut
Update DataTabel ....
Field...1:
Field...2:
Field...3:.....
Field...n:
Save Cancel
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
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
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
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
Animasi ucapan Selamat Datang [nama admin] LogOut
Ubah PasswordTabel msAdmin
Username :
Password Lama :
Password Baru :
Konfirmasi Password :
Save Cancel
Utama msAcara msToko msFasilitas katFasilitaskatToko msAdmin
( 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
Nama Field Tipe Data Lebar Key Keterangan Contoh
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
Nama Field Tipe Data Lebar Key Keterangan Contoh
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
Nama Field Tipe Data Lebar Key Keterangan Contoh
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
Nama Field Tipe Data Lebar Key Keterangan Contoh
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
Nama Field Tipe Data Lebar Key Keterangan Contoh
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
Panggil modul 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
Jika klik tombol Halaman Utama
Panggil modul 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
96
Akhir jika
Jika klik salah satu image, judul, atau Detil
Tampilkan halaman Detil Profil
Akhir jika
Jika klik tombol kembali
Panggil modul halaman sebelumnya
Akhir jika
Tutup layar halaman Profil
Modul halaman Acara
Tampilkan halaman Acara
Jika klik tombol Halaman Utama
Panggil modul 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
97
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 Acara
Akhir jika
Jika klik salah satu alternatif link
Tampilkan halaman yang diinginkan
Akhir jika
Jika klik tombol kembali
Panggil modul halaman sebelumnya
Akhir jika
Tutup layar halaman Acara
Modul halaman Toko
Tampilkan halaman Toko
Jika klik tombol Halaman Utama
Panggil modul Halaman Utama
Akhir jika
Jika klik tombol Profil
Panggil modul halaman Profil
Akhir jika
98
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 nama kategori toko
Panggil modul halaman Daftar Toko
Akhir jika
Jika klik tombol kembali
Panggil modul halaman sebelumnya
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
Jika klik tombol Halaman Utama
Panggil modul 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
100
Akhir jika
Jika klik tombol Hubungi Kami
Panggil modul Hubungi Kami
Akhir jika
Jika klik salah satu image, judul, atau Detil
Tampilkan halaman Detil Fasilitas
Akhir jika
Jika klik tombol kembali
Panggil modul halaman sebelumnya
Akhir jika
Tutup layar halaman Fasilitas
Modul halaman Hubungi Kami
Tampilkan halaman Hubungi Kami
Jika klik tombol Halaman Utama
Panggil modul 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
101
Panggil modul halaman Toko
Akhir jika
Jika klik tombol Fasilitas
Panggil modul halaman Fasilitas
Akhir jika
Jika klik tombol Hubungi Kami
Panggil modul halaman Hubungi Kami
Akhir jika
Jika klik tombol kembali
Panggil modul halaman sebelumnya
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
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
Akhir jika
Tutup database msToko
Modul halaman msFasilitas
Buka database msFasilitas
Ambil data pada tabel msFasilitas
105
Tampilkan data tabel msFasilitas
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
Akhir jika
Tutup database msFasilitas
Modul halaman katToko
Buka database katToko
Ambil data pada tabel katToko
Tampilkan data tabel katToko
Jika klik Insert
Panggil modul Insert
Akhir jika
Jika klik Update
Panggil modul Update
106
Akhir jika
Jika klik Delete
Panggil modul Delete
Akhir jika
Tutup database katToko
Modul halaman katFasilitas
Buka database katFasilitas
Ambil data pada tabel katFasilitas
Tampilkan data tabel katFasilitas
Jika klik Insert
Panggil modul Insert
Akhir jika
Jika klik Update
Panggil modul Update
Akhir jika
Jika klik Delete
Panggil modul 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
Panggil modul Insert
Akhir jika
Jika klik Ubah Password
Panggil modul Ubah Password
Akhir jika
Jika klik Delete
Panggil modul 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
Tampilkan pesan kesalahan
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
Tampilkan pesan kesalahan
Akhir jika
Akhir jika
Jika klik Cancel
Kembali ke halaman sebelumnya
Akhir jika
Tutup halaman Update
109
Modul Delete
Tampilkan halaman delete
Jika klik Delete
Hapus data dari database
Akhir jika
Jika klik Cancel
Kembali ke halaman sebelumnya
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
top related