APLIKASI PENGECEK HARGA PRODUK BERBASIS ANDROID WEB VIEW

APLIKASI PENGECEK HARGA PRODUK

BERBASIS ANDROID WEB VIEW

1

Wahyu Adam , 2Kika Nurjanah 1

Konsentrasi Manajemen Informatika STMIK LPKIA

2

Program Studi Teknik Informatika STMIK LPKIA

Jln. Soekarno Hatta No. 456 Bandung 40266, Telp. +62 22 75642823, Fax. +62 22 7564282 Email : adam@lpkia.ac.id, kikanurjannah@fellow.lpkia.ac.id

Abstrak

Harga adalah suatu nilai tukar yang bisa disamakan dengan uang atau barang lain untuk manfaat yang diperoleh dari suatu barang atau jasa bagi seseorang atau kelompok pada waktu tertentu dan tempat tertentu untuk memberikan nilai finansial pada suatu produk barang atau jasa yang ditawarkan ke sebuah pasar untuk diperhatikan, dimiliki, dipakai, atau dikonsumsi sehingga dapat memuaskan suatu keinginan atau semua kebutuhan. Dengan adanya kemampuan dari kamera

Android yang bisa membaca kode produk akan memudahkan mencari informasi harga yang

tersimpan di dalam konten web yang akan ditampilkan secara langsung dari aplikasi tanpa harus membuka aplikasi browser terlebih dahulu dengan Android System WebView di dalam Perangkat

Android.

Kata kunci : Harga, Produk, Android, System, WebView.

1. Pendahuluan

Dalam memberikan label harga, terkadang rak tidak bisa memuat semua label yang akhirnya hanya sebagian label saja yang dapat dipajangkan karena keterbatasan panjang rak dan banyaknya barang karena saling berdempetan. Ini biasanya terjadi pada barang-barang yang berukuran kecil. Dalam hal ini produk-produk yang tidak dipasang label tidak dapat diketahui harganya yang menyebabkan beberapa konsumen yang akan membeli barang tersebut selalu menanyakan terus menerus kepada pramuniaga untuk mengetahui harganya.

Dalam melayani pertanyaan harga dari konsumen, pramuniaga akan selalu mengecek harga produk tersebut melalui scanner kasir dengan men-scan produk tersebut untuk mengetahui harga produk yang diinginkan karena tak ada list atau price checker yang bisa digunakan oleh seorang pramuniaga. Namun hal ini bisa menyebabkan terganggunya proses transaksi pembayaran. Selain itu produk-produk tersebut bisa mengalami perubahan harga di setiap waktu yang akhirnya memberikan informasi harga yang berbeda pada saat sedang melakukan transaksi pembayaran. Hal itu terjadi karena label tersebut belum sempat diganti harganya oleh pramuniaga. Sehingga hal ini seringkali menjadi masalah untuk konsumen saat berbelanja menjadi kurang nyaman dan memberikan kesan yang kurang baik pada pihak swalayan.

Berdasarkan permasalahan di atas, maka perlu dibangun sebuah aplikasi yang bisa membantu pihak swalayan untuk memberikan informasi harga yang sesuai kepada konsumen dengan cara memberikan hak akses konsumen untuk bisa mngecek dan mencari harga barang sesuai yang diinginkan dengan sendirinya melalui sebuah aplikasi mobile. Hal ini dikarenakan konsumen atau masyarakat sudah sangat dekat dengan handphone terutama android yang sebagian besar masyarakat sudah memilikinya.

1.1. Dasar Teori

Aplikasi merupakan suatu unit perangkat lunak yang dibuat untuk melayani kebutuhan akan beberapa aktivitas seperti sistem perniagaan, game palayanan masyarakat, periklanan, atau semua proses yang hampir dilakukan manusia.

Android System Webview menampilkan konten web secara langsung dari aplikasi pihak ke-3 apapun yang menggunakan komponen Chrome tanpa harus membuka aplikasi browser terlebih dahulu.

