## MEMBANGUN WEBSITE MALL MESRA INDAH DENGAN MENGGUNAKAN METODE UCD ( USER CENTER DESIGN )
Shinta Palupi 1) , Siti Lailiyah 2) , Shendy Indra Wijaya 3)
1 Sistem Informasi, STMIK Widya Cipta Dharma
2,3 Teknik Informatika, STMIK Widya Cipta Dharma 1,2,3 Jl. Prof. M. Yamin No. 25, Samarinda, 75123 E-mail : caca_200177@gmail.com 1) , lail.59a@gmail.com 2) , centdy@gmail.com 3)

## ABSTRAK
Mall Mesra Indah Samarinda adalah merupakan pusat perbelanjaan yang bergerak dalam bidang penjualan khususnya  Mal Pertama  yang  hadir  di  Samarinda  Provinsi  Kalimantan  Timur.  Sampai  saat  ini  pengenalan  toko-toko  dan  promosi  masih sebatas iklan melalui baliho dan spanduk.
Metode  yang  digunakan  pada  penelitian  ini  meliputi  metode  pengumpulan  data  yaitu  penelitian  lapangan  dan  penelitian kepustakaan,  sedangkan  metode  pengembangan  sistem  yang  digunakan  dalam  pengembangan  website  ini  adalah  metode User  Centered  Design (UCD)  yang  terdiri  dari  fokus  pada  pengguna,  perancangan  terintegrasi,  dari  awal  berlanjut  pada, Pengujian  pengguna,  perancangan  interaktif.  Dengan  bantuan  tools  seperti unified  modeling  language (UML), use  case diagram, activity diagram , state chart diagram , sequence diagram , dan class diagram .
Penelitian  ini  dilakukan  bertujuan  untuk  membuat  Website  Mall  Mesra  Indah  Samarinda  yang  memudahkan  para pengunjung  Mall  Mesra  Indah  dalam  mencari  info  barang  atau  produk  terbaru  yang  di  jual  Serta  Informasi  lengkap mengenai  Mall  Mesra  Indah.  Metode  yang  digunakan  dalam  pengembangan  sistem  menggunakan  metode  User  Center Design(UCD).  Alat  bantu  pengembangan  sistem  yang  digunakan  yaitu  Unified  Modeling  Languange  (UML)  dengan menggunakan bahasa pemrograman Php, Javascript dan XML serta database MySQL.
Kata Kunci: Website, Mall, Mesra Indah, Pusat Perbelanjaan,Online, Belanja, UCD

## 1. PENDAHULUAN
Web  merupakan  salah  satu  sumber  informasi  yang banyak  dipakai.  Sebagai  suatu  aplikasi,  web  dibuat dengan  tujuan  agar  pemakai  dapat  berinteraksi  dengan penyedia  informasi  dengan  mudah  dan  cepat,  yaitu melalui  dunia  internet. Aplikasi web tidak lagi terbatas sebagai  pemberi  informasi    informasi  statis,  melainkan juga  mampu  memberikan  informasi  dinamis,    dengan melakukan    koneksi    database.  Dengan  target  itu  maka banyak dibuat slogan-slogan, banner-banner, buildboard- buildboard  sampai  dengan  web  company  profile  yang bermanfaat  untuk  mempromosikan  suatu  perusahaan sehingga suatu perusahaan dapat dikenal oleh masyarakat  luas.  Dalam    hal  ini  web  salah  satu  media informasi  yang  mudah  dan  luas  jangkauannya,  supaya para    konsumen  dapat  mengetahui  tentang  Mall  Mesra Indah baik dalam negeri maupun luar negeri.
Melihat  kebutuhan  itu  maka  Mall  Mesra  Indah memerlukan  website  untuk  memberikan  info  tentang profil  pusat  perbelanjaan  sehingga  masyarakat  luas termasuk turis asing mengetahui informasi tentang profil pusat  perbelanjaan  tersebut.  Mall  Mesra  Indah  dapat  di kenal  di  masyarakat  luas.  Dengan    web    ini    semua informasi  tentang  profil  pusat  perbelanjaan  Mall  Mesra Indah  dapat  disajikan  dengan  mudah,  cepat  dan  up  to date.  Berdasarkan    uraian    di    atas    maka    kami      akan membuat    sebuah    website  company    profile    tentang
Mall Mesra Indah agar Mall Mesra Indah lebih dikenal di masyarakat  luas  dan  dapat  berkembang  dengan  baik sesuai  dengan  perkembangan  zaman.  Berdasarkan permasalahan diatas maka perlu dibangun  sebuah usulan Membangun  Website  Mall  Mesra  Indah  menggunakan teknologi javascript dan silverlight dengan metode UCD (User  Center  Design)dengan  harapan  agar  dapat memudahkan  konsumen  dalam  melakukan  pengenalan dan  promosi  yang  ada  di  website  Mall  Mesra  Indah Samarinda yang terhubung dengan internet.

