Perancangan Katalog Merchandise Berbasis Mobile Web

(1)

Perancangan Katalog Merchandise Berbasis Mobile Web

Yeni Risyani1), Jimmy Candra2)

STMIK IBBI Jl. Sei Deli No. 18 Medan

e-mail: ms_yenir@yahoo.com, jimmy_candra@gmail.com

ABSTRAK

Dewasa ini, tersedia banyak media yang dapat dipergunakan untuk memasarkan produk, Untuk membeli produk seseorang tidak harus ke pasar tetapi dapat memesan dari rumah dan barang akan diantar hingga ke rumah. Tujuan penelitian ini adalah mengembangkan dan merancang sebuah aplikasi berbasis mobile web yang dapat memberikan informasi produk-produk yang ditawarkan kepada para pelanggan ataupun calon pelanggan. Aplikasi mobile web yang akan dibangun hanya sebatas katalog produk ditambah dengan fasilitas lain seperti berita dan pemesanan. Aplikasi mobile web bermamfaat memudahkan proses penyampaian informasi produk-produk dan memberikan kemudahan akses informasi produk tanpa terikat tempat dan waktu yaitu dengan mempergunakan smartphone yang terkoneksi jaringan internet serta memudahkan pelanggan memperoleh informasi mengenai produk terbaru, harga terbaru dan pencarian produk serta untuk menjangkau daerah pemasaran yang lebih luas. Mobile web ini di bangun dengan menggunakan HTML, CSS, Jquerymobile, PHP dan MySQL. Perangkat lunak yang digunakan adalah Dreamweaver 8 dan XAMPP. Metode penelitian yang yang dilakukan dengan menggunakan observasi, wawancara langsung dengan responden dan studi pustaka dari buku-buku yang berkaitan dengan penelitian ini.

Kata kunci : Katalog produk, jquerymobile

ABSTRACT

Nowadays, there are many media that can be used to buy and sell products. people can stay at home, without having to leave home. products can be ordered and delivered to the buyer's door. as well as for sellers. The purpose of this research is to develop and designed a mobile web-based applications that can provide information about the products to the customers or prospective customers. Mobile web application that would include: product catalog along with news and equipped with facilities to order the products. Mobile web applications useful as a tool for spreading information about product that is accessible at anywhere and anytime. By using the Internet-connected smartphones, customers can get information on the latest products, new prices and product search. Mobile web is built using HTML, CSS, Jquerymobile, PHP and MySQL. The software used was Dreamweaver 8 and XAMPP. The research method is performed by using observation, interviews with respondents and literature from books related to the study.

Keywords : product catalog, jquerymobile

1.

Pendahuluan

Dewasa ini internet merupakan media elektronik yang sudah tidak asing lagi di masyarakat. Pemanfaatannya pun sudah meluas hingga ke pasar bisnis. Tidak sedikit orang-orang yang memanfaatkan teknologi ini untuk memudahkan proses bisnis mereka seperti pemasaran produk, jual beli hingga transaksi pembayaran. Namun manfaat internet juga sangat bergantung pada produk dan jasa yang akan ditawarkan. Produk yang satu dengan produk yang lainnya tentunya juga berpengaruh ke cara memanfaatkan internet tersebut. Tipe atau jenis usaha juga ikut serta mempengaruhi cara perusahaan-perusahaan ataupun orang-orang dalam memanfaatkan internet sebagai sarana bisnisnya, apakah dia seorang pemasok, distributor atau seorang pengecer.

Teknologi yang berkembang saat ini, tentunya membuat orang mendapatkan informasi menjadi lebih mudah dan cepat. Internet merupakan sarana dalam pencarian informasi saat ini karena informasi yang dibutuhkan dapat diketahui dengan cepat, kapan saja dan dimana saja selama terdapat jaringan internet. Untuk mendapatkan informasi yang cepat dimana saja dan kapan saja, mobile web adalah salah

(2)

JURNAL ILMIAH CORE IT_{Vol. 2 No. 1, Maret 2014}

satu solusinya karena kini telah banyak orang yang menggunakan perangkat mobile sehingga mobile web semakin sering digunakan dan semakin berkembang.

