SISTEM APLIKASI JUAL BELI DI TOKO GAME BERBABIS WEBSITE MENGGUNAKAN FRAMEWORK BOOTSTRAP DAN MYSQL

SISTEM APLIKASI JUAL BELI DI TOKO GAME BERBABIS WEBSITE MENGGUNAKAN FRAMEWORK BOOTSTRAP DAN MYSQL

Meilani B Siregar (meilani@staff.gunadarma.ac.id)

ABSTRAK

Melihat perkembangan teknologi yang ada maka sistem jual beli mulai ingin memanfaatkan e- commerce. Tentunya penjualan secara manual banyak kendalanya seperti contohnya penyimpanan dan pencatatan data yang membutuhkan banyak tempat dan tidak praktis sehingga dirasa sangat tidak efektif. Aplikasi penjualan berbasis website ini dibuat menggunakan bahasa pemrograman PHP, database Mysql dan perancangan aplikasi menggunakan Unified Modelling Language (UML).

Website ini dapat diakses melalui alamat https://heyzhu.000webhostapp.com, dengan perancangan aplikasi yang telah disesuaikan dengan kebutuhan pengguna maupun pengelola melalui kebutuhan fungsional. Aplikasi ini dibuat dengan menggunakan kelengkapan fitur aplikasi yang ditentukan dengan memeriksa kesesuaian terhadap antarmuka yang merepresentasikan fitur tersebut. Kemudian melalui pengujian metode blackbox, aplikasi sudah memenuhi kebutuhan dari sistem.

Kata Kunci : Website, PHP, MySQL, Framework, Bootstrap.

1. Latar Belakang

Perdangangan melalui media online/internet (e-commerce) menjadi salah satu pilihan yang diminati oleh para pengusaha untuk memperluas jangkauan bisnisnya. E-commerce merupakan cara bagi konsumen untuk dapat membeli barang yang diinginkan secara online, hal inilah yang mungkin di nilai baik bagi para konsumen.

NTCrews adalah toko online yang menjual berbagai macam kebutuhan game online, salah

satunya ya itu item CSGO ini yang sedang berkembang pesat di Indonesia. Counter Strike: Global

Offensive adalah game dengan mode Tembakan orang pertama (First-Person Shooting) yang

dikembangkan oleh Valve Corporation dan Hidden Path Entertainment.

Website Menunggunakan Framework Boostrap Dan Mysql” yang di harapkan dapat memudahkan pembeli dalam melakukan transaksi yaitu pembelian pencarian item CSGO maka toko NTC memerlukan aplikasi penjualan untuk memperbaiki sistem penjualan, promosi, pemasaran, dan pembayaran dengan cara membuat website yang bisa di akses oleh seluruh pengguna internet.

1.1 Tujuan Penelitian

Adapun tujuan dari penelitian ini adalah membuat aplikasi penjualan di toko Game secara online yang menjual item in-game counter strike berbasis web.

1.2 Manfaat Penelitian

Manfaat dari penelitian ini adalah Website yang dibuat diharapkan dapat memudahkan pembeli dalam mencari kebutuhan item counter strike, memudahkan proses transaksi online (e- commerce), serta mempermudah membuat laporan penjualan.

1.3 Batasan Masalah

Agar tetap berfokus pada permasalahan yang diangkat, maka ruang lingkup dibatasi pada item CSGO dan pembayaran dilakukan secara transfer antar bank, pemesanan di batalkan apabila tidak di bayarkan selama 30 menit, maka pemesanan akan di hapus.

2. Tinjaun Pustaka

2.1 Counter Strike Global Offensive

Counter Strike: Global Offensive adalah game dengan mode Tembakan orang pertama (First- Person Shooting) yang dikembangkan oleh Valve Corporation dan Hidden Path Entertainment.

Permainan ini dapat dimainkan dengan menggunakan beberapa platform yang berbeda yaitu Windows, OS X dan PSN.

2.2 HyperText Markup Language (HTML)

Pengertian HTML menurut Fauziah (2014) adalah HTML merupakan standard bahasa

pemrograman yang populer dan digunakan untuk menampilkan dokumen yang kita buat di halaman

web.

pondasi bagi sebuah website. Sebuah rumah jika tidak memiliki pondasi maka akan cepat roboh.

Begitu juga dengan website. Jika tidak memiliki HTML sebagai pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript (bahasa untuk menambah perilaku website), dan PHP (bahasa pemrograman server website). Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai sebuah teks menjadi bergaris bawah dengan menggunakan tag html untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki beberapa bagian seperti header, navigasi, main dan footer. Kita dapat menandai setiap bagiannya dengan HTML.

2.3 Blackbox