## 2. RUANG LINGKUP PENELITIAN
1. Rumusan Masalah
Berkaitan    dengan    Latar    Belakang    yang    telah    di uraikan  di atas, maka  ada  beberapa  hal  yang  perlu  di rumuskan    dalam    masalah    ini    yaitu  :  “Bagaimana Membangun  website  Mall  Mesra  Indah  dengan menggunakan metode UCD (User Center Design)”.
2. Batasan Masalah
Adapun    Batasan    masalah    dari    sistem    ini    adalah untuk  menghindari  analisis  yang  berkepanjangan  dan mengingat  luasnya  ruang  lingkup  permasalahan  yang ada, Batasan  masalah  di sini  adalah :
1. Halaman Front End
1. Melihat Menu Utama
2. Melihat Company Profile
3. Melihat Isi Daftar Toko/Counter
4. Melihat Berita dan Event
5. Melihat Gallery
6. Melihat Halaman Banner
7. Melakukan Pemesanan Sewa Petak Pameran
8. Menyediakan Fasilitas Belanja Online
2. Halaman Back End
1. Pemeliharaan Login Dan Password Untuk Admin
2. Pemeliharaan Isi Data Profile
3. Pemeliharaan Data Event Dan Berita
4. Pemeliharaan Data Gallery
5. Melakukan Update Produk
6. Melihat History Transaksi
7. Pemeliharaan Data Banner
8. Pemeliharaan Testimonial

## 3. BAHAN DAN METODE