Saat ini peneliti memasarkan berbagai merchandise basket ball melalui media Blackberry messenger. Produk merchandise basket ball seperti bola basket, baju, celana, sepatu, sleeve, dan berbagai aksesoris basket lainnya. Lokasi pemasaran saat ini hanya mencakup wilayah kota Medan - Sumatera Utara berhubung hanya melalui media Blackberry messenger. Peneliti juga belum mengoptimalkan tingkat pemasaran produk. Sebagai contoh dalam memasarkan produk tentunya peneliti hanya bisa memasarkan ke pelanggan yang sudah ada di contact list blackberry messenger saja sehingga belum begitu maksimal mengingat contact list harus ditambahkan terlebih dahulu. Proses distribusi informasi pun hanya dapat menggunakan broadcast message, dimana dengan cara ini tentunya belum begitu efektif dikarenakan mudahnya terhapus sebuah broadcast message. Informasi produk-produk yang diberikan melalui broadcast message tentunya juga tidak begitu lengkap dikarenakan hanya berupa keterangan yang tidak didukung oleh gambar produk yang jelas.

Dengan menerapkan internet marketing atau online marketing melalui pemanfaatan mobile web, bukan hanya akan meminimalisasi biaya pemasaran, namun juga peneliti akan lebih mudah memasarkan berbagai merchandise sehingga pelanggan maupun calon pelanggan akan lebih mudah mendapatkan informasi produk dan harga. Informasi yang disajikan pun bersifat global, artinya distribusi informasi tersebut dapat dijangkau di mana saja dan kapan saja. Alasan di atas yang mendasari peneliti tertarik untuk melakukan penelitian membangun suatu katalog produk berbasis mobile web dengan judul “Perancangan Katalog Merchandise Berbasis Mobile Web”.

2.

Metode Penelitian

Metodologi penelitian dilakukan dengan mengumpulkan data terlebih dahulu. Proses pengumpulan data dilakukan dengan dua cara yaitu : studi lapangan dan studi literatur. Studi lapangan dilakukan dengan mencari bahan penelitian untuk melakukan wawancara dan observasi. Wawancara yaitu suatu teknik pengumpulan data dengan cara mengadakan tanya jawab langsung kepada pelanggan dengan wawancara terstruktur yang disiapkan oleh peneliti untuk mengetahui apakah selama ini penyajian informasi produk sudah informatif dan mudah dimengerti. Observasi dilakukan dengan melakukan pengamatan web yang terdapat di internet yang bertopik sejenis. Studi literatur dilakukan dengan mengunjungi dan mempelajari website atau situs-situs yang berhubungan penelitian, seperti website lain yang menyediakan penjualan online serta mempelajari bahasa pemrograman web dan mengunjungi situs-situs yang mneyediakan tutorial mengenai bahasa pemrograman yang peneliti gunakan.

Setelah melakukan pengumpulan data penelitian, penelitian dikembangkan dengan langkah-langkah seperti yang digambarkan di alur sistem metode penelitian berikut.

(3)

Gambar 2. Diagram Tahapan Pengembangan mobile web.

Pengembangan mobile web ini, dilakukan dengan menggunakan System Development Life Cycle (SDLC) model Waterfall yang terdiri dari 5 tahapan berikut:

Tahap pertama yaitu Analysis (analisa), merupakan tahap untuk analisa kebutuhan mobile web yang tujuannya untuk mengumpulkan kebutuhan-kebutuhan pengguna dan kemudian mentrasformasikan kedalam sebuah deskripsi yang jelas dan lengkap. Tahap kedua yaitu design (desain), merupakan tahap mendesain mobile web yang meliputi desain layout halaman-halaman mobile web, arsitektur mobile web, dan desain database. Tahap ketiga yaitu coding (Penelitian Kode Program) yang merupakan tahap mengkonversi apa yang telah didesain sebelumnya ke dalam sebuah bahasa yang di mengerti komputer. Kemudian komputer akan menjalankan fungsi-fungsi yang telah didefinisi sehingga mampu memberikan layanan-layanan kepada penggunanya. Dalam proses ini penulis menggunakan HTML (Hyper Text Markup Language) dan CSS (Cascading Style Sheet) untuk mengatur tampilan mobile web, serta PHP dan MySQL untuk membuat tampilan mobile web yang dinamis. Tahap keempat yaitu testing (pengujian) yaitu tahap untuk menemukan kesalahan-kesalahan pada mobile web tersebut, juga untuk menguji apakah mobile web tersebut sudah memenuhi spesifikasi kebutuhan yang telah dibuat sebelumnya. Tahap kelima yaitu maintenance (pemeliharaan) adalah tahap penggunaan mobile web yang disertai dengan perawatan dan perbaikan. Perawatan dan perbaikan suatu mobile web diperlukan, termasuk di dalamnya adalah pengembangan, karena dalam prakteknya ketika mobile web tersebut digunakan terkadang masih terdapat kekurangan ataupun penambahan fitur-fitur baru yang dirasa perlu.

