RANCANG BANGUN WEBSITE E-COMMERCE BATIK
TRADJUMAS
Naya Viandita1, Reza Chandra2
Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma,
Jl. Margonda Raya No. 100, Depok 16424, Jawa Barat [email protected], [email protected]2
Abstrak
Kegiatan pemasaran dan penjualan Batik Tradjumas masih dilakukan secara konvensional. Kegiatan promosi Batik Tradjumas masih dilakukan dari mulut ke mulut ataupun melalui penyebaran brosur. Hal ini menyebabkan pasar konsumen dari Batik Tradjumas belum besar dan konsumen masih mengalami kesulitan untuk membeli produk batik. Kebanyakan konsumen datang ke toko untuk membeli batik secara langsung. Tujuan dari penulisan karya ilmiah ini adalah untuk membangun website Batik Tradjumas supaya konsumen dapat memesan produk batik secara online. Website ini dibuat menggunakan Framework CodeIgniter dan MariaDB sebagai basis datanya. Konsumen dapat mengakses website di mana saja selama ada koneksi internet dan tidak perlu datang ke toko untuk melakukan pemesanan atau pembelian produk. Selain itu, admin dapat menyimpan data pembelian dan mengelola seluruh informasi dengan lengkap dan baik pada halaman admin. Website untuk Batik Tradjumas dapat diakses melalui internet dengan url https://tradjumas.web.id/.
Kata Kunci: website, batik, tradjumas, codeigniter
Abstract
Marketing and sales of Batik Tradjumas are still carried out conventionally. Batik Tradjumas promotional activities are also still being carried out by word of mouth or through distributing brochures. This causes the consumer market of Batik Tradjumas not yet big and consumers still have difficulty buying batik products. Most consumers come to the shop to buy batik directly. The purpose of writing this scientific paper is to build a Batik Tradjumas website so that consumers can order batik products online. This website is created using the CodeIgniter Framework and MariaDB as its database. Consumers can access the website anywhere as long as there is an internet connection and do not need to come to the store to place orders or purchase products. In addition, admins can store purchase data and manage all information completely and properly on the admin page. The website for Batik Tradjumas can be accessed via the internet with url https://tradjumas.web.id/.
Key Words: website, batik, tradjumas, codeigniter
1. PENDAHULUAN
Batik Tradjumas merupakan usaha kecil menengah (UKM) yang didirikan pada bulan Oktober 2016 yang bergerak di bidang proses pembuatan batik tulis, batik cap, batik printing sampai dengan penjualan kain batik dan pakaian batik siap pakai. Batik Tradjumas berlokasi di Perumahan Bumi
Sawangan Indah Blok C3 No. 89 Kelurahan Pengasinan, Kecamatan Sawangan, Kota Depok, Provinsi Jawa Barat. Selama ini kegiatan pemasaran dan proses penjualan batik masih dilakukan secara konvensional. Kegiatan promosinya dilakukan dari mulut ke mulut ataupun melalui penyebaran brosur, sehingga jangkauan promosi dan
penjualan masih terbatas belum menyebar ke daerah-daerah dan kota-kota besar lainnya di Indonesia.
Proses promosi yang masih konvensional menjadi masalah tersendiri bagi calon konsumen yang akan membeli produk dari Batik Tradjumas. Bila calon konsumen tidak dapat menemukan letak Batik Tradjumas, maka akan mengurungkan niatnya untuk membeli produk dari Batik Tradjumas tersebut. Secara tidak langsung hal ini menjadi kerugian tersendiri bagi Batik Tradjumas karena kehilangan calon pembelinya. Pelanggan harus datang ke tempat penjualan untuk mengetahui ada tidaknya produk baru. Tentu cara seperti ini menjadi kurang efisien karena dibutuhkan waktu yang lama untuk seorang calon konsumen mengetahui informasi suatu produk.
Sekarang ini internet tidak hanya digunakan untuk memperoleh informasi saja, melainkan dapat digunakan sebagai media untuk melakukan bisnis dengan membangun sebuah website. Teknologi website sudah banyak dilakukan untuk menunjang kegiatan promosi maupun penjualan produk dari sebuah perusahaan. Menggunakan teknologi website akan menghasilkan lebih banyak keuntungan dibandingkan dengan penjualan produk secara konvensional.
Berdasarkan uraian di atas, maka diusulkan untuk membangun aplikasi penjualan batik pada Batik Tradjumas
berbasis website menggunakan Framework Codeigniter. Sistem ini berisi tentang pengolahan data, transaksi penjualan, dan transaksi pembelian sehingga dapat memudahkan proses transaksi jual beli bagi pembeli maupun penjual.
Penulis merumuskan masalah yang akan dibahas pada pengembangan website Batik Tradjumas yang menyediakan informasi kain dan pakaian batik serta menyediakan fitur-fitur yaitu melakukan checkout, mengkonfirmasi pembayaran, mengubah data pelanggan, melihat data transaksi penjualan, mengelola data produk, mengelola kategori produk, mengelola data rekening, mengelola data admin, dan mengelola konfigurasi website Batik Tradjumas. Website ini dibangun dengan Framework CodeIgniter versi 3.1.9 menggunakan HTML versi 5, PHP versi 7.4.3 dan MariaDB versi 10.4.11.
Tujuan penelitian ini adalah membuat website untuk mempermudah konsumen membeli kain dan pakaian batik tanpa harus datang ke tokonya langsung. Kemudian, membantu untuk memperluas pasar penjualan Batik Tradjumas dan mengenalkan jenis motif batik secara umum motif nasional dan secara khusus motif khas Depok.
2. METODE PENELITIAN
Dalam penulisan ilmiah ini, metode yang digunakan adalah studi lapangan dengan mewawancarai pemilik dan pegawai
Batik Tradjumas. Tahapan metode penelitian adalah sebagai berikut:
1. Tahap Perencanaan
Pada tahap perencanaan dalam membuat aplikasi berbasis web dengan melakukan wawancara guna mengumpulkan data dan informasi, serta menentukan jangka waktu pengembangan dalam pembuatan aplikasi.
2. Tahap Analisis
Setelah tahap perencanaan, menganalisis kebutuhan yang dianalisis yaitu kebutuhan fungsional dan non fungsional yang dibutuhkan dalam merancang sistem pada website penjualan batik pada Batik Tradjumas.
3. Tahap Perancangan
Setelah diketahui kebutuhan fungsional dan non fungsional yang dibutuhkan, baru dilakukan perancangan sistem serta kegiatan-kegiatan yang terjadi dalam sistem dan alur data yang terbentuk
selama proses sistem berjalan. Setelah tahap perancangan sistem dan perancangan database selesai dibuat, maka tahapan selanjutnya adalah merancang aplikasi website yaitu dengan membuat tampilan aplikasi website yang diinginkan.
4. Tahap Pengembangan
Pada tahap pengembangan menjelaskan tampilan website Batik Tradjumas beserta menu-menu yang ada di website tersebut sesuai dengan rancangan tampilan yang telah dibuat sebelumnya.
5. Tahap Uji Coba
Pada tahap pengujian ini dilakukan dengan menggunakan metode black box dan user acceptance test.
6. Tahap Implementasi
Tahap terakhir dalam
pengembangan website adalah melakukan implementasi website ke hosting yang merupakan tahapan dimana aplikasi siap digunakan.
3. HASIL DAN PEMBAHASAN 3.1 Gambaran Umum Website
Batik Tradjumas merupakan usaha kecil menengah (UKM) yang didirikan pada bulan Oktober 2016 yang bergerak di bidang proses pembuatan batik tulis, batik cap, batik printing sampai dengan penjualan kain batik dan pakaian batik siap pakai. Pembuatan website Batik Tradjumas ditunjukkan untuk mempermudah masyarakat dalam membeli produk-produk yang ditawarkan oleh Batik Tradjumas. Website ini mempunyai Front
End dan Back End, yaitu menu admin dan menu user. Tampilan Back End terdapat login admin yang berisikan Beranda, Transaksi Pembelian, Data Produk, Data Rekening, Data Pengguna Admin, dan Konfigurasi Website. Sedangkan tampilan Front End terdapat Beranda, Produk, Tentang Kami, Keranjang Belanja, Registrasi Pelanggan, Login Pelanggan, dan Menu Pelanggan. Proses pembuatan aplikasi menggunakan Sublime Text 3 sebagai kode editor yang berfungsi untuk menulis kode
program HTML dan phpMyAdmin untuk mengelola database MariaDB.
3.2 Pemodelan Sistem
Pemodelan sistem menggunakan Use Case diagram. Use Case diagram ini menjelaskan kegunaan sistem yang akan dibangun.
Gambar 1. Use Case Pelanggan Pada Gambar 1 pelanggan dapat melihat produk yang ditawarkan Batik Tradjumas, memasukkan produk yang dipilih ke keranjang belanja, menambahkan jumlah belanja, dan menghapus belanja. Jika sudah login pelanggan dapat melakukan checkout, melakukan konrmasi pembayarn, dan mengubah data pelanggan.
Gambar 2. Use Case Admin
Pada Gambar 2 admin dapat melihat data transaksi penjualan, mengelola data produk, mengelola kategori produk, mengelola data rekening, mengelola data admin, dan mengelola konfigurasi website Batik Tradjumas jika sudah melakukan login.
Penggambaran alur kerja dari sistem menggunakan Activity diagram. Activity diagram menggambarkan alur kerja (aktivitas) pada use case (proses) dan menunjukkan aliran keseluruhan kontrol.
Gambar 3. Activity Pelanggan
Pada Gambar 3 ketika pelanggan membuka website akan masuk ke beranda website, lalu pelanggan dapat melihat produk-produk yang ditawarkan oleh Batik Tradjumas. Pelanggan dapat melakukan registrasi dan login. Setelah melakukan login, pelanggan akan melihat dashboard pelanggan. Ketika pelanggan memilih produk akan ditampilkan halaman produk yang dipilih. Ketika checkout produk, pelanggan dapat melihat data pemesanan. Setelah checkout produk, pelanggan diharuskan segera membayar produk yang dipesan dan melakukan konfirmasi pembayaran. Jika pelanggan tidak melakukan login, maka pelanggan hanya dapat melihat produk-produk yang ditawarkan Batik Tradjumas.
Gambar 4. Activity Admin
Pada Gambar 4 setelah admin melakukan login, akan menampilkan halaman utama admin. Kemudian admin dapat melihat data transaksi penjualan, mengelola data produk, mengelola kategori produk, mengelola data rekening, mengelola data admin, dan mengelola konfigurasi website Batik Tradjumas.
Website ini terdiri dari beberapa halaman yang memiliki fungsi masing-masing. Struktur navigasi diperlukan untuk menggambarkan alur secara garis besar dari tiap halaman yang ada pada website tersebut.
Gambar 5. Struktur Navigasi User
Gambar 6. Struktur Navigasi Pelanggan Struktur navigasi user terdapat 2 halaman yaitu halaman user dan halaman pelanggan. Pelanggan harus login terlebih dulu untuk melakukan pembelian produk. Pada halaman produk yang dipilih, pelanggan dapat melihat detail produk dan menambahkan jumlah produk yang akan dibeli. Produk beserta jumlah yang dibeli
akan masuk ke halaman keranjang belanja. Untuk user, pada halaman produk yang dipilih user dapat melihat detail produk serta dapat menambahkan jumlah produk yang akan dibeli dan masuk ke keranjang belanja, tetapi user tidak bisa melanjutkan pembayaran karena harus masuk akun terlebih dahulu.
Gambar 7. Struktur Navigasi Admin Struktur navigasi admin terdapat halaman login untuk admin. Admin dapat melihat menu jika login. Setelah login akan masuk ke beranda admin. Terdapat menu data transaksi, data produk, data kategori produk, data rekening, data admin, dan konfigurasi website. Pada halaman data transaksi admin dapat melakukan action print out laporan dan unduh laporan. Pada halaman data produk, data kategori produk, data rekening, dan data admin dapat melakukan action edit data, hapus data, dan tambah data. Pada halaman konfigurasi website admin dapat melakukan edit data.
3.3 Implementasi
Pada tahap ini mengimplementasikan hasil rancangan perangkat lunak yang telah di ubah menjadi sebuah output yaitu berupa aplikasi sistem e-commerce berbasis website pada toko Batik Tradjumas.
1. Tampilan Halaman Beranda Pelanggan
Gambar 8. Tampilan Beranda Pelanggan Halaman ini menampilkan produk-produk terbaru dari Batik Tradjumas.
2. Tampilan Halaman Produk
Gambar 9. Tampilan Produk
Halaman ini menampilkan beberapa produk yang dijual beserta nama produk dan harga. Halaman produk memiliki kategori dan menampilkan produk setiap kategorinya. Jika ingin melihat detail produk dapat mengklik nama produknya.
3. Tampilan Halaman Detail Produk
Gambar 10. Tampilan Detail Produk Halaman ini menampilkan detail produk yang dipilih.
4. Tampilan Halaman Tentang Kami
Gambar 11. Tampilan Tentang Kami Halaman ini menampilkan profil singkat dari Batik Tradjumas.
5. Tampilan Halaman Registrasi Pelanggan
Gambar 12. Tampilan Registrasi Berisi halaman untuk registrasi sebelum pelanggan melakukan login. Pelanggan harus mengisi data pribadi di halaman registrasi.
6. Tampilan Halaman Login Pelanggan
Gambar 13. Tampilan Login Pelanggan Berisi halaman untuk login pelanggan sebelum melakukan transaksi. Pelanggan harus memasukkan username dan password untuk login.
7. Tampilan Halaman Keranjang Belanja
Gambar 14. Tampilan Keranjang Belanja Halaman ini menampilkan data yang dipesan oleh pelanggan. Data yang ditampilkan adalah gambar produk, nama produk, harga produk, jumlah produk, dan sub total. Terdapat action update untuk mengupdate jumlah produk yang ingin dibeli, action hapus untuk menghapus produk dan tombol checkout.
8. Tampilan Halaman Dashboard Pelanggan
Gambar 15. Tampilan Dashboard Pelanggan
Halaman ini menampilkan halaman dashboard pelanggan yang terdapat produk-produk yang sudah dibeli.
9. Tampilan Halaman Login Admin
Gambar 16. Tampilan Login Admin Berisi halaman untuk login admin sebelum masuk mengelola website.
10. Tampilan Halaman Ddashboard Admin
Gambar 17. Tampilan Dashboard Admin Halaman ini meupakan halaman utama pada halaman admin.
11. Tampilan Halaman Data Transaksi
Gambar 18. Tampilan Data Transaksi Halaman ini menampilkan transaksi-transaksi dari pelanggan.
12. Tampilan Halaman Data Produk
Gambar 19. Tampilan Data Produk Halaman ini menampilkan daftar data produk yang telah di input oleh admin dan terdapat action gambar, edit, hapus dan tambah baru. Gambar untuk menambahkan gambar produk, edit untuk mengedit data produk, hapus untuk menghapus data produk, dan tambah baru untuk menambahkan data produk.
13. Tampilan Halaman Data Rekening
Gambar 20. Tampilan Data Rekening
Halaman
ini
menampilkan
daftar
rekening bank yang telah di input oleh
admin. Terdapat action edit, hapus, dan
tambah baru. Edit untuk mengedit data
rekening, hapus untuk menghapus data
rekening, dan tambah baru untuk
menambahkan data rekening.
14. Tampilan Halaman Data Admin
Gambar 21. Tampilan Data Admin Halaman ini menampilkan daftar admin yang mengelola website Batik Tradjumas. Terdapat action edit, hapus, dan tambah baru. Edit untuk mengedit data admin, hapus untuk menghapus data admin, dan tambah baru untuk menambahkan data admin.
15. Tampilan Halaman Konfigurasi Umum
Gambar 22. Tampilan Konfigurasi Umum Halaman ini menampilkan data-data yang berkaitan dengan Batik Tradjumas yang sudah di input oleh admin. Data tersebut akan ditampilkan pada website Batik Tradjumas.
4. KESIMPULAN DAN SARAN 4.1 Kesimpulan
Website penjualan batik telah berhasil dibuat dan dapat diakses di situs https://tradjumas.web.id/ melalui personal komputer maupun ponsel pengguna. Berdasarkan hasil pengujian Black Box pada website halaman pelanggan dan halaman admin dinyatakan berhasil sesuai dengan yang diharapkan dan hasil kuesioner yang disebar pada 14 responden website ini dapat membantu pelanggan dalam mengetahui informasi produk maupun toko dan dapat memesan atau membeli produk secara online tanpa harus datang langsung ke toko. Selain itu, mempermudah admin dalam mengelola data.
4.2 Saran
Saran yang perlu dikembangkan untuk website ini yaitu website ini masih terbilang cukup sederhana. Penulis menyadari bahwa website ini masih memerlukan beberapa pengembangan dengan menambahkan fitur baru agar semakin memudahkan pelanggan dalam proses pembelian dan membuat desain website lebih menarik untuk dikunjungi.
DAFTAR PUSTAKA
[1] Aditya (2013). Mariadb (download). https://www.stmikplk.ac.id/mariadb-download/ (diakses tanggal 14 Juli 2020).
[2] Ahmadi, C. and Hermawan, D. (2013). E-business dan e-commerce. Yogyakarta: Andi Offset.
[3] Alatas, H. (2015). Proyek Membangun Responsive Web Design dengan Bootstrap 3 dan 4. Yogyakarta: Lokomedia.
[4] Arief, M. R. (2011). Pemrograman Web Dinamis Menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. [5] Basuki, A. P. (2010). Membangun
Web berbasis PHP dengan Framework Codeigniter. Yogyakarta: Lokomedia. [6] Binanto, I. (2010). Multimedia
digital-dasar teori dan pengembangannya. Yogyakarta: Andi Offset.
[7] Bos, W. (2014). Sublime Text Power User. Hamilton: O Reilly.
[8] Fathansyah (2012). Basis Data. Bandung: Informatika Bandung. [9] Firdaus (2007). 7 Jam Belajar
Interaktif PHP dan MySQL dengan Dreamweaver. Palembang: Maxikom. [10] Gunawan, W. S. (2010). Kebut
Sehari Jadi Web Master. Yogyakarta: Genius Publisher.
[11] Henderson, H. (2009). Encyclopedia of Computer Science and Technology. New York: Facts on File, Inc.
[12] Hendini, A. (2016). Pemodelan uml sistem informasi monitoring penjualan dan stok barang (sudi kasus: Distro zhezha pontianak). Jurnal Khatulistiwa Informatika. 4(2). 107-116.
[13] Hidayat, R. (2010). Cara Praktis Membangun Website Gratis. Jakarta: Elex Media Komputindo.
[14] Kusrini (2007). Strategi
Perancangan dan Pengelolaan Basis Data. Yogyakarta: Andi Offset.
[15] Lisbijanto, H. (2013). Batik. Yogyakarta: Graha Ilmu.
[16] Madcoms (2011). Sukses Membangun Toko Online dengan E-Commerce. Yogyakarta: Andi Offset. [17] Madcoms (2016). Pemrograman
PHP dan MySQL Untuk Pemula. Yogyakarta: Andi Offset.
[18] Musman, A. and Arini, A. B. (2011). Batik Warisan Adiluhung Nusantara. Yogyakarta: G-Media. [19] Pressman, R. S. (2002). Rekayasa
Perangkat Lunak Pendekatan Praktisi (Buku. Satu). Yogyakarta: Andi Offset. [20] Pressman, R. S. (2010). Rekayasa Perangkat Lunak Pendekatan Praktisi. Yogyakarta: Andi Offset.
[21] Raharjo, B. (2015). Belajar Otodidak Framework CodeIgniter. Bandung: Informatika.
[22] Setiadi, W. G. (2010). Kebut Sehari Jadi Webmaster. Yogyakarta: Genius Publisher.
[23] Sibero, A. F. K. (2011). Kitab Suci Web Programming. Yogyakarta: MediaKom.
[24] Sidik, B. (2012). Pemrograman Web dengan PHP. Bandung : Informatika.
[25] Sidik, B. and Pohan, H. I. (2013). Pemrograman Web Dengan HTML. Bandung: Informatika Bandung.
[26] Spurlock, J. (2013). Bootstrap: Responsive Web Development. Sebastopol: O'Reilly Media, Inc. [27] Sulianta, F. (2017). Teknik
Perancangan Arsitektur Sistem Informasi. Yogyakarta: Andi.
[28] Sutisna, D. (2007). Langkah Mudah Menjadi Webmaster. Jakarta Selatan: Mediakita.
[29] Sutopo, A. H. (2007). Pemrograman Flash dengan PHP dan MySQL. Yogyakarta: Graha Ilmu.
[30] Yuhefizar (2008). 10 Jam Menguasai Internet Teknologi dan Aplikasi. Jakarta: PT Elex Media Komputindo.
[31] Zaki, A. (2008). Kursus Kilat Internet. Yogyakarta: CV. Andi Offset.
