Perpustakaan Universitas Gunadarma BARCODE
BUKTI UNGGAH DOKUMEN PENELITIAN PERPUSTAKAAN UNIVERSITAS GUNADARMA
Nomor Pengunggahan
SURAT KETERANGAN
Nomor: 23/PERPUS/UG/2020
Surat ini menerangkan bahwa:
Nama Penulis : Yuti Dewita Arimbi
Nomor Penulis : 020505
Email Penulis : [email protected]
Alamat Penulis : Laboratorium Teknik Informatika Kampus J Kalimalang Bekasi
Telah menyerahkan hasil penelitian/ penulisan untuk disimpan dan dimanfaatkan di Perpustakaan Universitas Gunadarma, dengan rincian sebagai berikut :
Nomor Induk : DTI/TIG/PENELITIAN/23/2020
Judul Penelitian : Pembuatan Aplikasi Penjualan Spray Paint Graffiti Berbasis Website
Tanggal Penyerahan : 10 / 09 / 2020
Demikian surat ini dibuat untuk dipergunakan seperlunya dilingkungan Universitas Gunadarma dan Kopertis Wilayah III.
1
PEMBUATAN APLIKASI PENJUALAN SPRAY PAINT
GRAFFITI BERBASIS WEBSITE
1Yuti Dewita Arimbi
Fakultas Teknologi Industri, Universitas Gunadarma
ABSTRAK
Graffiti, sebagai salah satu bentuk street art, mengandung pesan tertentu yang ingin disampaikan oleh para pembuatnya. Pesan bisa muncul secara tersembunyi atau eksplisit. Menurut Triliana Kurniasari (2013), graffiti dipelopori oleh anak-anak muda yang ingin menuangkan ide-ide kreatifnya untuk menunjukkan eksistensi dan ekspresi diri walaupun menggunakan cara-cara yang sering dianggap melanggar aturan atau norma. Graffiti Store adalah toko atau tempat yang menyediakan kebutuhan para pelaku street art seperti spray paint, caps, dan sebagainya. Graffiti Store saat ini masih memiliki kekurangan diantaranya keterbatasan tempat dan sarana pengiklanan yang masih kurang efektif. Dengan membuat website Graffiti Store diharapkan dapat mempermudah pengiklanan produk dan proses transaksi jual beli pada toko Garage Graff tanpa harus datang ke offline store. Website Graffiti Store dibuat menggunakan framework laravel, dimana di dalamnya terdapat bahasa pemrograman PHP, HTML , dan lain-lain. Website Graffiti Store juga menggunakan MySQL sebagai database penyimpanan data yang nantinya akan membantu penjual menyusun data-data yang akan dipakai pada website agar lebih terstruktur.
Kata Kunci : Aplikasi, Grafitti, Laravel, Website, PHP.
PENDAHULUAN
Seiring berkembangnya zaman dan era modern seperti sekarang ini, street art sudah meracuni Ibu kota dan kota - kota besar di Indonesia, graffiti adalah salah satu dari jenis street art. Awal mulanya berkembang di New York pada dekade pergantian tahun 60-an dan 70-an, ketika orang-orang dari seluruh dunia pertama kali menjumpai “water resistant markers atau Flow-Master, di Indonesia banyak yang menyebut Spidol Marker”.
Graffiti, sebagai salah satu bentuk street art, mengandung pesan tertentu yang ingin disampaikan oleh para pembuatnya. Pesan bisa muncul secara tersembunyi atau eksplisit. Menurut Triliana Kurniasari (2013), graffiti dipelopori oleh anak-anak muda yang ingin menuangkan ide-ide kreatifnya untuk menunjukkan eksistensi dan ekspresi diri walaupun menggunakan cara-cara yang sering dianggap melanggar aturan atau norma.
2 Graffiti Store termasuk salah satu toko atau tempat yang meyediakan kebutuhan para pelaku street art, terutama para “Graffiti Writer“ atau yang sering didengar dengan julukan “Bomber“. Berdiri sekitar awal tahun 2020, dimulai dengan modal minim namun ingin memberikan sesuatu yang nantinya akan menjadi maksimal. Dalam pembuatan graffiti memerlukan beberapa perlengkapan seperti cat semprot, masker khusus untuk graffiti (masker filter double), sarung tangan, dan sketsa. Cat semprot untuk graffiti memiliki berbagai macam jenis caps seperti caps jenis female dan male (ujung cat semprot yang berfungsi untuk mengatur besar kecilnya hasil semprotan yang keluar dari cat semprot).
Graffiti Store adalah salah satu tempat yang menyediakan perlengkapan pelaku street art seperti cat semprot, berbagai aksesoris caps, sarung tangan khusus untuk graffiti, dan pembersih caps, dalam faktor pemesanan atau pembelian Graffiti Store masih terbatas karena basisnya adalah berjualan dalam garasi rumah yang notabene tidak terlalu besar. Dalam pemesanan juga masih terdapat kekurangan karena untuk menanyakan ketersediaan dan semacamnya masih mengharuskan konsumen melakukan chatting melalui whatsapp sedangkan untuk melihat katalognya hanya dapat dilihat melalui postingan instagram.
Dari permasalahan tersebut penulis bertujuan membuat sebuah website yang bertujuan untuk mempermudah pemasaran serta penjualan untuk produk-produk yang tersedia pada Graffiti Store dengan harapan dapat membantu menaikkan omzet selain dari hasil penjualan di toko offline.
Online Store sendiri adalah media atau toko yang melakukan transaksi melalui internet yang mana bisa disebut juga website e-commerce (Elektronik Comercial). Dalam hal ini pembuatan website online store diharapkan dapat membantu kekurangan yang dimiliki Graffiti Store.
TINJAUAN PUSTAKA Website
Website atau situs merupakan sebuah kumpulan halaman-halaman web beserta file-file pendukungnya yang mnampilkan informasi seperti file gambar, video, dan file digital lainnya yang disimpan pada sebuah web server yang umumnya dapat diakses melalui interne atau dengan kata lain, website adalah sekumpulan folder dan file yang mengandung banyak perintah dan fungsi-fungsi tertentu, seperti fungsi tampilan, fungsi menangani penyimpanan data, dan sebagainya [4].
PHP
PHP atau yang memiliki kepanjangan Hypertext Preprocessor merupakan suatu bahasa pemrograman yang difungsikan untuk membangun suatu website dinamis [1]. PHP menyatu dengan kode HTML, maksudnya adalah HTML digunakan sebagai pembangun atau pondasi dari kerangka layout web, sedangkan PHP difungsikan sebagai prosesnya sehingga dengan adanya PHP tersebut, web akan sangat mudah dilakukan pemeliharaan. PHP berjalan pada sisi server sehingga PHP disebut juga sebagai bahasa Server Side Scripting artinya bahwa dalam setiap menjalankan PHP, wajib adanya web server. PHP ini bersifat open source sehingga
3 dapat dipakai tidak berbayar dan mampu lintas platform, yaitu dapat berjalan pada sistem operasi Windows maupun Linux. PHP juga dibangun sebagai modul pada web server apache dan sebagai binary yang dapat berjalan sebagai CGI.
MySQL
MySQL adalah sebuah basis data yang mengandung satu atau jumlah tabel. Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau sejumlah tabel.Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau sejumlah tabel.
MySQL adalah database server open source yang cukup popular keberadaannya. Dengan berbagai keunggulan yang dimiliki, membuat software database ini banyak digunakan oleh praktisi untuk membangun suatu project.Adanya fasilitas API (Application Programming Interface) yang dimiliki oleh MySQL, memungkinkan bermacam – macam aplikasi komputer yang ditulis dengan berbagai bahasa pemrograman dapat mengakses basis data MySQL[11].
Tipe data MySQL menurut Kustiyahningsih (2011:147), “Tipe data MySQL adalah data yang terdapat dalam sebuah tabel berupa field – field yang berisi nilai dari data tersebut.Nilai data dalam field memiliki tipe sendiri – sendiri”[2].
Bootstrap
Bootsrap adalah sebuah framework untuk CSS dan berupa produk open source yang dibuat oleh Mark Otto dan Jacob Thornton [8]. Pada awalnya Bootsrap ini dibuat untuk membuat standarisasi front end untuk semua programmer di perusahaannya. Bootsrap telah berubah dari yang sebelumnya adalah CSS-Driven proyek ke sebuah host dari JavaScript plugins dan ikon yang dapat dengan mudah digunakan untuk formulir dan tombol.
Dasar dari Bootsrap yaitu dapat digunakan untuk desain web yang responsive dan menampilkan dengan 12 kolom, 940 pixel-wide grid. Bootsrap dapat dimodifikasi sesuai dengan kebutuhan dengan memilih antara fitur CSS dan JavaScript yang dapat dimasukkan ke dalam website yang akan dibuat.
Laravel
Laravel adalah framework PHP dengan kode terbuka (open source) dengan desain MVC (Model-View-Controller) yang digunakan untuk membangun aplikasi website. Framework ini pertama kali dibangun oleh Taylor Otwell pada tanggal 22 Februari 2012.
Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT, dibangun dengan konsep MVC (model view controller). Laravel adalah pengembangan website berbasis MVP (Minimun Viable Product) yang ditulis dalam PHP yang dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya pemeliharaan, dan untuk meningkatkan pengalaman bekerja dengan aplikasi dengan menyediakan sitaks yang ekspresif, jelas dan menghemat waktu [6]. Laravel banyak memberikan kemudahan, terutama dalam me-redesain template. Sehingga memungkinkan para pemakai laravel mengcustomize template dari bawaan Laravel sesuai keinginan dan kreativitasnya.
4
Visual Studio Code
Visual Studio Code adalah editor source code yang dikembangkan oleh Microsoft untuk Windows, Linux dan MacOS. Ini termasuk dukungan untuk debugging, GIT Control yang disematkan, penyorotan syntax, penyelesaian kode cerdas, cuplikan, dan kode refactoring. Hal ini juga dapat disesuaikan, sehingga pengguna dapat mengubah tema editor, shortcut keyboard, dan preferensi. Visual Studio Code gratis dan open-source, meskipun unduhan resmi berada di bawah lisensi proprietary. Kode Visual Studio didasarkan pada Elektron, kerangka kerja yang digunakan untuk menyebarkan aplikasi Node.js untuk desktop yang berjalan pada Blink layout. Meskipun menggunakan kerangka Elektron, Visual Studio Code tidak menggunakan Atom dan menggunakan komponen editor yang sama (diberi kode nama "Monaco") yang digunakan dalam Visual Studio Team Services yang sebelumnya disebut Visual Studio Online [15].
Blackbox Testing
Blackbox testing Blackbox testing adalah tahap yang digunakan untuk menguji kelancaran program yang telah dibuat. Pengujian ini penting dilakukan agar tidak terjadi kesalahan alur program yang telah dibuat. Blackbox testing yaitu menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program [10].
PEMBAHASAN
Perancangan dan pembutan website toko online Graffiti Store menggunakan PHP, Bootstrap dan MYSQL untuk pembuatan database, dan Laravel digunakan sebagai framework dari website yang dibuat. Aplikasi Graffiti Store ini terdapat lima pilihan menu yaitu Home, menu Products, menu Events, menu Custom Yours, menu How To Order, dan menu Login . Pilihan menu Home untuk menampilkan hot products , events, color chart spray paint, dan informasi offline store. Pilihan menu Product untuk menampilkan harga, stock barang, gambar dan detail dari produk yang dijual. Menu Events menampilkan informasi beberapa kegiatan yang akan berlangsung atau diselenggarakan oleh pemilik Graffiti Store. Halaman ini secara dinamis dapat diperbarui sesuai dengan waktu penyelenggaraan kegiatan. Tujuan kegiatan ini adalah untuk menarik minat pelanggan yang berkaitan dengan graffiti seperti bincang-bincang dengan praktisi graffiti, bagaimana cara membuat graffiti yang baik, dan sale/discount produk. Hal ini merupakan informasi yang diminati oleh para pelanggan atau pengunjung website Graffiti Store. Pilihan menu Custom Yours adalah menu yang menampilkan beberapa tawaran jasa custom jacket and shoes, di dalamnya terdapat range harga jasa, alamat, dan nomor yang dapat dihubungi oleh pelanggan untuk menentukan harga jasa yang diminati. Pilihan How To Order adalah menu yang menampilkan tata cara pembelian di dalam website. Pilihan login adalah halaman yang nantinya digunakan pelanggan untuk melakukan login ke dalam website, di dalamnya juga terdapat tombol yang dapat digunakan oleh pelanggan untuk mendaftar akun pada website Graffiti Store.
5
Diagram Alur Use Case
Use Case Diagram menjelaskan alur dari actor sebagai administrator dan user apa saja yang dapat dilakukan dalam website. Berikut merupakan gambaran dari Use Case Diagram yang dapat dilihat pada gambar :
User
Register
Melihat Halaman Home
Melihat Halaman Products
Melihat Halaman Events
Melihat Halaman Custom Yours
Melihat Halaman How To Order
Login Melihat Halaman DitonKing300ML
Mengubah Data Profile Melihat Halaman DitonKing400ML
Membuat Order Memanipulasi Order Cart
<<include>> <<include>> <<include>>
Admin
Memanipulasi Data Admin
Memanipulasi Data User
Memanipulasi Data Product
Memanipulasi Data Event
Memanipulasi Data Order Melihat Data Order
Memanipulasi Status Order
<<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<include>>
Melihat Data Store
<<include>> Data Admin Data User Data Event Data Product Data Order <<extend>> <<extend>> <<extend>> <<extend>> <<extend>>
Gambar 1. Use Case Diagram
Pada gambar 1 Use Case Diagram menjelaskan bahwa terdapat dua aktor yaitu admin dan user. Aktor Admin dapat melakukan beberapa aktifitas namun untuk melakukan aktifitas tersebut admin diharuskan melakukan login, sedangkan aktor user dapat melakukan sebagian aktifitas tanpa melakukan login seperti melihat halaman home dan sebagainya.
6
Perancangan Tampilan
Rancangan website penjualan sangat dibutuhkan dalam pembuatan program, karena dengan rancangan akan terlihat design dari program input sehingga memudahkan penulis dalam mengimplementasikan program.
Tampilan Home merupakan tampilan utama website yang di dalamnya berisikan hot products, event, color chart, header, image, background, footer, dan navbar untuk Aplikasi Toko Online Graffiti Store. Perancangan tampilan halaman Home digambarkan oleh gambar 2 berikut:
NAVBAR TEXT TEXT Product Title product description Button Button Product Title product description Button Button Product Title product description Button Button Button Event Title Event description Button Button Button Footer TEXT (a) (b)
Gambar 2. (a) Perancangan, (b) Tampilan Home
Pada Gambar 2(b) tampilan halaman home merupakan tampilan yang akan ditampilkan oleh program ketika pengguna pertama kali mengakses website garagegraff , dan terdapat tampilan beberapa product, event, button untuk listing warna spray paint, dan informasi Graffiti Store.
Tampilan Halaman Products
Products merupakan halaman yang akan ditampilkan ketika user mengakses menu products, terdiri dari gambar dan detail produk. Jika pengguna memilih salah satu pilihan maka akan diarahkan ke halaman berikutnya hingga pengguna selesai berbelanja.
7
Gambar 3 Tampilan Halaman Products
Pada gambar 3 terdapat tampilan product yang tersedia pada website, di dalamnya juga terdapat button untuk order dan view untuk product yang akan dipilih oleh pengguna.
Tampilan Halaman Events
Halaman events merupakan halaman pemberitahuan yang berubah-ubah sesuai dengan tema kegiatan yang sedang diselenggarakan. Hal ini sangat membantu pengguna jika ingin mendapat info terkait produk.
Gambar 4. Tampilan Halaman Events
Pada gambar 4 tampilan halaman events merupakan tampilan yang akan ditampilkan oleh program ketika pengguna mengakses button events pada website,
8 terdapat tampilan event yang tersedia pada website, di dalamnya juga terdapat button view untuk melihat detail dari events yang dipilih.
Gambar 5. Tampilan Halaman Form Register Pelanggan
Pada Gambar 5 tampilan yang akan ditampilkan oleh program ketika pengguna mengakses register pada website. Halaman ini merupakan halaman pelanggan untuk melakukan registrasi akun agar dapat melakukan transaksi.
Tampilan Halaman Produk
Halaman produk merupakan halaman yang akan ditampilkan ketika user mengakses button DitonKing300ML pada halaman Home. Tampilan produk di halaman website sangat menentukan minat pembeli. Pewarnaan halaman yang kontras dengan warna produk bertujuan agar pelanggan dapat mencari produk yang diinginkan beserta keterangan produk secara detail. Gambar 6 merupakan salah satu contoh tampilan produk yang ditawarkan yaitu spray paint DitonKing300ML
9 Tampilan halaman DitonKing400ML seperti pada gambar 7 merupakan tampilan yang akan ditampilkan oleh program ketika pengguna mengakses button DitonKing400ML.
Gambar 7. Tampilan Halaman DitonKing400ML
Pada gambar 7 merupakan Tampilan Halaman DitonKing 400ML dan warna yang tersedia untuk spray paint ukuran 400ML.
Halaman Order History
Pada Gambar 8 merupakan tampilan halaman Order History yang menampilan history dari pembelian yang dilakukan oleh user. Tampilan halaman ini ditampilkan oleh program ketika pengguna mengakses button order history pada website.
10
Tampilan Halaman Order Detail
Order Detail merupakan halaman yang akan ditampilkan ketika user mengakses button Detail pada halaman Order History, ketika user mengakses button Detail pada data order yang akan dilihat maka akan tampil seperti pada gambar 9 berikut:
Gambar 9. Tampilan Halaman Order Detail
Uji Coba
Setelah tahap pembuatan selesai, selanjutnya aplikasi diuji coba untuk mengetahui apakah aplikasi sudah memenuhi harapan atau belum. Pengujian menggunakan metode black-box testing dikarenakan metode ini menguji setiap bagian apakah sudah sesuai alur proses atau belum, sehingga dirasa cocok untuk menguji aplikasi berbasis web. Fungsi yang diujicobakan yaitu: (1) fungsi login user dengan memasukkan email dan password; (2) fungsi pendaftaran pelanggan; (3) fungsi keranjang belanja, apakah penghitungan jumlah produk yang ditambahkan sudah sesuai dengan formulasi; (4) fungsi checkout belanja, apakah penghitungan jumlah total belanja sudah sesuai dengan formulasi; (5) fungsi order history; (6) fungsi edit profile pelanggan; (7) fungsi login admin; (8) fungsi tambah admin; (9) fungsi tambah produk; (10) fungsi tambah events; (11) fungsi update status order; hasil uji coba black-box testing digambarkan pada tabel 1.
11
Tabel 1. Tabel Hasil Uji Coba Black-box Testing
No Fungsi Masukan Hasil yang
Diharapkan Keluaran Hasil 1 Login Pelanggan Pelanggan memasukkan email dan password Masuk ke halaman home Masuk ke halaman home Sukses 2 Pendaftaran Pelanggan Pelanggan memasukkan nama, email, dan
password Pendaftaran berhasil Pendaftaran berhasil Sukses 3 Login Admin Admin memasukkan email dan password Masuk ke dashboard admin Masuk ke dashboard admin Sukses 4 Keranjang belanja Pelanggan memasukkan produk ke dalam chart Produk masuk kedalam keranjang Produk masuk kedalam keranjang Sukses 5 Checkout belanja Pelanggan memilih menu checkout Produk dalam keranjang masuk kedalam checkout order detail Produk dalam keranjang masuk kedalam checkout order detail Sukses 6 Order History Pelanggan memilih menu Order History Detail riwayat belanja tampil Detail riwayat belanja tampil sukses 7 Edit Profile Pelanggan Pelanggan Mengedit Profile Data masuk ke database Data masuk ke database Sukses 8 Tambah Admin
Admin input data admin Data berhasil ditambahkan ke database Data berhasil ditambahkan ke database Sukses 9 Tambah Produk
Admin input data produk Produk berhasil di tambahkan Produk berhasil ditambahkan Sukses 10 Tambah Event
Admin input data event Data berhasil ditambahkan ke database Data berhasil ditambahkan ke database sukses 11 Update Status Order Admin Mengupdate status di status order Data berhasil terupdate di database Data berhasil terupdate di database sukses
Pada tabel 1 menjelaskan bahwa setelah dilakukannya uji coba menggunakan metode black-box testing, semua proses pada fungsi-fungsi dalam website telah berjalan sesuai dengan yang diharapkan.
12
Kesimpulan
Website Graffiti Store ini membantu proses transaksi penjualan dan periklanan produk, membuat kinerja serta waktu yang dipakai menjadi efektif dikarenakan skema yang dimiliki lebih terstruktur. Uji coba aplikasi menggunakan aplikasi black-box testing yang menguji setiap bagian apakah sudah sesuai alur proses atau belum. Hasil uji coba menyatakan bahwa fungsi-fungsi di dalam aplikasi telah berhasil berjalan dengan baik.
REFERENSI
[1] Agus Saputra.(2011).Trik dan Solusi Jitu Pemrograman PHP, Jakarta : PT.
Elex Media Komputindo.
[2] Astria Firman, Hans F. Wowor, Xaverius Najoan. (2016). Sistem Informasi
Perpustakaan Online Berbasis Web. E-journal Teknik Elektro dan Komputer vol.5 no.2 Januari-Maret 2016.
[3] Ade Pattianakotta, Alicia A.E. Sinsuw, Arie S.M. Lumenta. (2015). Sistem
Informasi Arsip Dokumen Kantor Pelayanan Kekayaan Negara Dan Lelang Manado. Jurnal Teknik Elektro dan Komputer, 4(7), 8-14.
[4] B.Herawan Hayadi, Adolf Bastian, Kasman Rukun, Nizwardi Jalinus,
Yaslinda Liza, Asriwan Guci, Expert System in the Application of Learning Models with Forward Chaining Method, International Journal of Engineering & Technology, 7 (2.29) (2018) 845-848
[5] Chandra Ari Gunawan , Julianti Kasih. (2016). Aplikasi Android Online
Untuk Berbagai Jenis Toko di Area Kota Bandung. Jurnal Teknik Informatika dan Sistem Informasi, 2(3), 331-340.
[6] Eko Junirianto. (2018). Pemrograman Web Dengan Framework Laravel.
WADE Group.
[7] Haviluddin. (2011). Memahami Penggunaan UML (Unified Modelling
Language). Jurnal Informatika Mulawarman Vol 6 No. 1 Februari, Samarinda, 2011.
[8] J. Spurlock. (2013). Bootstrap, O'Reilly Media.
[9] Lukman Abdul Hafiz1, Ernawati2, Desi Andreswari, Sistem Pakar Untuk
Diagnosa Penyakit Tulang Berbasis Web Menggunakan Metode Forward Chaining, Jurnal Rekursif, Vol. 6 No. 1 Maret 2018, ISSN 2303-0755. [10] Rosa Arini Sukamto, Muhammad Shalahuddin. (2014). Rekayasa
Perangkat Lunak Struktur dan Berorientasi Objek. Bandung : Informatika Bandung.
[11] Rosa Arini Sukamto, Muhammad Shalahuddin. (2015). Rekayasa Perangkat Lunak Terstruktur Dan Berorientasi Objek. Bandung: Informatika Bandung.
[12] Triliana Kurniasari. (2013). Eksistensi Graffiti sebagai Media Ekspresi Subkultur Anak Muda. Jurnal Universitas Diponegoro Vol 1, No 2 April, Semarang, 2013.
13 [13] Yeni Kustiyahningsih, Devie Rosa Anamisa. (2011) Pemrograman Basis Data Berbasis WEB Menggunakan PHP dan Mysql. Yogyakarta: Graha Ilmu.
[14] Yudho Yudhanto, Helmi Adi Prasetyo. (2018). Panduan Mudah Belajar Framework Laravel. Elex Media Komputindo.
[15] Lardinois, Frederic. (Rabu, 29 April 2015 23.15 WIB). Microsoft Launches Visual Studio Code, A Free Cross-Platform Code Editor for OS X, Linux And Windows. Tulisan pada https://techcrunch.com/2015/04/29/microsoft- shocks-the-world-with-visual-studio-code-a-free-code-editor-for-os-x-linux-and-windows/.