Perancangan sistem meliputi perancangan diagram konteks (DFD), struktur tabel, perancangan entity relationship diagram (ERD) dan tampilan website.

Gambar 3 Diagram Konteks

Pada Gambar 3.. dapat kita lihat terjadinya interaksi antara sistem dengan tiga buah entitas luar yakni web admin dan customer, di mana web admin memasukkan (input) data produk dan berita ke dalam mobile web. Kemudian data tersebut diproses di dalam mobile web dan menghasilkan output yang ditujukan kepada customer yaitu berupa data-data produk dan berita. Selanjutnya Customer memberikan input ke sistem yang diproses dan sampaikan (output) ke web admin berupa pertanyaan dan komentar.

(4)

DFD level nol merupakan dekomposisi dari diagram konteks yang memberikan gambaran terperinci dari proses utama yang ada pada sistem. Berikut ini merupakan diagram level nol dari mobile web katalog produk yang dapat dilihat pada gambar 5. berikut:

Gambar 5. Diagram Level Nol Tabel 1 Struktur Tabel Kategori

Field Type Length Null Extra

id_kategory INT 11 No AUTO_INCREMENT

nama_kategory VARCHAR 50 No -

deskripsi TEXT - No -

gambar LONGBLOB - Yes -

Tabel 2. Struktur Tabel Produk

Id_produk INT 5 No AUTO_INCREMENT

Id_kategori INT 5 No -

nama_produk VARCHAR 50 No -

deskripsi Text - No -

harga INT 20 No -

Tabel 3 Struktur Tabel berita

Id_berita INT 11 No AUTO_INCREMENT

judul VARCHAR 100 No -

Isi_berita TEXT - No -

Last_updated VARCHAR 30 No -

Tabel 4. Struktur Tabel Order

(5)

Nama_kustomer VARCHAR 100 No -

Alamat TEXT - No -

Telpon VARCHAR 50 No -

Email VARCHAR 50 No -

Total harga INT 20 No -

Jam order TIME - No -

Tanggal order DATE - No -

Tabel 5. Struktur Tabel Order_detail

id_order INT 5 No AUTO_INCREMENT

Id_produk INT 5 No -

Jumlah INT 10 No -

subtotal INT 20 No -

Tabel 6. Struktur Tabel Orders_temp

Id_order_temp VARCHAR 50 No AUTO_INCREMENT

Id_produk VARCHAR 50 No -

Jumlah VARCHAR 50 No -

Jam_order_temp VARCHAR 15 No -

Tgl_order_temp VARCHAR 50 No -

Tabel 7. Struktur Tabel Administrator

Username VARCHAR 50 No AUTO_INCREMENT

Password VARCHAR 50 No -

Nama VARCHAR 50 No -

Level VARCHAR 15 No -

Last login VARCHAR 50 No -

Last logout VARCHAR 50 No -

(6)

Gambar 7. Rancangan halaman Home, View_berita, Product, Data Customer, Contact Us, Search, Login, Home Administrator, Administrator berita, Administrator Isi Katalog, Administrator Produk,

(7)

Gambar 8. Site Map

3.

Analisis dan Hasil

Analisis website mobile terdiri dari analisis sistem yang sedang berjalan dan analisis sistem usulan. Analisis sistem berjalan adalah sebagai berikut : Informasi produk-produk didistribusikan melalui broadcast message melalui media blackberry messenger. Setelah itu informasi produk akan diterima oleh pelanggan, dan pemesanan akan dilakukan pelanggan setelah ada kesepakatan harga sesuai dengan harga yang telah diinformasikan sebelumnya. Selanjutnya produk-produk yang sudah dipesan tersebut diantarkan ke alamat pelanggan. Setelah pesanan diterima oleh pelanggan maka proses berakhir. Sementara sistem usulan menggunakan katalog produk berbasis mobile web. Adalah sebagai berikut : pengiriman pesanan dimulai dari pemilihan produk, input data produk kemudian tampilkan data produk yang sudah diinput tersebut. Lalu pelanggan akan memesan barang dari data produk yang ditampilkan. Setelah itu konfirmasi pesanan yang sudah dipesan terlebih dahulu oleh pelanggan atau pun calon pelanggan, kemudian setelah semua beres maka akan dilakukan pengiriman barang pesanan ke pelanggan ataupun calon pelanggan tersebut.