Pengujian Kotak Hitam (Blackbox Testing) khusus di didesain untuk mencari kesalahan dengan melakukan ujicoba pada interface software. Pegujian Kotak Hitam (Blackbox Testing) mendemonstrasikan fungsi dari perangkat lunak yang beroperasi, dengan mengecek apakah input sudah bisa diterima dengan baik, dan hasil outputnya sesuai dengan apa yang diharapkan, uji coba Kotak Hitam (Blackbox Testing) melakukan pengecekan pada integritas informasi eksternal, pada dasarnya pengujian Kotak Hitam (Blackbox Testing) hanya memeriksa hasil output yang dihasilkan apakah sudah sesuai dengan apa yang diharapkan dan dinyatakan benar,namun pengujian Kotak Hitam (Blackbox Testing) tidak mengecek logika dari perangkat lunak, Pengujian unit merupakan pengujian secara individual terhadap semua program untuk memastikan bahwa program bebas dari kesalaan. namun jika ditemukan error atau kesalahan pada program, user akan langsung mencari kesalahannya dan proses untuk melakukan pencarian kesalahan ini dikenal dengan debugging.

2.4 Sublime Text

Sublime Text Editor adalah editor teks untuk berbagai bahasa pemograman termasuk pemograman PHP. Sublime Text Editor merupakan editor text lintas-platform dengan Python application programming interface (API). Sublime Text Editor juga mendukung banyak bahasa pemrograman dan bahasa markup, dan fungsinya dapat ditambah dengan plugin, dan Sublime Text Editor tanpa lisensi perangkat lunak.

2.5. PHP

Pengertian bahasa pemrograman PHP menurut Arief (2011) PHP adalah bahasa server-side-

kemudian hasilnya akan dikirimkan ke browser dengan format HTML .

Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya di dalam kode HTML. Untuk membedakan kode PHP dengan kode HTML, di depan kode PHP tersebut diberi tag pembuka dan diakhir kode PHP diberi tag penutup. Kode PHP yang ada di tengah kode HTML akan diproses menggunakan mesin yang disebut PHP parser. Mesin PHP parser akan langsung melewatkan (tidak mengolah) kode HTML, dan hanya mengolah isi kode PHP. Hasil akhir pengolahan kode PHP akan dikembalikan lagi dalam bentuk kode HTML untuk ditampilkan di browser.

2.6 MySQOL

MySQL merupakan database yang pertama kali didukung oleh bahasa pemrograman script untuk internet (PHP dan Perl). MySQL dan PHP dianggap sebagai pasangan software pembangun aplikasi web yang ideal. MySQL lebih

3. PERANCANGAN DAN IMPLEMENTASI

3.1 Analisis Kebutuhan

Website yang akan dirancang yakni membantu konsumen dalam kemudahan pembelian item counter strike dan tidak perlu harus bertanya dalam membeli suatu barang yang diinginkan. Website ini juga akan membantu Toko NTCrews dalam mengupdate harga dan jumlah barang yang tersedia sehingga Toko NTCrews tidak perlu melakukan pencatatan secara manual.

3.2 Use Case Diagram

Pada pembuatan website Toko Game ini disertai dengan penggunaan UML sebagai bentuk model sistem.

Gambar 3.1 Use Case Diagram aplikasi

Pada gambar 3.2 user membuka halaman login, lalu user dapat membuka halaman utama,

halaman produk, dan halaman hot produk yang berisi produk batu alam dan bisa melakukan

pemesanan, membuka halaman kontak, dan halaman akun yang berisi halaman keranjang belanja

untuk melihat barang yang ada dikeranjang, profil untuk merubah data diri pelanggan, transaksi

untuk melihat semua pemesan dan form konfirmasi transfer.

Gambar 3.2 Diagram Use Case Admin

3.3 Actvity Diagram

Actvity Diagram user dapat dilihat pada gambar 3.3

Gambar 3.3 Activity Diagram Login

Gambar 3.4. Activity Diagram Admin

3.4 Perancangan Database 3.4.1 Class Diagram

Gambar 3.4.1 Class Diagram Basis Data Database

Pada gambar di atas mengenai kelas diagram dijelaskan bahwa website dibuat

menggunakan basis data datanase toko online yang terdiri dari 6 tabel, user melakukan

registrasi dan otomatis mendapatkan id untuk proses login, admin dapat melakukan edit pada

status pengiriman pesanan pelanggan. Tabel transaksi hanya menampilkan field dari tabel

yang ada. User dapat melakukan pemesanan barang yang nantinya akan masuk ke tabel

transaksi, dan detail transaksi merupakan semua detail barang yang dibeli.

3.4.2. Tabel transaksi

Tabel 3.4.2. Struktur Tabel transaksi

Field Type Keterangan

Id_transaksi Varchar(20) PRIMARY KEY

Id_user Int(2)

Jml_barang Int(10)

