1
Aplikasi E-commerce Toko Elektronik Berbasis
Website
Devi IndrianiJurusan Sistem Informasi Bisnis, Universitas Gunadarma Margonda Raya 100 Pondok Cina
Depok, Indonesia
Tujuan Penelitian ini adalah membuat web e-commerce toko Elektronik yang user friendly yang dapat memudahkan masyarakat untuk membeli barang elektronik tanpa harus datang ke toko offline. Aplikasi e-commerce toko elektronik berbasis web ini menggunakan metode
System Development Life Cycle (SDLC) dan Struktur navigasi digunakan sebagai alur dari suatu program. UML digunakan untuk merepresentasikan alur proses dari rangkaian pembuatan website ini. Hasil penelitian ini adalah memudahkan kegiatan jual beli yang sebelumnya pelanggan harus mengunjungi toko untuk membeli barang yang ingin dibeli, sekarang pelanggan hanya membuka website di perangkat komunikasi seperti komputer dan gadget.
Kata Kunci : Aplikasi, E-commerce , Website PENDAHULUAN
Latar Belakang
Perkembangan teknologi saat ini membuat manusia semakin mudah untuk menambah informasi dan pengetahuan. Perkembangan teknologi juga mempengaruhi berbagai sektor misalnya perdagangan. Pola perdagangan yang sebelumnya tradisional, saat ini berubah menjadi sangat maju dengan adanya sistem e-commerce. E-commerce adalah kegiatan jual beli barang atau jasa melalui jaringan elektronik, terutama internet. E-commerce memudahkan kegiatan jual beli yang sebelumnya pelanggan harus mengunjungi toko untuk membeli barang yang ingin dibeli, sekarang pelanggan hanya membuka website di perangkat komunikasi seperti komputer dan gadget.
Target market toko elektronik ini adalah masyarakat menengah kebawah, karena barang-barang yang di jual barang-barang yg murah berkualitas. Toko elektronik ini melakukan aktifitas jual beli dengan hanya mengandalkan penjualan secara offline, sehingga kalah saing dengan toko lainnya yang sudah memiliki website dan menjual produknya melalui website tersebut. Salah satu cara agar toko Elektronik ini berkembang adalah dengan cara menjual produk – produk yang dijualnya melalui website.
Dari latar belakang tersebut, maka dibuatlah Aplikasi E-commerce Toko Elektronik Berbasis Website yang diharapkan dengan adanya website E-commerce ini masyarakat dapat mencari barang elektronik dengan mudah.
2 Tujuan Penelitian
Tujuan Penelitian ini adalah membuat sebuah s aplikasi E_commerce toko elektonik berbasis website yang dapat memberikan informasi agar masyarakat dapat mencari barang elektronik dengan mudah.
TELAAH PUSTAKA
SDLC (System Development Life Cycle)
Sukamto dan Shalahuddin menyatakan SDLC adalah Proses mengembangkan atau mengubah suatu sistem perangkat lunak dengan menggunakan model-model dan metodologi yang digunakan orang untuk mengembangkan sistem-sistem perangkat lunak sebelumnya, berdasarkan best practice atau cara-cara yang sudah teruji baik. Menurut (Supriyanto, 2007) Tahapan-tahapan dalam metode SDLC yaitu perencanaan, analisis sistem, desain sistem, penerapan sistem dan pemeliharaan system.
Website
Website adalah sebuah halaman yang menyajikan informasi baik dalam bentuk tulisan, gambar, suara dan video yang diletakan dalam sebuah server atau hosting dimana untuk mengaksesnya diperlukan jaringan internet. Website bisa diakses di internet diperlukan 2 (dua) komponen yang harus ada yaitu Domain dan Hosting.
CSS( Cascading Style Sheet)
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup language). CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan font.
HTML(HyperText Markup Language)
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web internet (browser). HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language
(SGML).
Struktur navigasi
Struktur navigasi merupakan urutan suatu alur dari suatu program yang merupakan rancangan hubungan antar area yang berbeda. Struktur navigasi dapat digolongkan menurut kebutuhan akan objek, kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu situs web.
XAMMP
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl
3 METODOLOGI PENELITIAN
Tahapan awal dimulai dengan mengumpulkan data-data yang menjadi informasi dari pembuatan aplikasi E-commerce toko elektronik berbasis website yang bersumber dari buku dan media internet. Metode yang digunakan dalam pembuatan website ini menggunakan metode SDLC (System Develpoment Life Cycle)yang terdiri dari perencanaan, analisis sistem, desain sistem, penerapan sistem dan pemeliharaan system. selanjutnya membuat struktur navigasi, UML digunakan untuk merepresentasikan alur proses dari rangkaian pembuatan website ini dan membuat rancangan halaman website toko elektronik ini. Kemudian implementasi dari rancangan ke dalam bahasa pemrograman, dan melakukan ujicoba terhadap website yang telah selesai dibuat.
HASIL DAN PEMBAHASAN
Pembutan website toko elektronik ini dibagi menjadi beberapa tahap yaitu Analisis, perancangan dan hasil dan pembahasan terdiri dari struktur navigasi, UML,perancangan aplikasi, pembuatan aplikasi, uji coba website.
Struktur Navigasi Website
Pada website toko elektronik, terdapat 2 jenis struktur navigasi, antara lain struktur navigasi admin dan struktur navigasi user.
Gambar 1 Struktur Navigasi User
Pada gambar 1 Struktur navigasi user menggunakan struktur navigasi Non-linier, memuat beberapa halaman yang dapat diakses oleh seorang pengunjung website. Pada saat pengunjung pertama kali mengakses website toko elektronik, halaman pertama yang akan muncul adalah halaman home. Pada halaman home, pengunjung dapat melihat produk yang dijual. Pengunjung juga dapat melihat detail dari produk tersebut pada button beli. Pengunjung dapat berpindah ke halaman login. Pada halaman ini pengunjung melakukan login agar dapat melakukan proses transaksi. Pengunjung juga dapat melihat riwayat belanja dari akun tersebut.
4 Gambar 2 Struktur Navigasi Admin
Pada gambar 2 Struktur navigasi admin menggunakan struktur navigasi Hierarki, memuat beberapa halaman yang dapat diakses hanya oleh seorang admin. Admin harus melakukan login terlebih dahulu untuk masuk ke halaman admin. Admin memasukkan username dan password yang sudah ditentukan. Setelah admin berhasil masuk, maka halaman yang pertama muncul adalah halaman home.Dibawah halaman home, terdapat halaman kategori. Pada halaman kategori, admin dapat melihat data kategori. Dibawah halaman kategori, terdapat halaman produk. Pada halaman produk admin dapat menambahkan, mengubah atau menghapus produk.
Perancangan UML
Konfigurasi yang terdapat pada website ini dibuat menggunakan rancangan dari diagram Unified Modelling Language (UML meliputi use case diagram, activity diagram.
Gambar 3 Use Case Diagram User
Pada gambar 3 rancangan diagram use case yang ditunjukan untuk seorang pelanggan yang merupakan aktor dari diagram ini. pelanggan dapat melihat serangkaian informasi pada setiap halaman website. Selain itu, pelanggan tentu saja dapat melakukan
5
transaksi pada website ini tetapi pelanggan diharuskan melakukan login kemudian bisa memasukkan produk kedalam keranjang. Setelah itu pelanggan bisa melakukan checkout produk yang akan dibeli.
Gambar 4 Use Case Diagram Admin
Pada gambar 4 rancangan diagram use case diagram admin, admin dapat mengakses halaman home, mengolah data produk, mengolah data pembelian mengakses halaman laporan pembelian, mengakses halaman pelanggan, mengakses halaman kategori. Untuk mengakses semuanya admin harus login terlebih dahulu.
Gambar 5 Activity Diagram
Pada Gambar 5 Activity diagram yaitu proses perancangan yang sedang terjadi.. Pelanggan diwajibkan membuat akun terlebih dahulu, lalu admin dapat hak akses untuk mengelola pembayaran untuk pengiriman barang. Setelah pelanggan membeli produk dan melakukan checkout maka pelanggan wajib melakukan pembayaran dengan cara mengirimkan bukti pembayaran.
6 Perancangan Database
Pembuatan aplikasi Toko elektronik berbasis website terdapat struktur file yang merupakan spesifikasi dari tiap atribut yang terdapat pada sebuah tabel atau file dalam sistem database.
Tabel 1 Tabel admin
Pada tabel 1 digunakan untuk admin terdiri dari id_admin, nama lengkap, username dan password.
Tabel 2 Tabel Ongkir
Pada tabel 2 berisi id_ongkir,nama_kota dan tarif yang digunakan pelanggan untuk mengetahui biaya ongkirnya.
Tabel 3 Tabel Pelanggan
Pada tabel 3 digunakan untuk pelanggan untuk melakukan pemesanan barang yang berisi id pelangan,email,password,nama,telepon, dan alamat pelanggan.
Field Type Keterangan
Id_admin Int(11) Primary
Key
Nama_lengkap Varchar(30)
Username Varchar(15)
password Varchar(6)
Field Type Keterangan
Id_ongkir Int(11) Primary
Key
Nama_kota Varchar(15)
Tarif Int(11)
Field Type Keterangan
Id_pelanggan Int(11) Primary
Key Email_pelanggan Varchar(25) Password_pelanggan Varchar(6) Nama_pelanggan Varchar(25) Telepon_pelanggan Varchar(15) Alamat_pelanggan Text
7 Perancangan Tampilan Halaman
Halaman utama pada website kebudayaan betawi ini merupakan tampilan awal ketika pengguna mengakses masuk yang terdiri dari home, keranjang,riwayat belanja,logout,checkout, hubungi kami dan beli pada gambar 6.
Gambar 6 Rancangan Home
Gambar 7 Rancangan Beli Produk
Pada gambar 7 Halaman beli produk, Halaman ini menampilkan detail dari produk tersebut seperti nama produk, harga, deskripsi dan stok produk.
8 Gambar 8 Rancangan Keranjang Pemesanan
Pada gambar 8 rancangan keranjang pemesanan diatas ini adalah setelah pelanggan membeli produk elektronik dialihkan ke keranjang pemesanan dan ada 2 pilihan antara lanjutkan belanja atau langsung menuju proses checkout.
Implementasi
Halaman Utama adalah halaman awal yang pertama kali user mellihat dan mengakses informasi seputar aplikasi E-commerce toko elektronik, dapat dilihat pada Gambar 9
Gambar 9 Tampilan Halaman Home
9
Pada gambar 10 menampilkan halaman daftar pelanggan. Bagi pelanggan yang belum memiliki akun harus mendaftarkan akun terlebih dahulu.
Gambar 11 Tampilan Halaman Keranjang Belanja
Pada gambar 11 menampilkan keranjang belanja pelanggan. Keranjang belanja menampilkan produk apa saja yang ingin dibeli, pelanggan bisa memilih ingin melanjutkan belanja atau checkout.
Uji Coba Website
Pengujian web dilakukan dengan 3 web browser yaitu google chrome, Microsoft edge dan safari. Uji coba dilakukan berdasarkan kecepatan pengaksesan untuk menampilkan halaman pada setiap web browser pada tabel 4.
Tabel 4 Tabel Uji Coba Browser
No Browser Hasil
1 Google Chrome Membutuhkan waktu
kurang lebih 01.20 detik untuk akses setiap halaman
2 Microsoft Edge Membutuhkan waktu
kurang lebih 01.03 detik untuk akses setiap halaman.
3 Safari Membutuhkan waktu
kurang lebih 01.54 detik untuk akses setiap halaman.
Berdasarkan hasil pada tabel 4 aplikasi dapat mengakses website dengan lebih baik dan lancar yaitu dengan menggunakan browser Microsoft edge dimana kecepatan akses hanya berjalan 01.03 detik.
KESIMPULAN DAN SARAN KESIMPULAN
Dari hasil pembahasan yang penulis lakukan bahwa aplikasi E-Commerce toko elekronik berbasis web ini dapat memberikan informasi agar masyarakat dapat mencari barang elektronik dengan mudah tanpa datang langsung ke toko nya. Aplikasi Toko Elektronik ini telah melalui tahap uji coba diantaranya yaitu uji coba web browser. Berdasarkan uji coba yang telah dilakukan didapat bahwa penggunaan web browser Microsoft edge lebih baik dalam kecepatan akses dengan waktu 01.03 detik.
SARAN
10
menambahkan fitur pencarian agar memudahkan pelanggan untuk mencari produk elektronik yang diinginkan dan menambahkan fitur customer service agar pelanggan dapat dipandu bila mengalami kesulitan dalam pembelian produk.
DAFTAR PUSTAKA
Anhar. Panduan Menguasai HTML. CSS dan JavaScript Secara Otodidak. Media Kita. Jakarta. 2014.
Budi Raharjo. Modul Pemrograman Web (HTML, PHP, JavaScript). Gema Insani. Bandung. 2016.
Agung, G. 2018. HTML, PHP, dan MYSQL untuk PemulaII. Jakarta: PT Elex Media Komputindo
Sukamto,dan M. Shalahuddin. 2013. Rekayasa Perangkat Lunak Terstruktur Dan Berorientasi Objek. Bandung: Informatika.
Supriyanto, Aji. 2007. Pengantar Teknologi Informasi. Salemba Infotek, Jakarta.
Sutarman. Membangun Aplikasi Web dengan HTML. CSS dan JavaScript. Graha Ilmu Yogyakarta. Yogyakarta. 2010.
Perpustakaan Universitas Gunadarma BARCODE
BUKTI UNGGAH DOKUMEN PENELITIAN PERPUSTAKAAN UNIVERSITAS GUNADARMA
Nomor Pengunggahan
SURAT KETERANGAN
Nomor: 11/PERPUS/UG/2021
Surat ini menerangkan bahwa:
Nama Penulis : Devi Indriani
Nomor Penulis : 100917
Email Penulis : [email protected]
Alamat Penulis : Jalan Semangka 2 no 21 Perumahan Harapan Baru 1 Bekasi Barat
Telah menyerahkan hasil penelitian/ penulisan untuk disimpan dan dimanfaatkan di Perpustakaan Universitas Gunadarma, dengan rincian sebagai berikut :
Nomor Induk : MMSI/SIB/PENELITIAN/11/2021
Judul Penelitian : Aplikasi E-commerce Toko Elektronik Berbasis Website Tanggal Penyerahan : 27 / 01 / 2021
Demikian surat ini dibuat untuk dipergunakan seperlunya dilingkungan Universitas Gunadarma dan Kopertis Wilayah III.
