PERANCANGAN WEBSITE E-COMMERCE MENGGUNAKAN BAHASA PEMROGRAMAN PHP
Oktaviani, Octarina Budi Lestari
Latar Belakang
Di dunia yang modern ini, manusia dituntut untuk serba cepat dalam melakukan banyak hal. Perkembangan teknologi dari zaman ke zaman semakin mempermudah kita dalam menyelesaikan banyak persoalan. Salah satu dari banyaknya perkembangan teknologi yang sangat umum dipakai adalah website. Sifatnya yang fleksibel dan dapat diakses dari mana saja membuat website menjadi kebutuhan krusial bagi perusahaan untuk memaksimalkan promosi dan penjualan. Jasa Design merupakan tempat usaha yang bergerak dibidang jasa desain logo untuk perusahaan dan organisasi. Promosi jasa di tempat usaha ini masih mengandalkan sosial media dan berita dari mulut ke mulut untuk mengenalkan jasa yang ditawarkan. Cakupan daerah juga terbatas mengingat keterbatasan koneksi dan orang orang yang ada disekitar. Tujuan dalam penulisan ilmiah ini adalah membuat situs web pemesanan logo pada Jasa Design dengan Bootstrap, PHP dan MySQL.
Landasan Teori
Struktur Navigasi
Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia. Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia mempunyai suatu pedoman dan arah informasi yang jelas. Dalam pembuatan aplikasi multimedia terdapat empat macam bentuk dasar struktur navigasi yang digunakan, yaitu : Struktur Navigasi Linear, Struktur Navigasi Non Linear, Struktur Navigasi Hierarchi, dan Struktur Navigasi Composite.
PHP
PHP merupakan script untuk pemrograman script web server-side, script yang membuat dokumen HTML secara on the fly, maksudnya dokumen HTML yang dihasilkan dari suatu aplikasi bukan dokumen HTML yang dibuat dengan menggunakan editor teks atau editor HTML. PHP/FI merupakan nama awal dari PHP. PHP adalah Personal Home Page, FI adalah Form Interface. Dibuat pertama kali oleh Rasmus Lerdoff. PHP, awalnya merupakan program yang dikhususkan untuk menerima input melalui form yang ditampilkan dalam
browser web. Software ini disebarkan dan dilisensikan sebagai perangkat lunak Open Source. PHP secara resmi merupakan kependekan dari PHP Hypertext Preprocessor, merupakan bahasa script server-side yang disisipkan pada HTML.
MySQL
MySql adalah perangkat lunak server basis data yang dapat melayani banyak pengguna, dan dapat melakukan proses dalam waktu yang bersamaan (multi threaded). MySql juga sangat cepat dan fleksibel dan dapat menyimpan data yang berkapasitas besar. Dalam perancangannya, MySql mengutamakan kecepatan proses, ketangguhan dan kemudahan bagi penggunannya. MySql server memungkinkan membuat aplikasi client untuk mengakses dan memanipilasi data di server basis data melalui basis data provider. Keuntungan utama menggunakan MySql server adalah mudah digunkan, berkecepatan tinggi dan membutuhkan sedikit memori.
Bootstrap
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan. Bootstrap merupakan framework untuk membangun desain web secara responsif dan cepat. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan perangkat apa yang harus digunakan.
Perancangan Sistem
Perancangan sistem dibagi dalam beberapa bagian, yaitu perancangan sistem menggunakan perancangan struktur navigasi, perancangan database, dan perancangan tampilan.
Pada halaman User, menampilkan halaman-halaman yang dirancang sesuai dengan kebutuhan user seperti home, pesan logo, harga, dan kontak yang mana setiap halaman memiliki kontennya masing-masing. Perancangan struktur navigasi user dapat dilihat pada gambar 1.
Gambar 1. Struktur Navigasi User
Penjelasan Struktur Navigasi pada halaman User :
1. Home menampilkan Dashboard User, Pesan Logo, Harga, Klien, Kontak. 2. Dashboard User menampilkan halaman awal yang berisi header, informasi
tentang logo, informasi tentang desainer dan kontak
3. Pesan Logo menampilkan formulir yang harus diisi jika ingin melakukan pemesanan logo.
4. Harga menampilkan daftar paket dan harga masing-masing paket 5. Klien menampilkan hasil desain logo klien yang sudah memesan
6. Kontak menampilkan info kontak yang berisi nomor telepon dan email untuk menyampaikan keluhan atau saran
Pada halaman Admin, menampilkan halaman-halaman yang dirancang sesuai dengan kebutuhan admin seperti pelanggan dan status yang setiap halaman memiliki kontennya masing-masing. Perancangan struktur navigasi Admin dapat dilihat pada gambar 2.
Gambar 2. Struktur Navigasi Admin
Penjelasan Struktur Navigasi pada halaman Admin :
menggunakan akun administrator.
2. Logout berfungsi untuk keluar dari akun yang sedang login 3. Dashboard menampilkan tampilan utama administrator
4. Pelanggan menampilkan daftar pelanggan yang telah memesan melalui halaman user
5. Status menampilkan status transaksi pada masing-masing pelanggan
Halaman website terdiri dari 3 bagian utama, yaitu Header, Body yang berisi Content dan Footer. Header menampilkan navigasi website, Content menampilkan isi dari menu yang ada pada bagian navigasi.
Berikut adalah rancangan pada halaman home.
Gambar 3. Perancangan Halaman Website
Website Jasa Design memiliki database untuk melakukan penyimpanan data. Database yang dibuat untuk website ini berisi tabel admin, dan pelanggan. Setiap tabel memiliki atribut, tipe data dan value masing- masing.
Tabel 1. Rancangan Tabel Pelanggan
Atribut Tipe Data Value Keterangan
id_pelanggan Integer 11 Primary Key email_pelanggan Varchar 20
nama_pelanggan Varchar 10
Atribut Tipe Data Value Keterangan
telp_pelanggan Varchar 13 Brand Varchar 15 Tentang_brand Text Paket Varchar 5 Statusbayar Varchar 15 Statustransaksi Varchar 15 tanggal_order Date
Tabel 2. Rancangan Tabel Admin
Atribut Tipe Data Value Keterangan
id_admin Integer 8 Primary Key
username Varchar 20
password Varchar 20 nama_admin Varchar 20
Uji Coba Sistem
Pada tahap ini dilakukan uji coba sistem dengan menggunakan metode black box testing. Metode pengujian digunakan untuk menemukan fungsi yang tidak benar,
kesalahan antarmuka, kesalahan struktur data dan akses database. Fungsi yang akan diuji adalah sebagai berikut :
1. Melakukan pemesanan
2.Login
3. Menghapus pelanggan oleh admin
4. Mengubah status transaksi oleh admin
Berikut ini adalah tabel yang berisi tentang uji coba sistem pada Jasa Design menggunakan metode black box :
Tabel 3. Pengujian Sistem Menggunakan Metode Black Box
No Fungsi Aksi Hasil yang diharapkan
Hasil nyata Hasil
1 Melakukan pemesanan Mengisi data pemesanan dengan lengkap Terdaftar sebagai pelanggan yang melakukan pemesanan Terdaftar sebagai pelanggan yang melakukan pemesanan Sukses 2 Login Mengisi username dan password yang terdaftar sebagai admin Masuk sebagai admin Masuk sebagai admin Sukses Mengisi username dan password yang tidak terdaftar sebagai admin Tidak dapat masuk dan muncul notifikasi login gagal Tidak dapat masuk dan muncul notifikasi login gagal Sukses
No Fungsi Aksi Hasil yang diharapka n Hasil nyata Hasil 3 Menghapus Pelanggan oleh admin Menekan tombol hapus pada salah satu pelanggan yang akan dihapus Pelanggan hilang dari menu tabel pelanggan Pelanggan hilang dari menu tabel pelanggan Sukses 4 Mengubah status transaksi oleh admin Menekan tombol dropdown untuk mengubah status transaksi Status transaksi akan berubah sesuai pelanggan yang diubah Status transaksi akan berubah sesuai pelanggan yang diubah Sukses
Uji Coba Browser
Pada tahap ini website yang sudah dibuat diuji dengan perangkat laptop dan dengan mengaktifkan Apache dan MySql pada XAMPP Control panel. Pengujian dilakukan menggunakan empat jenis browser yaitu Google Chrome, Mozilla Firefox, Microsoft Edge dan Opera Mini.
Tabel 4. Pengujian Website Pada Browser
Browser Keterangan
Google Chrome Multimedia yang Kecepatan Akses 1,7 detik Versi ditampilkan terlihat jelas
76.0.3809.100 pada halaman utama, button berfungsi sesuai harapan
Browser Keterangan
Mozila Firefox Multimedia yang Kecepatan Akses 3,7 detik Versi 68.0.1 ditampilkan terlihat jelas
pada halaman utama, button berfungsi sesuai harapan
Microsoft Edge Multimedia yang Kecepatan Akses 1,8 detik Versi 42.17134.1.0 ditampilkan terlihat jelas
pada halaman utama, button berfungsi sesuai harapan
Opera Mini Multimedia yang Kecepatan Akses 2,3 detik Versi 50.0.2254.14 ditampilkan terlihat jelas
pada halaman utama, button berfungsi sesuai harapan
Hasil pengujian pada browser diatas menyatakan bahwa tampilan website jelas dan sesuai dengan keinginan. Perbedaan signifikan terlihat pada kecepatan akses yang berbeda dari keempat browser tersebut. Browser Google Chrome memiliki kecepatan akses paling cepat yaitu 1,7 detik dan waktu akses paling lama yaitu browser Mozilla Firefox dengan waktu akses yaitu 3,7 detik.
Kesimpulan
Website Jasa Design membantu perusahaan dalam mempromosikan jasa kepada khalayak luas untuk menarik dan meyakinkan pelanggan akan kredibilitas dan kualitas desain yang ditawarkan. Dengan hadirnya website pemesanan logo ini, admin dapat mengelola data dan informasi tentang brand atau merek pelanggan serta pelanggan mengetahui kebutuhan apa saja yang diinginkan sebagai penunjang bisnis atau kebutuhan promosi.
DAFTAR PUSTAKA
[1] Fridayanti, EW. 2015. Rancang Bangun Sistem Informasi Permintaan Atk Berbasis Intranet. Jurnal Khatulistiwa Informatika. 4.
[2] Hartanto, AA dan Onno W. Purbo. 2002. Teknologi e-Learning Berbasis PHP dan MySQL. Jakarta.
[3] Hidayatullah, Priyanto & Jauhari Khairul Kawistara. 2014. Pemrograman Web. Bandung: Informatika.
[4] Kadir, Abdul, 2003, Pemograman Web : Mencakup HTML, CSS, Javascript & PHP. Yogyakarta. Andi Offset.
[5] Normi Aulia. 2016. Pengaruh Pemanfaatan Internet Terhadap Hasil Belajar Geografi Siswa Kelas XII IPS MAN 2 Kandangan. Jurnal Pendidikan Geografi. 3.
[6] Oscario, A. 2014. Pentingnya Peran Logo Dalam Membangun Brand. Jurnal. [7] Ritonga, P. 2017. Jenis-jenis Struktur Navigasi dalam Website.
https://bangpahmi.com/jenis-jenis-struktur-navigasi-dalam-website/ . 8 Agustus
2019.
[8] Rosa, Ariani Sukamto dan Shalahuddin M. 2014. Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek. Bandung : Informatika.
[9] Simarmata, Janner dan Imam Paryudi. 2007. Basis Data. Yogyakarta: CV. Andi Offset.
[10] Sulistiono, H. 2018. Coding Mudah dengan Codelgniter, Jquery, Boostrap, dan Datatable. Penerbit PT Elex Media Komputindo Kelompok Gramedia,
Anggota IKAPI. Jakarta.
[11] Sofwan, A. 2007. Belajar Mysql dengan Phpmyadmin. Tangerang. [12] Sovia, R. dan Jimmy Febio. 2011. Membangun Aplikasi E-Library
Menggunakan Html, Php Script, Dan Mysql Database. Jurnal PROCESSOR. 6.
[13] Wahana, Agung dan Asep Ririh Riswaya. 2013. Sistem Informasi Pengadaan Barang ATK di PT. Mekar Cipta Indah Menggunakan PHP dan MySQL. Jurnal Computech & Bisnis. 7(2).