Total Int(10)

status Varchar(50)

Tabel 3.4.3 Struktur Tabel Transfer

Field Type Keterangan

Id_transfer Int(11)

AUTO_INCREMENT PRIMARY KEY Nama_pelanggan Varchar(100)

Nama_pengirim Varchar(100)

No_rek Varchar(50)

Tanggal Varchar(50)

Jumlah Int(11)

Foto Text

Tabel 3.4.4 Struktur Tabel users

Field Type Keterangan

Id_user Int(11)

AUTO_INCREMENT PRIMARY KEY

Foto Varchar(50)

Nama Varchar(30)

Email Varchar(60)

Password Varchar(255)

level Varchar(10)

3.5. Rancangan Halaman Daftar dan Login

Halaman ini merupakan halaman daftar dan login dimana terdapat form yang harus diisikan

oleh pengguna, dan terdapat form pengisian email dan password untuk masuk sebagai

user/pengguna.

3.5.1 Rancangan Halaman Produk

3.5.2 Rancangan Halaman Bantuan

Halaman ini merupakan bantuan

3.5.3 Rancangan Halaman Profil User

Halaman ini merupakan halaman profil user

3.5.4 Rancangan Halaman Keranjang User

Halaman ini merupakan halaman keranjang user.

3.6 Pembuatan Website

Pada tahapan ini merupakan tahap pembuatan situs yang mengacu pada rancangan tampilan yang akan dibuat. Pembuatan situs ini menggunakan perangkat lunak Text Editor (Sublime), dengan menggunakan bahasa pemrogaman HTML5, PHP, CSS, javascript, MYSQL, dan menggunakan Framework Bootstrap. Pada saat melakukan pembuatan project diperlukan XAMPP yang berfungsi untuk menjalankan project yang sudah di buat.

Pembuatan situs ini dikerjakan berurutan mulai dari pembuatan Halaman Awal, Halaman Login, Halaman Register, Halaman Produk, Halaman Detail Produk, Halaman Tentang, Halaman Bantuan, Halaman Kontak, Halaman Akun pelanggan yang berisikan Halaman Keranjang, Halaman Profil, Halaman Semua transaksi dan Halaman konfirmasi transfer, dan Halaman admin yang berisikan Home Administrasi, Halaman Barang yang berisikan Form penambahan barang dan Tabel barang, Halaman Pelanggan yang berisikan Tabel pelanggan, Halaman Pemesanan yang berisikan Tabel semua transaksi, dan Halaman Transfer yang berisikan Tabel konfirmasi transfer. Mengenai tahapan yang akan dibahas, dimulai dari pembuatan project menggunakan Atom, pembuatan file HTML dan PHP dan mulai mendesain tampilan, dan memasukkan beberapa coding javascript dan boostrap.

3.6.1 Pembuatan Project Folder Baru pada XAMPP

Pada tahapan ini merupakan salah satu langkah awal dalam membuat suatu project website , Aktifkan dahulu XAMPP pada windows agar project yang sudah di buat agar bisa di akses melalui Localhost.

3.6.2 Memasukan Framework Bootstrap pada Project Web

Pada tahap ini adalah hal yang penting , yaitu mamasukan sebuah Framework Boostrap pada

project ini. Karena pada dasarnya Framework ada banyak jadi pilih salah satu yang cukup mudah.

3.6.3 Membuat Database dan Table pada MySQL

Sebelum melanjutkan dalam tahap membuat Halaman Login dan Register, ada salah satu tahap yang penting yaitu adalah membuat database dan table dalam phpMyAdmin. Database ini berfungsi untuk menghubungkan users agar mendapatkan hak akses untuk masuk ke dalam project yang di buat. Untuk itu cara membuat database adalah sebagai berikut.

Langkah pertama masuk terlebih dahulu ke phpMyAdmin bisa melalui:

http://localhost/phpmyadmin

3.7 Pengujian

Pengujian sistem diperlukan untuk mengetahui apakah aplikasi yang telah dibuat sesuai dengan perancangan yang telah ditentukan dan layak digunakan. Pada tahap pengujian ini menggunakan metode blackbox untuk mengetahui fungsi fitur aplikasi yang akan digunakan.

Pengujian blackbox dilakukan untuk menemukan kesalahan yang terjadi seperti fungsi yang tidak benar atau hilang, kesalahan interface, kesalahan struktur data, kesalahan kinerja, atau kesalahan inisialisasi dan terminasi.

3.7.1 Skenario Pengujian

Langkah skenario pengujian aplikasi website ini menentukan kehandalan dari fitur yang tersedia. Sebelum melakukan pengujian fitur utama pada pengisian form barang. Berikut ini merupakan contoh skenario yang akan diujikan :

3.7.2 Pelaksanaan Pengujian