2. Gambaran Perangkat Lunak 2.1. Aliran Proses

2.1. 1. Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang diharapkan dari sistem dan merepersentasikan interaksi antara actor dengan sistem.

Gambar 1 Use Case Diagram

Tabel : 1. Tabel Use case Scenario Dashboard

Aksi Aktor Reaksi Sistem

Scenario Normal 1 : EDP berhasil membuka aplikasi

1. Menjalankan aplikasi

2. Menampilkan dashboard

Tabel : 2. Tabel Use case Scenario Login

Aksi Aktor Reaksi Sistem

Scenario Normal 1 : EDP berhasil login

1. Menjalankan aplikasi 2. Menampilkan form login 3. Menginput username dan password 4. Menekan Login 5. Verifikasi username dan password. 6. Menampilkan menu aplikasi

Scenario Alternatif 1 : EDP gagal melakukan login

1 sampai dengan 4 sama seperti skenario normal 1

5. Menampilkan pesan username dan

password salah.

6. Menginput ulang username dan password yang ulang

7. Verifikasi username dan password. 8. Menampilkan menu aplikasi

Tabel : 3. Tabel Use case Scenario Kelola Kategori Produk

Aksi Aktor Reaksi Sistem

Scenario Normal : EDP menginput data

1. Pilih menu Kelola Data Kategori Produk

2. Menampilkan data Kategori produk 3. Mengklik Tambah Kategori 4. Tampil Form inputan kategori produk

5. Mengisi data kategori produk

6. Klik Create 7. Menyimpan data kategori produk

Tabel : 4. Tabel Use case Scenario Kelola Produk

Aksi Aktor Reaksi Sistem

Scenario Normal : EDP menginput data

1. Pilih menu Kelola Data Produk 2. Menampilkan Data Produk 3. Mengklik Tambah Produk 4. Tampil Form inputan produk 5. Mengisi data Produk

6. Klik Create 7. Menyimpan data Produk

Tabel : 5 Tabel Use case Scenario Cek Harga

Aksi Aktor Reaksi Sistem

Scenario Normal : Konsumen mendapatkan informasi harga barang

1. Masuk aplikasi 2. Menampilkan menu Cek Harga

3. Scan Barcode/Input 4. Menangkap data barcode

5. Menampilkan harga produk

6. Klik tanda Back di Hanphone

7. Menutup menu aplikasi

Tabel : 6 Tabel Use case Scenario Logout

Aksi Aktor Reaksi Sistem

Scenario Normal : EDP dapat keluar dari aplikasi

1. Klik menu Logout 2. Keluar dari menu aplikasi

3. Menampilkan form Login

4. Keluar aplikasi

2.2. Activity Diagram

Gambar 1 Activity Diagram Login

Gambar 2 Acitivity Diagram Kelola Kategori Produk

Gambar 3 Acitivity Diagram Kelola Produk

Gambar 4 citivity Diagram Cek Harga

2.3. Class Diagram

Class diagram adalah suatu diagram yang menyediakan sekumpulan class objek antar muka interface dan relasinya, dan juga untuk memodelkan database logic.

Gambar 5 Class Diagram

2.4. Perancangan Antarmuka

Perancangan antarmuka ini bertujuan untuk memberikan gambaran mengenai bentuk antarmuka dari perangkat lunak yang akan digunakan oleh user untuk berinteraksi dengan perangkat lunak. Rancangan antarmuka ini mempertimbangkan berbagai kemudahan dan fungsionalitas dari perangkat lunak itu sendiri.

2.4.1. Antarmuka Login

Gambar 6 Antarmuka Login

Antarmuka di bawah ini merupakan antarmuka saat pertama kali akan muncul setelah login berhasil dilakukan.

Gambar 7 Antarmuka Setelah Login Berhasil

2.4.2. Antarmuka Menu Kategori Produk