## 3.1 Penjelasan Dan Bahan
menurut  Burhan  R.M  (2003),  Internet  berasal  dari kata  Interconnection  Networking  yang  mempunyai hubungan  komputer  dengan  berbagai  tipe  yang membentuk  jaringan  yang  mencakup  seluruh  dunia (jaringan  komputer  global)  dengan  melalui  jalur telekomunikasi  seperti  telepon,  radio  link,  satelit  dan lainnya.  Setiap  komputer  dan  jaringan  terhubung  secara langsung maupun tidak langsung ke beberapa jalur utama yang  disebut  “internet  backbone”  dan  dibedakan  satu dengan yang lainnya menggunakan “unique name” yang biasa  disebut  dengan  alamat  “IP”  32  bit,  contoh  : 202.15932.0  (indo.net.id).  Dengan  Internet  kita  dapat melakukan  semua  aktivitas  informasi  seperti  menonton, baca  berita,belanja  maupun  download  bahan  apa  saja yang ada di internet.
Menurut  Jhonsen  (2004),  Internet  merupakan kumpulan dari halaman-halaman web yang berhubungan dengan file-file lain yang saling terkait. Adapun layanan informasi  tersebut  dapat  disisipi  dengan  berbagai  hal yang  ditawarkan  oleh  pengelola  website  guna  diperoleh suatu  manfaat  website  dilengkapi  sebuah  support  sistem yang berguna sebagai sarana interaksi dengan pengunjung website tersebut.
Internet  bagaikan  sebuah  pusat  informasi  terbesar  di dunia  dan  website  adalah  sebagai  salah  satu  informasi istilah-istilah di pusat informasi tersebut. Dengan website seseorang  tidak  harus  meninggalkan  aktivitasnya  seperti bekerja,  sekolah,  dll.  Hal  diatas  dapat  dilakukan  dengan mengakses  salah  satu  website  yang  telah  memberikan layanan  informasi  yang  diinginkan  secara  langsung melalui internet.
Javascript  diambil  dari  dua  suku  kata  yaitu  java  dan script java adalah bahasa pemograman yang berorientasi object. Script adalah serangkaian intruksi program secara fungsinya,  JavaScript  digunakan  untuk  menyediakan akses  script  pada  objek  yang  dibenamkan  (embedded). Contoh  sederhana  dari  penggunaan  JavaScript  adalah membuka  halaman  pop  up,  fungsi  validasi  pada  form sebelum  data  dikirimkan  ke  server,  merubah  image kursor ketika melewati objek tertentu, dan lain lain.
World  Wide  Web  menurut  Sutarman  (2009),  sering disingkat  WWW  atau  ”web”  saja,  yakni  sebuah  sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain  dipresentasikan  dalam  bentuk  hypertext  dan dapat  diakses  oleh  perangkat  lunak  yang  disebut browser.  Informasi  di  web  pada  umumnya  ditulis  dalam format HTML. Informasi lainnya disajikan dalam bentuk grafis  (dalam  format  GIF,  JPG,  PNG),  suara  (dalam format  AU,  WAV),  dan  objek  multimedia  lainnya (seperti  MIDI,  Shockwave,  Quicktime  Movie,  3D World).  WWW  dijalankan  dalam  server  yang  disebut HTTPD.  Sedangkan  menurut  Burhan  (2003),  World Wide Web adalah kumpulan homepage di internet.
3.2 Metode User Center Design (UCD)
UCD ( User Centered Design ) merupakan paradigma baru  dalam  pengembangan  sistem  berbasis  web. Perancangan berbasis pengguna (User Centered design = User  Centered  Design  =  UCD)  adalah  istilah  yang  yang digunakan untuk untuk menggambarkan filosofi perancangan.  Konsep  dari  UCD  adalah  user  sebagai pusat dari proses pengembangan sistem, dan tujuan/sifat- sifat,  konteks  dan  lingkungan  sistem  semua  didasarkan dari  pengalaman  pengguna.  Prinsip  yang  harus diperhatikan dalam UCD adalah:
1. Fokus pada pengguna
Perancangn  harus  berhubungan  langsung  dengan pengguna  sesungguhnya  atau  calon  pengguna  melalui interview,  Survey,  dan  partisipasi  dalam  workshop perancangan.
Tujuannya adalah untuk memahami kognisi, karakter, dan  sikap  pengguna  serta  karakteristik  anthropometric. Aktivitas utamanya mencakup pengambilan data, analisis dan  integrasinya  ke  dalam  informasi  perancangan  dari pengguna  tentang  karakteristik tugas, lingkungan teknis, dan organisasi.
2. Perancangan terintergrasi
Perancangan  harus  mencakup  antarmuka  pengguna, sistem  bantuan,  dukungan  teknis  serta  prosedur  instalasi dan konfigurasi.
3. Dari awal berlanjut pada penggujian pengguna Satu-satunya pendekatan yang sukses dalam perancangan sistem yang berpusat pada pengguna adalah secara  empiris  dibutuhkan  observasi  tentang  kelakuan pengguna,  evaluasi  umpan-balik  yang  cermat,  wawasan pemecahan  terhadap  masalah  yang  ada,  dan  motivasi yang kuat untuk mengubah rancangan.
4. Perancangan interaktif.
Sistem yang sedang dikembangkan harus didefinisikan,  dirancang,  dan  ditest  berulang  kali. Berdasarkan  hasil  test  kelakuan  dari  fungsi,  antarmuka, sistem bantuan, dokumementasi pengguna, dan pendekatan pelatihannya.

## Gambar 1. Gambar Proses UCD berdasarkan ISO
13407:1999
Keterangan gambar:
1. Memahami dan menentukan konteks pengguna
2. Menentukan kebutuhan pengguna dan Organisasi
3. Solusi perancangan yang dihasilkan
4. Evaluasi Perancangan terhadap kebutuhan pengguna