Admin mengakses halaman web kemudian menggunakan fungsi-fungsi yang telah

disediakan seperti pada menu form barang, melihat table barang, melihat daftar pelanggan, dan

melihat seluruh transaksi pemesanan yang dilakukan pelanggan. Setelah dilakukan beberapa

pengujian semua fungsi dapat berjalan baik sesuai dengan menu-menu yang diberikan dalam

rancangan website. Fungsi tombol juga berfungsi dengan baik seperti tombol, edit, delete, input dan

3.8 Implementasi

Pada tahap ini dilakukan pembuatan hosting website di https://www.000webhost.com, pertama pilih menu daftar gratis (sign up for free) jika sudah membuat akun, silahkan login kedalam 000webhost dan tentukan nama domain yang diinginkan. Setelah berhasil login, maka akan masuk ke halaman control panel. Hosting ini gratis dengan masa berlaku 12 bulan.

Saat login berhasil dan sudah memasuki control panel, selanjutnya pilih file manager menu ini berfungsi untuk meng-upload seluruh file yang dibutuhkan. Kemudian pilih public_html untuk upload seluruh file di website. Terdapat pilih menu manage database untuk memasukkan database, pada saat langkah ini file database yang akan dimasukkan sudah disiapkan dalam format .sql yang telah diexport dari MySQL dalam phpmyadmin.

Setelah semua file yang menjadi komponen pembentuk website sudah berhasil dimasukkan, selanjutnya membuat konfigurasi database dan user database. Dalam tahap ini menggunakan presensilabsi sebagai nama database dan jgntanya sebagai username. Setelah berhasil dibuat maka akan tampil daftar database dan user databsase MySQL. Konfigurasi database dilakukan pada file /public_html/koneksi.php.

4. Kesimpulan

Kesimpulan yang dapat diambil dari pembuatan penulisan ilmiah ini adalah website

penjualan ini dibuat dengan menggunakan bahasa pemrograman PHP dan MYSQL sebagai basis

datanya. Berdasarkan hasil dari analisis dan perancangan sistem yang dibangun, maka dapat diambil

kesimpulan bahwa dengan adanya website ini pembeli menjadi lebih mudah mendapatkan informasi

tentang item counter strike yang tersedia di NTC Store. Sehingga dengan adanya sistem penjualan

online (e-commerce) maka NTC dapat memudahkan proses transaksi yang selama ini sifatnya

konvensional menjadi lebih modern dengan tersedianya transaksi online, dan website ini dapat

mempermudah dalam membuat laporan penjualan yang sebelumnya masih manual, alamat URL

https://heyzhu.000webhostapp.com/index.php

DAFTAR PUSTAKA

[1] Arief, Muhammad Rudiyanto 2011. Pemrograman Web Dinamis Menggunakan Php dan Mysql. Yogyakarta: ANDI.

[2] Deitel, Harley. dan Paul Deitel, 2001. E-Business & E-Commerce How To Program. New Jersey, USA: Prentice Hall.

[3] Fauziah. 2014. Konsep Dasar Perancangan Web. Jakarta: Mitra Wacana Media.

[4] Kadir, Abdul. 2013. Pemrograman Database MySQL Untuk Pemula.

Yogyakarta: Media Kom.

[5] Munawar, 2005. Model Berorientasi Objek dengan UML. Jakarta: Elex Media Komputindo.

[6] Ramakrishnan, Raghu., dan Gehrke, Johannes, 2003. Sistem Manajemen Database (Terjemahan), Edisi ketiga. Yogyakarta: Andi Offset.

[7] Sidharta, Lani, 1996, Sistem Informasi Bisnis: Analisa dan Desain Sistem.

Jakarta: Elex Media Komputindo.

[8] Stephens, Ryan., dan Ronald Plew, 2000. Database Design, Edisi Pertama.

Indianapolis, USA: Sams Publishing.

[9] Suyanto, Asep Herman. 2008. Step by Step Web Design Theory and Practice Edisi II. Yogyakarta: Andi Publisher.

[10] Wicaksono, Yogi. 2008. Membangun Bisinis Online dengan Mambo. Jakarta:

PT. Elex Media Komputindo.

[11] Mecha, Satria, 2014, Pengertian ERD (Entity Relationship Diagram), http://satriamecha.blogspot.co.id/2014/08/pengertian-erd-entity- relationship.html, 21 Agustus 2017.

[12] Wirawan, Faiz Agil, Pengertian HTML, Fungsi HTML serta Sejarah HTML, http://www.burung-net.com/2015/05/pengertian-html-fungsi-

html-serta-sejarah-html.html, 19 Agustus 2017.

[13] URL : counter-strike.net, 21 Agustus 2017.

[14] URL : http://informatika.web.id/pengertian-basis-data.html, 21

Agustus 2017.