1
PEMBUATAN APLIKASI PEMESANAN BAHAN POKOK MAKANAN PADA TOKO FRESH MARKET BERBASIS WEB
MENGUNAKAN PHP DAN MYSQL
Hanny Fazira Jurusan Sistem Informasi
Fakultas Ilmu Komputer Dan Teknologi Informasi Universitas Gunadarma
Jl. Margonda Raya No. 100, Pondok Cina, Depok hannyfazira14@gmail.com
Farida Amalya Jurusan Sistem Informasi
Fakultas Ilmu Komputer Dan Teknologi Informasi Universitas Gunadarma
Jl. Margonda Raya No. 100, Pondok Cina, Depok farida_a@staff.gunadarma.ac.id
ABSTRAKSI
Tujuan dari penulisan ini adalah membangun website Fresh Market untuk menjual bahan pokok makanan yang mempermudah pelanggan melakukan pembelian, memudahkan pihak toko untuk memberikan informasi produk kepada pelanggan, memperluas cakupan pemasaran pada penjualan Fresh Market dan mempermudah pegawai toko dalam pengolahan data. Metode Penelitian yang digunakan pada penulisan ini meliputi analisis dan pengumpulan data, perancangan, pembuatan (coding), implementasi dan uji coba. Pada perancangan awal penulis menggunakan struktur navigasi untuk mengetahui alur dari website dan UML untuk membuat rancangan sistem yang diusulkan. Untuk membuat sistem website Fresh Market menggunakan bahasa pemrograman PHP dan pengelolaan database MySQL. Pada tahap akhir ialah implementasi dan uji coba. Berdasarkan hasil implementasi dan uji coba website ini dapat berjalan dengan baik sesuai dengan rancangan berdasarkan hasil pengujian yang menggunakan metode pengujian black box. Website telah berhasil dibuat dengan alamat https://streamzinu.com/freshmarket/
Kata kunci : Fresh Market, Website, Pelanggan, Sistem, Online
2 ABSTRACT
The purpose of this paper is to build a Fresh Market website to sell food staples that make it easier for customers to make purchases, make it easier for the store to provide product information to customers, expand marketing coverage on Fresh Market sales and make it easier for store employees in data processing. The research method used in this paper includes analysis and data collection, design, coding, implementation and testing. In the initial design, the author uses a navigation structure to determine the flow of the website and UML to design the proposed system. To create a Fresh Market website system using the PHP programming language and MySQL database management. The final stage is implementation and testing. Based on the results of the implementation and testing of this website, it can run well according to the design based on the test results using the black box testing method. The website has been successfully created with the address https://streamzinu.com/freshmarket/
Keywords : Fresh Market, Website, Customer, System, Online
1. PENDAHULUAN 1.1 Latar Belakang
Kebutuhan akan teknologi informasi sudah menjadi salah satu kebutuhan dalam kehidupan sehari-hari. Terutama ditengah pandemi Covid-19 ini susahnya masyarakat untuk pergi beraktivitas diluar rumah. Saat ini, yang mengharuskan untuk melakukan aktivitas di dalam rumah dan mengurangi aktivitas di luar rumah dalam waktu yang lama serta membatasi interaksi langsung dengan manusia lain. Dengan adanya penggunaan teknologi informasi, dapat membantu melakukan aktivitas tanpa harus berinteraksi langsung dan keluar dari
rumah dan seruan untuk berada di rumah membuat sebagian orang membeli produk segar tersebut lewat penjualan online.
Terutama, melalui platform penjualan produk sayur- mayur, buah-buahan dan makanan pokok lain nya.
Maka dari itu dalam pembuatan aplikasi website yang berjudul
“Pembuatan Aplikasi Pemesanan Bahan Pokok Makanan Pada Toko Fresh Market Berbasis Web Menggunakan PHP dan MySql”.
Dalam penulisan ilmiah ini, informasi pemesanan bahan pokok makanan menggunakan bahasa Pemrograman PHP dan database MySql.
3 1.2 Rumusan Masalah
Berdasarkan latar belakang diatas, batasan masalah penulisan ilmiah ini adalah merancang dan membuat website untuk pemasaran bahan pokok makanan.
Pada website ini terdapat diantaranya adalah halaman utama yang menjelaskan website Toko Fresh Market, halaman daftar harga, halaman form pemesanan yang berisi nama pelanggan, telepon, alamat, pesanan, dan jumlah buah, halaman admin, dan halaman tentang Toko Fresh Market.
1.3 Tujuan Penulisan
Pembuatan aplikasi berbasis website ini diharapkan dapat memudahkan konsumen yang ingin memesan sayuran, buah-buahan dan bahan pokok makanan lain nya dan juga dapat menjadi sarana promosi untuk menjangkau konsumen tanpa harus keluar rumah ditengan pandemi Covid. Diharapkan menjadi sarana promosi untuk menjangkau konsumen lebih luas dengan biaya lebih hemat.
1.4 Metode Penelitian
Metode penelitian yang digunakan dalam penulisan ilmiah ini adalah menggunakan pendekatan metode SDLC
(Software Development Life Cycle).
Dalam melakukan penulisan aplikasi berbasis website ini terbagi menjadi kedalam beberapa seperti perencanaan, analisis, perancangan, pembuatan dan tahap yaitu :
1. Identifikasi
Mengidentifikasi masalah yaitu untuk mendukung bisnis penjualan bahan pokok makanan agar dapat menjadi platform bisnis yang dapat memepermudah dalam mengakses segala kegiatan bisnis, seperti penawaran,transaksi, penjualan dan pembelian.
2. Analisis
Meliputi analisis kebutuhan yaitu seberapa penting penggunaan website sebagai platform penunjang bisnis saat ini. Selanjutnya analisis keadaan, tujuan dari analisis ini adalah bagaimana nantinya penggunaan website ini, sehingga maksud dari pembuatan website ini yang sudah dijabarkan sebelumnya dapat tercapai.
3. Perancangan
Perancangan proses pembuatan design dan sistem website menggunakan StarUML (Unified Modeling Language) dan Microsoft
4 Visio 2016 dengan use case diagram,
activity diagram dan class diagram.
Pada perancangan penulisan kode program menggunakan visual studio code dan text editor.
4. Pembuatan
Tahap pembuatan website dengan pengkodean yang sesuai dengan rancangan website menggunakan software-software diantaranya adalah Web Browser, Visual Studio Code, HTML (Hyper Text Markup Language), PHP (Hypertext Prepocessor) dengan Frame Work Codeigniter, XAMPP serta MySQL sebagai data base penyimpanan dan pengolahan data.
5. Implemenasi dan Uji Coba
Memastikan tidak ada kesalahan yang terdapat pada website yang telah dibuat dengan cara melakukan uji coba terhadap aplikasi tersebut.
Uji coba aplikasi menggunakan web browser yang terdapat pada komputer dengan spesifikasi sistem operasi Windows 10 Home Single Languange 64-bit, processor Intel(R) Core(TM) i3 @ 2.81 GHz, RAM 4GB, Harddisk 1 TB.
1.5 Sistematika Penulisan
Sistematika penulisan terdiri dari empat bab, bertujuan untuk mempermudah penulisan dalam menyusun, mengolah, menyebarkan dan merangkai data yang telah diperoleh sehigga penulisan ini dapat disajikan dengan baik dan benar.
2. TINJAUAN PUSTAKA
2.1 Website Penjualan Toko Fresh Market
Website penjualan Toko Fresh Market adalah suatu website yang memanfaatkan teknologi informasi dalam berbelanja secara online yang tidak memerlukan komunikasi tanpa tatap muka secara langsung. Sehingga pelanggan dapat memesan buah secara cepat dan efisien dalam segi waktu dan juga pelanggan dapat mengetahui apa saja yang diperlukan untuk melakukan pemesanan secara online.
2.1.1 Komponen Form Penjualan Toko Fresh Market
Pada pembatan Form penjualan took Fresh Market, terdapat beberapa komponen yang mendukung proses operasionalnya, diantaranya adalah :
5 1. Halaman Utama
Pada halaman ini adalah tempat informasi seputar toko Fresh Market.
2. Halaman Daftar Harga Bahan Pokok Makanan
Pada halaman ini diberikan informasi tentang daftar harga.
3. Halaman Pemesanan Bahan Pokok Makanan
Halaman ini tempat untuk melakukan pemesanan yang berisi nama pelanggan, telepon, alamat, pesanan, dan jumlah pemesanan.
4. Halaman Admin
Halaman ini adalah untuk admin mengelola Website dan mengelola database yang berisi pesanan Pelanggan.
2.2 Internet
Internet adalah suatu fasilitas yang menghubungkan antara komputer dan perangkat lain yang dapat diakses secara umum, yang mengirimkan data dalam bentuk paket data berdasarkan Protokol Internet (IP).
2.3 Website
Website adalah suatu fasilitas media informasi yang menyampaikan informasi yang berasal dari internet. Salah satu contoh website adalah penyedia informasi
berita (Berita online), dan toko berbasis virtual (toko online). Website dibuat dari skrip atau kode tertentu dari bahasa pemrograman yang mendukung pembuatan website. Salah satu bahasa pemrograman yang digunakan untuk membuat website adalah bahasa pemrograman PHP (Hypertext Preprosessor).
2.3 Browser
Broser adalah salah satu jenis perangkat lunak (software) yang digunakan untuk mengakses halaman website di internet.
2.5 PHP
PHP atau kependekan dari Hypertext Preprocessor adalah salah satu bahasa pemrograman open source yang sangat cocok atau dikhususkan untuk pengembangan web dan dapat ditanamkan pada sebuah skripsi HTML.
Salah satu kegunaan HTML adalah sebagai wadah untuk bahasa pemrograman untuk website itu sendiri.
2.6 Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS) merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan
6 untuk mengatur atau mendesign tiap-tiap
komponen dari HTML seperti elemen dan tag. Dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML.
2.7 Text Editor
Text editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode program, disini khususnya untuk penulisan kode program HTML itu sendiri.
2.7.1. Text Editor Microsoft Visual Studio Code
Gambar 2. 1 Logo Visual Studio Code
Microsoft Visual Studio merupakan sebuah perangkat lunak lengkap (suite) yang dapat digunakan untuk melakukan pengembangan aplikasi, baik itu aplikasi bisnis, aplikasi personal, ataupun komponen aplikasinya, dalam bentuk aplikasi console, aplikasi Windows, ataupun aplikasi Web.
2.8 Database
Database adalah suatu kumpulan data computer yang terhubung yang berisi
deskripsi dari data tersebut, yang dirancang untuk memenuhi kebutuhan informasi dari pengguna basis data.
memelihara, mengonrtrol dan juga mengakses data.
2.9 Strukture Query Language (SQL).
My Structure Query Language (MySQL) adalah salah satu Basis Data Management System ( DBMS ) dari sekian banyak DBMS seperti Oracle, MySQL, Postagre SQL, dan lainnya.
MySQL berfungsi untuk mengolah Basis Data menggunakan bahasa SQL. MySQL bersifat open source sehingga kita bisa menggunakannya secara gratis.
Pemprograman PHP juga sangat mendukung atau mensupport dengan Basis Data MySQL.
dipercaya mengelola dengan 40 buah database berisi 10,000 tabel dan 500 di antaranya memiliki 7 juta.
secara logic merupakan struktur dua dimensi terdiri atas baris dan kolom.
Field–field tersebut dapat berupa data seperti int, real char, date, time dan lainnya.
7 2.10 PhpMyAdmin
Gambar 2. 2 Logo PhpMyAdmin
PhpMyAdmin merupakan sebuah aplikasi berbasis web yang berfungsi untuk mengelola database MySQL.
2.11 XAMPP.
Gambar 2. 3 Logo XAMPP
XAMPP adalah sebuah software open source yang berfungsi sebagai server yang berdiri sendiri (localhost).
2.12 Hosting.
Agar bisa menghubungkan situs web yang telah dibuat ke jaringan internet,maka harus didaftarkan untuk mendapat alamat website dan memasukkan (upload) semua file yang telah dibuat kedalamnya.
2.13 Struktur Navigasi.
digunakan dalam proses pembuatan website, yaitu:
1. Linier : Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.n
Gambar 2. 4 Struktur Navigasi Linier
2. Non Linier : Struktur navigasi non-linier atau struktur tidak
berurut merupakan
pengembangan dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi
8 bercabang.
Gambar 2. 5 Struktur Navigasi Non- Linear
3. Hirarki : Struktur navigasi hirarki biasa disebut struktur bercabang.
Gambar 2. 6 Struktur Navigasi Hirarki
4. Campuran : Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya yaitu linier, non-linier dan hirarki.
Struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas.
Gambar 2. 7 Struktur Navigasi Campuran
2.14 UML
Unified Modeling Language (UML) adalah himpunan struktur dan teknik untuk pemodelan desain program berorientasi objek (OOP) serta aplikasinya. UML adalah metodologi untuk mengembangkan
1. Use Case Diagram
Use case Diagram adalah teknik untuk merekam persyaratan fungsional sebuah sistem.
Gambar 2. 8 Notasi pada Usecase Diagram
2. Activity Diagram
Activity Diagram digunakan untuk menampilkan serangkaian kegiatan, menunjukan alur kerja dari suatu titik awal ke titik akhir keputusan, merinci banyak jalur yang ada dalam perkembangan peristiwa yang terhubung dalam kegiatan.
9 Gambar 2. 9 Notasi pada Activity
Diagram 3. Class Diagram
Class Diagram memberikan pandangan secara luas dari suatu sistem dengan menunjukan kelas-kelasnya dan hubungan mereka.
Gambar 2. 10 Notasi pada Class Diagram
2.15 Black Box Testing
Pengujian Black Box adalah pengujian aspek fundamental sistem tanpa memperhatikan struktur logika internal perangkat lunak.
3. PERANCANGAN DAN IMPLEMENTASI
3.1 3.1 Gambaran Umum Website Website pemesanan bahan pokok makanan di toko Fresh Market merupakan website yang dibuat untuk pelanggan yang ingin membeli bahan pokok makanan seperti sayuran, buah-buahan dan bahan pokok makanan lain nya.
Website ini berisikan halam utama, halaman daftar harga, form pemesanan untuk melakukan pemesanan dan halaman admin.
3.2 UML (Unified Modelling Language)
Perancangan aplikasi dilakukan dengan menggunakan metode permodelan Unified Modelling Language (UML), dengan rancangan umum sistem menggunakan Use Case Diagram, penggambaran alur kerja dari sistem menggunakan Activity Diagram, dan penggambaran hubungan antar table didalam sistem menggunakan Class Diagram.
3.2.1 Perancangan Use case diagram
Gambar 3. 1 Rancangan Use Case Diagram
10 3.2.2 Perancangan Activity diagram
Pada website penjualan Fresh Merket, rancangan Activity diagram Admin menggambarkan aktivitas admin saat berinteraksi pada sistem dan database yang ada pada website. Rancangan Activity diagram dapat dilihat pada gambar 3.2
Gambar 3. 2 Rancangan Activity Diagram Admin
1. Login sebagai Admin
Pada saat admin ingin menggunakan sistem ini diharuskan login terlebih dahulu dengan menggunakan username dan password. Setelah memasukkan username dan password maka sistem akan memeriksa data
2. User sebagai pengguna website
Pada saat pelanggan mengunjungi website, pelanggan dapat melihat
produk tanpa harus login terlebih dahulu. Namun ketika pelanggan ingin melakukan pemesanan maka diharuskan register atau login terlebih dahulu dengan menggunakan username dan password.
Gambar 3. 3 Rancangan Activity Diagram User
3.2.3 Perancangan Class Diagram Class Diagram digunakan untuk membantu analis melihat struktur database yang ada pada sebuah website.
Class diagram memiliki tiga era pokok yaitu nama, atribut, dan oprasi.
11 Gambar 3. 4 Perancangan Class
Diagram
3.3 Struktur Navigasi 3.3.1 Struktur Navigasi User
Struktur Navigasi ini digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan susunan dari sebuah website secara menyeluruh.
Gambar 3. 5 Struktur Navigasi User
3.3.2 Struktur Navigasi Administrator Struktur navigasi administrator digunakan untuk mengetahui data-data pembelian yang memesan barang.
Struktur navigasi administrator juga sebagai pengubah atau pengatur website seperti menambah,mengubah dan
Gambar 3. 6 Struktur Navigasi Administrator
3.4 Struktur Database
Website penjualan Fresh Market memiliki database untuk melakukan penyimpanan data. Berikut contoh salahsatu table pada database
12 Tabel 3. 1 Tabel Database
Atribut Tipe Data Value Keterangan
id_gambar Int 11 Primary
Key Kategori Varchar 50 Kategori
pada gambar
gambar_1 Text - Gambar
Produk
gambar_2 Text - Gambar
Produk
gambar_3 Text - Gambar
Produk
gambar_4 Text - Gambar
Produk
3.5 Rancangan Tampilan Webesite Rancangan tampilan diperlukan secara
mutlak di dalam proses pembuatan aplikasi halaman web.
3.6.2 Pembuatan Database
Sebelum pembuatan Website Form penjualan, yang harus dilakukan adalah pembuatan tabel di PHPMyAdmin agar data penjualan barang yang dilakukan oleh pelanggan di Website Form Penjualan dapat di simpan di Database PHPMyAdmin.
3.6.3 Pembuatan Konfigurasi Server Langkah awal yang dilakukan adalah membuat konfigurasi untuk melakukan koneksi ke server database.
Gambar 3. 7 Tampilan Listing Halaman Konfigurasi 3.6.4 Tampilan Website
Halaman pada website ini di bagi dua yaitu halaman untuk pelanggan dan halaman untuk admin.
3.6.4.1 Tampilan Halaman User 1. Tampilan Halaman Home
Gambar 3. 8 Tampilan Halaman Home 2.Tampilan Halaman Product
Gambar 3. 9 Tampilan Halaman Products
3. Tampilan Halaman About Us
13 Gambar 3. 10 Tampilan Halaman
About Us 4. Tampilan Halaman Mail Us
5. Tampilan Halaman Checkout
Pada halaman Checkout akan muncul daftar belanja yang ada pada.
Tampilan Checkout ditunjukan pada gambar 3.34 berikut.
Gambar 3. 11 Tampilan Halaman Checkout
3.7 Pengujian
Pengujian website berfungsi memberikan informasi bahwa website yang telah dibuat telah berfungsi sesuai dengan perancangan dan layak untuk digunakan pengguna. Tahap pengujian ini menggunakan metode black box testing.
4. PENUTUP 4. 1 Kesimpulan
Website ini dibuat untuk pemesanan bahan makanan seperti buah, sayur-sayuran dan daging.
Website ini memiliki tampilan dengan berbagai fitur. Tampilan tersebut adalah tampilan admin dan tampilan pelanggan.
Tampilan admin memiliki fitur halaman login, logout dan mempunyai empat menu yaitu barang, kategori, pembeli, konfirmasi.
Hasil uji coba website ini berhasil dibuktikan dengan berfungsinya konten- konten dan form pemesanan yang berada di website itu sendiri dan data pemesanan
14 berhasil diproses oleh admin selaku
pengelola toko Fresh Market. Selain itu, webiste Fresh Market dapat memberi kemudahan kepada pelanggan dalam mencari informasi tentang produk dan kemudahan dalam proses transaksi pembelian.
4.2 Saran
Dalam pembuatan website ini masih ada kekurangan sehingga penulis mengharapkan adanya pegembangan fitur seperti promo pembelian bahan pokok makanan, fitur perubahan pesanan oleh pembeli, dan penambahan kategori pada penjualan di toko tersebut agar dapat memenuhi kebutuhan para konsumen.
Oleh karena itu dalam pengembangan website toko online ini kedepan nya dapat membuat sistem menjadi lebih baik dan dapat menambah manfaat bagi para pengguna.
DAFTAR PUSTAKA
Rohi Abdulloh, 7 in 1 Pemrograman Web untuk Pemula, PT Elex Media Komputindo, Jakarta, 2018.
Abdulloh, R. (2016). Easy dan Simple Web Programming. Jakarta: Elex Media Komputindo.
Baum, D. (1999). E-comemerce. Jakarta:
PT. Gramedia Pustaka Utama.
Binanto, I. (2010). Multimedia Digital Dasar Teori dan Pengembangannya.
Yogyakarta: Andi Offset.
Haryana, K. S. (2015). "Pengembangan Perangkat Lunak dengan Menggunakan PHP". Jurnal Computech & Bisnis, 2(1), 14-21.
Kustiyaningsih, Y. (2011). Pemrograman Basis Data berbasis Web Menggunakan PHP dan MySQL. Yogyakarta: Graha Ilmu.
URL:
https://www.duniailkom.com/pengertian- dan-fungsi-php-dalam-pemograman-web , 1 juli 2019.
URL:
https://www.temukanpengertian.com/201 4/12/pengertian-uml.html, 2 juli 2019.
URL:
https://www.duniailkom.com/tutorial- belajar-html5-perbedaan-html5-dengan- html-4-dan-xhtml-1-1, 3 juli 2019
URL: https://www.andre.web.id/struktur- navigasi-website, 2 juli 2019.