## 4. RANCANGAN SISTEM/APLIKASI 4.1  Usecase Diagram
Menggambarkan aktivitas  yang dapat dilakukan oleh sistem  dari  sudut  pandang  user  sebagai  pemakai (external observer) dan berhubungan dengan skenario-skenario yang dapat dilakukan oleh user. Gambar  disain  Website  Mall  Mesra  Indah    dari  9 Usecase  yang  diwakili  dengan  gambar  elips,  dan  2 buah actor pengguna.
Manage Akun Manage Banner Manage Produk Manage Intermezzo Register Member Transaksi Testimonial Login Administrator LogOut Member
Gambar 2. Gambar Proses Usecase diagram Mall Mesra Indah
Tabel 4.1 Keterangan Diagram Usecase Website Mal Mesra Indah Nama Use Case Use Case Website Mal Mesra Indah Deskripsi Singkat Administratormanage data pengguna. Aktor Administrator& Member Tindakan Utama 1. Mengelola data pengguna . 2. Memiliki akses untuk memanage akun,banner,produk,interm ezzo dah history transaksi adapun perincian usecase  adalah sebagai berikut : 1. Usecase :
1) Login : halaman login untuk masuk kedalam system administrator website.
2) Menu dashboard : tombol untuk menuju ke halaman admin untuk melakukan manajemen akun.
3) Menu Banner : tombol untuk menuju kehalaman admin melakukan pengaturan banner iklan yang ada dihalaman website.
4) Menu Produk: tombol untuk menuju ke halaman admin untuk melakukan editing produk dimana pengguna dapat mengelola data produk baik menambah kategori ataupun menambah produk.
5) Menu Member & Testimonial: tombol untuk menuju ke halaman admin melakukan pengaturan member aktif dan yang mengirimkan testimonial apakah akan ditampilkan atau tidak pesannya.
6) Menu Intermezzo:tombol untuk menuju ke halaman admin untuk melakukan editing artikel atau memasukan berita.
7) Menu Register Member: tombol untuk menuju
ke halaman member untuk mendaftar jadi member agar bisa melakukan pembelanjaan secara online di situs ini.
8) Menu Transaksi : tombol untuk menuju ke halaman admin untuk melihat history transaksi yang telah dilakukanoleh para member.
9) Logout : Tombol untuk keluar dari system administrator website.

## 4.2 Struktur database
1. Tabel Data Admin
Nama Tabel  : tbl_spr_admin Primary Key  : kode_spr_admin
Tabel 4.1 Data Admin Field Type Panjang Keterangan Kode_spr_admn Int 10 Kode admin Username_admn Varchar 50 Username admin Pass_admn Varchar 100 Password admin Nama_admn Varchar 100 Nama admin Stts Varchar 20 Status Lvl Varchar 20 Level Email Varchar 50 Email admin Alamat Text Alamat admin Tgl_lahir Varchar 50 Tanggal Lahir admin 2. Tabel Data User
Nama Tabel  : tbl_user
Primary Key  : kode_user Tabel 4.2 Data User Field Type Panjang  Keterangan Kode_user Int 10 Kode user Username_user Varchar 100 Username user Pass_user Varchar 200 Password user Nama Varchar 200 Nama user Email Varchar 200 Email user Alamat Text Alamat user Telpon Varchar 50 Telpon user Propinsi Varchar 200 Propinsi user Kota Varchar 200 Kota user Kode_Pos Varchar 30 Kode pos user Tgl_Lahir Varchar 50 Tanggal Lahir Stts Int 1 Status user Kode_aktivasi Varchar 200 Kode aktivasi user Tgl_transaksi Varchar 30 Tanggal transaksi
3. Tabel Transaksi Detail Nama Tabel  : tbl_transaksi_detail

## Primary Key  : kode_transaksi_detail
Tabel 4.3 Data Transaksi Field Type Panjang Keteran gan Kode_transaksi_detail Int 50 Kode transaksi detail Kode_transaksi Begint 150 Kode transaksi Kode_Produk Varchar 50 Kode produk Nama_Produk Varchar 150 Nama produk Harga Varchar 150 Harga Barang Jumlah Int 10 Jumlah
4. Tabel Directory
Nama Tabel  : tbl_directory
Primary Key  : Id_toko
Tabel 4.4 Data Nama Toko Field Type Panjang Keterangan Id_toko Int 10 Id toko atau counter Nama_toko Varchar 50 Nama Toko Jenis_Usaha Varchar 100 Jenis Usaha Lantai Varchar 100 Lantai Toko 5. Tabel Kategori
Nama Tabel  : Tabel_kategori Primary Key  : Id_Kategori Tabel 4.5 Data Kategori Field Type Panjang Keterangan Id_kategori Int 10 Kategori produk Nama_kategori Varchar 100 Nama kategori produk Kode_level Int 2 Kode level produk Kode_Parent Int 5 Kode parent produk
6. Tabel Produk Nama Tabel  : tbl_Produk Primary Key  : Kode_Produk Tabel 4.6 Data Produk Field Type Panjang  Keterangan Kode_Produk Int 10 Kode produk Id_Kategori Varchar 50 Id Kategori Produk Nama_Produk Varchar 100 Nama Produk Harga Int 10 Harga Produk Stok Int 5 Stok produk Dibeli Int 5 Banyaknya pembelian Gbr_Kecil Varchar 50 Gambar produk kecil Gbr_Besar Varchar 100 Gambar produk besar Deskripsi Text Deskripsi produk Tipe_Produk Varchar 10 Tipe produk