Gambar 8 Antarmuka Menu Kategori Produk

2.4.3. Antarmuka Tambah Kategori Produk

Gambar 9 Antarmuka Tambah Kategori Produk

2.4.4. Antarmuka Menu Produk

2.4.5. Antarmuka Tambah Produk

Gambar 11 Antarmuka Tambah Produk

2.4.6. Antarmuka Cek Harga

Gambar 12 Antarmuka Cek Harga

3. Implementasi

Sub bab ini akan menjelaskan langkah-langkah serta rencana jadwal dalam rangka mengimplementasikan kompresi data text menggunakan algoritma Huffman yang telah dirancang pada bab sebelumnya.

Daftar Kegiatan

Di bawah ini akan dijelaskan rangkaian dari aktifitas implementasi yang dilakukan penulis: 1. Pengumpulan kebutuhan

Pelanggan dan pengembang bersama-sama mendefinisikan format seluruh perangkat lunak, mengidentifikasikan semua kebutuhan, dan garis besar sistem yang akan dibuat. 2. Membangun prototyping

Membangun prototyping dengan membuat perancangan sementara yang berfokus pada

penyajian kepada pelanggan (misalnya dengan membuat input dan format output).

3. Evaluasi protoptyping

Evaluasi ini dilakukan oleh pelanggan apakah

prototyping yang sudah dibangun sudah sesuai

dengan keinginan pelanggan. Jika sudah sesuai maka langkah 4 akan diambil. Jika tidak prototyping direvisi dengan mengulang langkah 1, 2 , dan 3.

4. Mengkodekan system

Dalam tahap ini prototyping yang sudah di sepakati diterjemahkan ke dalam bahasa pemrograman yang sesuai.

5. Menguji system

Setelah sistem sudah menjadi suatu perangkat lunak yang siap pakai, harus dites dahulu sebelum digunakan. Pengujian ini dilakukan dengan White Box, Black Box, Basis Path, pengujian arsitektur dan lain-lain

6. Evaluasi Sistem

Pelanggan mengevaluasi apakah sistem yang sudah jadi sudah sesuai dengan yang diharapkan . Jika ya, langkah 7 dilakukan; jika tidak, ulangi langkah 4 dan 5.

7. Menggunakan system

Perangkat lunak yang telah diuji dan diterima pelanggan siap untuk digunakan

No Task Name Dur atio n

Start Finish Predec essors 1 Analisis kebutuhan sistem 14 days Tue 28/03/17 Wed 12/04/17 2 Pengumpulan Data 25 days Mon 17/04/17 Fry 12/05/17 1 3 Perancangan Perangkat Lunak 46 days Mon 15/05/17 Fry 30/06/17 2 4 Pembuatan Perangkat Lunak 22 days Sat 29/07/17 Sun 20/08/17 3 5 Implementasi dan Pengujian 7 days Mon 21/08/17 Sun 27/08/17 4 6 Evaluasi dan Perbaikan 5 days Mon 28/08/17 Sat 02/09/17 5

Gambar 13 Daftar Kegiatan

3.1. Lingkup dan Batasan Implementasi

1. Sistem ini dirancang berbasis web menggunakan framework YII dan berbasis Android

2. Database menggunakan mySql phpMyAdmin. 3. Tidak semua produk dapat terbaca oleh

kamera karena keterbatasan Aplikasi,

Hardware, ataupun dari jaringannya.

4. Harga yang dihitung hanya berdasarkan harga satuan saja.

3.2. Implementasi Antarmuka 1. Dialog Screen Login

Gambar 14 Dialog Screen Login

Gambar 15 Dialog Screen Berhasil Login

2. Dialog Screen Kategori Produk

Gambar 16 Dialog Screen Menu Kategori Produk

3. Dialog Screen Kategori Produk

Gambar 17 Dialog Screen Tambah Kategori Produk

4. Dialog Screen Menu Produk