(8)

Tampilan website katalog produk berbasis mobile web terdiri dari : halaman front end merupakan halaman yang dapat diakses oleh semua pengunjung yang bertujuan untuk memberikan/menampilkan informasi bagi pengunjung, sedangkan halaman back end merupakan restricted pages yang hanya boleh diakses oleh administrator web. Halaman back end berfungsi untuk memasukkan (insert), memperbaharui (update), dan menghapus (delete) data atau informasi yang akan ditampilkan di halaman front end. Rancangan halaman-halaman front end pada mobile web katalog produk adalah berikut :

Gambar 10. Halaman : Home, View_Berita, Catalog, Produk, List Cart, Data_customer, Selesai_Belanja, contact us dan search.

(9)

Gambar 11. halaman : login, index, berita, tambah berita, edit berita, hapus berita, kategori, tambah kategori, edit kategori, hapus katagori, produk, tambah produk, edit produk, hapus produk, order, hapus

order, order_detail, user_admin, tambah user_admin, edit user_admin, hapus, user_admin 4. Kesimpulan dan Saran

Berdasarkan penelitian dapat disimpulkan bahwa penggunaan mobile web tersebut memudahkan proses pemberian informasi, sebab untuk memperoleh informasi, pelanggan hanya perlu mengunjungi mobile web tersebut, dan keterbatasan jangkauan lokasi dalam rangka pemberian informasi dapat teratasi, karena informasi mengenai produk dapat diakses di manapun dan kapanpun dengan menggunakan

(10)

perangkat smartphone yang terkoneksi jaringan internet. Untuk pengembangan lebih lanjut pertimbangan beberapa saran berikut : sebaiknya katalog berbasis mobile web ini dikembangkan dan disempurnakan sehingga tersedia sistem penjualan online dan pembayaran online, misalnya menggunakan kartu kredit.

Daftar Pustaka

[1] Al-Fatta, Hanif. Analisis dan Perancangan Sistem Informasi untuk Keunggulan Bersaing Perusahaan dan Organisasi Modern.Yogyakarta: Penerbit Andi, 2007.

[2] Ardhana, Kusuma. YM. PHP Menyelesaikan Website 30 Juta. Purwokerto : Jasakom. 2013. [3] Arifin, Miftaho. Simulasi Sistem Industri. Yogyakarta : Graha Ilmu. 2009.

[4] Irwanto, Djon. Perancangan Object Oriented Software dengan UML. Yogyakarta : Andi. 2005. [5] Jogiyanto. Analisis dan Desain Sistem Informasi. Yogyakarta: Penerbit Andi. 2005.

[6] Komputer Wahana. Tips & Trik Adobe Dreamweaver CS5.5. Yogyakarta : Penerbit Andi. 2012. [7] Ladjamudin, Bin, Al-Bahra. Analisis dan Desain Sistem Informasi. Tangerang : Graha Ilmu. 2005. [8] Madcoms. Aplikasi Web Database dengan Dreamweaver dan PHP-Mysql. Yogyakarta : Penerbit

Andi. 2011.

[9] McLeod, Raymond, Jr.George Schell. Sistem Informasi Manajemen. Jakarta: PT. Indeks. 2004. [10] Munawar. Pemodelan Visual dengan UML. Yogyakarta: Graha Ilmu. 2005.

[11] Sugiarti, Yuni. Analisis dan Perancangan UML (Unified Modeling Languege). Yogyakarta : Graha Ilmu. 2013.

[12] Sugiarti, Yuni. Analisis dan Perancangan UML. Yogyakarta : Penerbit Andi. 2013.

[13] Syagii, M. Membangun Aplikasi Berbasis PHP dan MySQL. Yogyakarta : ANDI OFFSET. 2004. [14] Winarto, Edy. Buku Sakti Pemrograman PHP. Jakarta : PT Elex Media Komputindo. 2013. [15] Wiswakarma. Komang. 9 Langkah Menjadi Master Framework Codeigniter. Yogyakarta: 2010.