## 5. IMPLEMENTASI
1. Tampilan Menu website Mall Mesra Indah

## Gambar 3 Tampilan Halaman Website
Pada  gambar  3  diatas  adalah  tampilan  Halaman Website  Mall  Mesra  Indah  Samarinda  yang  terdiri  dari menu  Beranda,  Directory  Mall,  Sewa  Pameran,  Cara Belanja, Site Map dan Keranjang Belanja.

## 2. Tampilan Halaman Login Administrator

## Gambar 4 Tampilan Halaman Login Administrator
Pada gambar 4 diatas adalah tampilan Halaman login administrator Website Mall Mesra Indah Samarinda yang terdiri dari username dan password.

## 3. Tampilan Halaman Administrator
Gambar 5 Tampilan Halaman Administrator
Pada  gambar  5  diatas  adalah  tampilan  Halaman dashboard  administrator  Website  Mall  Mesra  Indah Samarinda terdapat banyak pengaturan didalam halaman website  ini  antara  lain  pengaturan  akun,  pengaturan banner,  pengaturan  member  dan  testimonial,  produk, pengaturan  intermezzo  serta  menampilkan  history transaksi  belanja  baik  dalam  hitungan  harian,  bulanan dan tahunan.

## 4. Tampilan Halaman Administrator

## Gambar 6 Tampilan Halaman Log In Member
Pada gambar 6 diatas adalah tampilan Halaman log in member  Website  Mall  Mesra  Indah  Samarinda  terdapat banyak  menu  username,  password,  lupa  password,  dan register member.

## 5. Tampilan Halaman Administrator

## Gambar 7 Tampilan Halaman Member
Pada  gambar  7  diatas  adalah  tampilan  Halaman member  Website  Mall  Mesra  Indah  Samarinda  terdapat banyak  menu  pengaturan  profil,  pengaturan  password, history transaksi, konfirmasi pembayaran, kirim testimonial, hubungi / kontak kami dan log out member.

## 6. KESIMPULAN
Kesimpulan dari penelitian. Adalah sebagai berikut :
1. Website  ini  bisa  menampilkan  informasi  nama toko atau counter yang ada di Mal Mesra Indah.
2. Website  ini  memberikan  informasi  produk-  produk yang dijual di Mal Mesra Indah.
3. Website  ini  bisa  melayani  transaksi  pembelian produk secara online dengan pembayaran via   Bank khusus yang suah terdaftar menjadi member.
4. Website  ini  menyediakan  fasilitas  chat  langsung dengan  CS  via  YM  dan  kirim  komentar  di testimonial.
5. Website  ini  menyediakan  fasilitas  Download Katalog  untuk  mengetahui  apa  saja  barang-barang terbaru yang dijual di Mal Mesra Indah .
6. Website  ini  bisa  melihat  jumlah  history  transaksi pembelanjaan  dalam  periode  harian,  bulanan,  dan tahunan.

## 7. SARAN
Saran  dari  penelitian,  apabila  suatu  saat  ada  pihak yang terinspirasi  untuk melakukan penelitian lebih lanjut dalam    rangka  mengoptimalkan  dan  menyempurnakan hasil perancangan website ini.

## 8. DAFTAR PUSTAKA
Sutarman, (2009).Pengantar Teknologi  Informasi, Yogyakarta : Bumi Aksara.
Wahana komputer, 2010. Panduan Belajar MySQL Database Server, Jakarta:Media Kita.
Burhan R.M. 2003. Kamus Dunia Komputer dan Internet.Surabaya.Anggota AKAPI
Betha Sidik  Ir. 2003. Pemrograman Web dengan HTML
Taha, Deya Arzuningsih.2012. Penerapan Metode user Centered  Design  (UCD)  Untuk  meningkatkan Usability Sistem Pemasaran Online. Skripsi. Universitas Negeri Gorontalo.
Jurnal Jessianti dan Sutini, STMIK MDP Palembang (2007).Metode UCD untuk Rancangan Kios Informasi Rumah Sakit Bersalin XYZ).