Gambar 18 Dialog Screen Menu Produk

5. Dialog Screen Tambah Produk

Gambar 19 Dialog Screen Tambah Produk

6. Antarmuka Cek Harga a. Tampilan Awal

Gambar 20 Dialog Screen Tampilan Awal Cek Harga

b. Dialog Screen Cek Harga Input Manual Barcode

Gambar 21 Dialog Screen Cek Harga Input Manual Barcode

c. Dialog Screen Cek Berdasarkan Input Manual Nama Barang

Gambar 22 Dialog Screen Cek Harga Input Manual Nama Barang

d. Dialog Screen Scan Barcode

Gambar 22 Dialog Screen Scan Barcode

4. Hasil Pengujian

Tabel : 7 Tabel Hasil Pengujian Perangkat Lunak

N o Fungsi Yang Diuji Cara Penguji an Hasil Yang Diharap kan Hasil Penguji an K et 1 Penguji an Login Masuka n Userna me dan passwor d Jika Usernam e dan Passwor d benar maka login berhasil Berhasi l Login Jika usernam e dan passwor d salah maka login gagal Gagal Login Jika usernam e dan passwor d tidak terdaftar Gagal Login 2 Penguji an Input Data kategor i produk Pilih menu Data kategori produk Jika data sesuai dan lengkap Input berhasil Jika data tidak sesuai Gagal Input

3 Penguji an Input Data produk Pilih menu Data produk Jika data sesuai dan lengkap Input berhasil 4 Penguji an Kelola Data kategor i produk Pilih menu Data kategori produk Jika proses CRUD sesuai maka proses CRUD berhasil Berhasi l CRUD 5 Penguji an Kelola Data produk Pilih menu Data produk Jika proses CRUD sesuai maka proses CRUD berhasil Berhasi l CRUD 6 Penguji an Input manual barcode Masukk an nomor barcode pada input text di barcode Jika data input sesuai Input berhasil Jika data tidak sesuai Gagal Input 7 Penguji an Input manual nama produk Masukk an nama produk pada input text di nama produk Jika data input sesuai Input berhasil 8 Penguji an scan barcode kamera Klik tombol scan barcode Jika data input terbaca Input berhasil Jika data tidak terbaca Gagal Input

Setelah melalui beberapa tahap analisa, perancangan dan implementasi, maka diperoleh kesimpulan sebagai berikut :

1. Tidak semua Perangkat Android menunjang untuk dapat dilakukan scan karena keterbatasan spesifikasi kamera sehingga proses pembacaan barcode tidak bisa dilakukan.Hanya bisa memilih dengan cara input manual saja. 2. Setelah digunakannya aplikasi pengecek harga

oleh konsumen bisa membantu memudahkan dalam mencari informasi harga produk di swalayan.

Saran atau masukan yang dapat kami berikan untuk menunjang atau pengembangan sistem yaitu Perusahaan disarankan untuk menggunakan sistem operasi yang bisa mendukung dalam penggunaan aplikasi web agar bisa memberikan pelayanan secara client untuk memberikan informasi harga produk yang ada di swalayan.

Daftar Pustaka

[1] Haryanto Bambang Dr., David Tegarden Alan Dennis, Esensi esensi Bahasa

Pemrograman Java, Bandung,

INFORMATIKA 2011.

[2] SHARIVE, Proyek Membangun Website

dengan YII Framework, 1st ed., Lukmanul

Hakim, Ed. Yogyakarta, Indonesia: LOKOMEDIA, 2014.

[3] Barbara Haley Wixom, David Tegarden Alan Dennis, Systems Analysis Design UML

version 2.0. Virginia, United States of

America, 2009. [4] [Online]. http://www.kiosbarcode.com/label-barcode/ [5] [Online]. https://www.academia.edu/6916905/Menurut _Safaat_Nazruddin [6] [Online]. https://droidpoin.com/3992/apa-itu-system-webview-di-android/