T1 682008072 Full text

(1)

Perancangan dan Implementasi Sistem Informasi Penjualan

Berbasis

Web

pada Butik Aqila Salatiga

Artikel Ilmiah

Diajukan kepada Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Sistem Informasi

Peneliti:

Litta Huwae (682008072)

Program Studi Sistem Informasi Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

Salatiga

(2)

(3)

(4)

(5)

(6)

(7)

5

1. _Pendahuluan

Pada dasarnya sistem informasi merupakan suatu sistem yang dibuat oleh manusia yang terdiri dari komponen-komponen dalam organisasi untuk mencapai tujuan yaitu menyajikan informasi. Sistem informasi di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi, mendukung operasi, bersifat manajerial, dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan [1].

Butik Aqila Salatiga merupakan salah satu usaha dagang yang bergerak dalam bidang penjualan pakaian batik, dimana batik yang dijual adalah batik Pekalongan. Dengan persaingan yang semakin ketat dalam penjualan pakaian maka butik Aqila tidak mau untuk kehilangan pelanggan. Namun dalam hal pemberian informasi mengenai produk yang dijual oleh Butik Aqila mengalami kesulitan karena pemberian informasi hanya mengandalkan konsumen saja. Dimana informasi disampaikan dari satu konsumen ke konsumen yang lain, sehingga yang mengetahui hanya konsumen yang seringkali melakukan pembelian. Permasalahan lain yang terjadi juga yaitu informasi persediaan barang pada Butik Aqila belum tersedia sehingga pemilik butik tidak mengetahui persediaan barang yang ada karena pemilik butik hanya memberikan kepercayaan penuh pada karyawannya tanpa melihat langsung persediaan barang.

Berkaitan dengan masalah tersebut, maka penggunaan dan pemanfaatan perangkat lunak komputer diperlukan dan akan lebih berguna jika ada suatu aplikasi yang digunakan dapat mengatasi permasalahan yang ada. Berdasarakan latar belakang yang telah diuraikan maka akan dibuat suatu sistem informasi penjualan berbasis web sehingga bisa menjadi media online yang membantu Butik Aqila dalam melakukan penjualan dan persediaan barang.

2. Tinjauan Pustaka

Penelitian pertama yang berjudul Analisis dan Perancangan Sistem Informasi Penjualan dan Persediaan Barang pada UD. Indah Jati Sport Godean. Pada penelitian ini sistem yang dibuat menggunakan Visual Basic 6.0 dan Sql Server 2000 sebagai database. Pemanfaatan teknologi komputer dapat memberikan kemudahan dalam pemrosesan data menjadi informasi dalam dunia usaha maupun dunia kerja. Hasilnya, dengan ada sistem baru pada UD. Indah Jati Sport Godean dapat membantu kelancaran, ketetapan dan efisiensi mekanisme kerja dari pengolahan data UD. Indah Jati Sport Godean sehingga informasi dapat diperoleh lebih cepat [2].

(8)

6

lebih cepat, akurat dan relevan kepada konsumen, menghemat waktu untuk memasukkan data-data sehingga pekerjaan yang dilakukan tidak berulang-ulang dan dapat mengedit data dengan mudah, serta hasil laporan dapat dengan mudah diperoleh dan tepat waktu [3].

Perbedaan penelitian ini dengan penelitian yang dilakukan adalah perancangan dan implementasi sistem informasi penjualan berbasis web, yang dibuat dengan menggunakan PHP sebagai bahasa pemrograman dan MySql sebagai database. Dan metode pengembangan sistem yang digunakan adalah metode prototype. Sistem yang dihasilkan dapat bersifat online dan dapat diakses dari media internet. Selain itu, pada sistem ini terdapat track record yang ada pada halaman user.

Sistem informasi merupakan seperangkat komponen yang saling berhubungan dan berfungsi mengumpulkan, memproses, menyimpan, dan mendistribusikan informasi untuk mendukung pembuatan keputusan dan pengawasan dalam organisasi [4].

Penjualanadalah suatu sistem keseluruhan dari kegiatan usaha yang ditujukan untuk merencanakan, menentukan harga, mempromosikan, dan mendistribusikan barang, jasa, ide kepada pasar sasaran agar dapat mencapai tujuan organisasi.

Sistem Informasi Penjualan diartikan sebagai suatu pembuatan pernyataan penjualan, kegiatan akan dijelaskan melalui prosedur-prosedur yang meliputi urutan kegiatan sejak diterimanya pesanan dari pembeli, pengecekan barangada atau tidak ada dan diteruskan dengan pengiriman barang yang disertai dengan pembuatan faktur dan mengadakan pencatatan atas penjualan yang berlaku [5].

Website atau situs juga dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website [6].

3. Metode Penelitian

Metode yang digunakan untuk pengembangan sistem adalah metode

(9)

7

Gambar 1 Metode Prototype [7]

Pendekatan prototyping melewati tiga proses, yaitu pengumpulan kebutuhan, perancangan dan membangun prototype, dan evaluasi Prototype. Proses-proses tersebut dapat dijelaskan sebagai berikut:

1. Proses dimulai dengan pengumpulan kebutuhan (requirements). Pada proses ini pengembang yaitu peneliti dan user yaitu pemilik butik bertemu untuk mengidentifikasikan kebutuhan sistem yang akan dibangun. Dari tahap wawancara tersebut diketahui kebutuhan secara umum sistem yang akan dibangun nantinya. Kebutuhan sistem dari hasil wawancara pengumpulan kebutuhan adalah : 1). Sistem dapat menampilkan produk yang dijual pada butik Aqila. 2). Pada sistem customer dapat melakukan pemesanan online. 3). Sistem dapat memberi informasi terhadap persediaan (Jumlah stock barang yang masih ada).

2. Setelah mengetahui kebutuhan sistem, maka perancangan sistem dilakukan dengan menggunakan Unified Modelling Language (UML), dan juga dilakukan perancangan interface untuk mendasari pembuatan tampilan aplikasi yang akan dibuat berdasarkan kebutuhan user yaitu pemilik butik. Selanjutnya dalam metode prototyping yaitu build/ revise mock-up atau membangun sistem secara cepat. Dalam artian lebih memfokuskan pada input

dan output sistem sesuai dengan kebutuhan umum yang diketahui pada pengumpulan kebutuhan. Tahap ini menghasilkan sistem informasi penjualan

prototype pertama.

3. Prototype pertama yang dihasilkan, dievaluasi oleh user yaitu pemilik butik. Pada tahap penyerahan prototype pertama didapatkan informasi baru tentang kebutuhan sistem yang akan dibangun nantinya. Kebutuhan sistem dari hasil evaluasi prototype pertama adalah : 1). Pada evaluasi prototype pengguna ingin tampilan lebih menarik. 2). Terdapat report barang masuk dan barang keluar pada sistem.

Hasil evaluasi prototype ini dijadikan bahan untuk perubahan dan pengembangan selanjutnya yaitu pembuatan prototype kedua. Setelah prototype

kedua selesai dibangun, selanjutnya prototype kedua dievaluasi kembali oleh user,

di mana menurut user prototype yang dibangun sudah sesuai dengan kebutuhan dan tampilannya. Hal ini menyebabkan proses prototyping berhenti sampai pada

prototype kedua, karena tahapan dalam metode prototype dinyatakan selesai jika

(10)

8

Perancangan Sistem

Perancangan sistem yang akan dibuat menggunakan Unified Modeling Language (UML). Dalam sistem yang akan dibuat menggunakan beberapa diagram, yaitu use case diagram, activity diagram dan class diagram.

Use case diagram menggambarkan hubungan antara aktor dengan sistem yaitu bagaimana memanfaatkan atau menggunakan sistem tersebut. Use case diagram merepresentasikan kegiatan yang dijalankan oleh sistem dan menggambarkan hubungan antara aktor dengan setiap proses yang digambarkan melalui setiap use case. Setiap use case menggambarkan sebuah proses yang

Lihat report barang masuk dan keluar Hapus pesan

Login <<include>>

Gambar 2 Use Case Diagram Admin

Gambar 2 menjelaskan hak akses yang dimiliki oleh admin yaitu buat berita, lihat data member, input type stock, input stock barang, input data pembelian,

update data pembayaran, lihat data penjualan, upload file stock, lihat report

barang masuk dan keluar dan hapus pesan.

Member

(11)

9

Gambar 3 menjelaskan hak akses yang dimiliki oleh member yaitu lihat berita, lihat profil, edit profil, lihat keranjang, lihat produk, pemesanan produk, batal pemesanan, lihat about us, dan lihat galeri.

Lihat Produk

Gambar 4 Use Case Diagram Non Member

Gambar 4 menjelaskan hak akses yang dimiliki oleh non member yaitu lihat produk, lihat berita, registrasi, lihat galeridan lihat about us.

Activity diagram menggambarkan aliran aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi dan bagaimana mereka berakhir. Berdasarkan use case diagram yang telah dibuat maka ada terdapat tiga activity diagram yaitu untuk Admin, Member dan non Member untuk proses dari sistem yang akan dibangun.

Start

Gambar 5 Activity Diagram Input Stock Barang (Admin)

Gambar 5 menggambarkan aktivitas-aktivitas yang dilakukan oleh seorang

(12)

10

aktivitas-aktivitas tersebut. Sistem dimulai dengan melakukan login terlebih dahulu, kemudian admin dapat melakukan inputstock barang.

Start

pilih menu produk

lihat produk

klik keranjang

lihat keranjang

lihat pesanan

End

Login

validas i

Menampilkan halaman utama

menampilkan produk

menampilkan pesanan

Sistem M ember

Gambar 6 Activity Diagram Pemesanan Produk (Member)

Gambar 6 menggambarkan aktivitas-aktivitas yang dilakukan dengan menggunakan hak akses sebagai Member. Untuk melakukan pemesanan member

harus melakukan login dengan memasukkan username dan password yang kemudian akan diperiksa oleh sistem, apabila input-an member adalah valid, maka sistem akan lanjut, tetapi apabila tidak valid, maka member akan tetap berada pada form login. Setelah Member berhasil login, maka selanjutnya Member

memilih menu produk, lihat prdouk, kemudian melakukan pemesanan.

Gambar 7 Activity Diagram Registrasi (Non Member)

Gambar 7 menggambarkan aktivitas yang dilakukan oleh non member.

(13)

11

Class diagram merupakan diagram yang digunakan untuk menampilkan kelas-kelas yang ada dalam sistem berupa objek yang sedang dikembangkan dan dari kelas satu ke kelas yang lain yang mempunyai relasi.

Gambar 8 Class Diagram System

Gambar 8 merupakan class diagram yang dimiliki oleh sistem informasi penjualan. Kelas ini berstereotype boundary, control atau entity yang menggambarkan sebuah konsep awal mengenai komponen dalam sistem aplikasi yang memiliki tanggung jawab dan perilaku yang berbeda. Dengan masing-masing fungsi yang dibawa setiap stereotype ini akan melengkapi pembentukan

class diagram menjadi satu kesatuan yang utuh.

Boundary Class, merupakan bagian yang menyediakan layanan interaksi antara pengguna aplikasi serta sistem dan termasuk aktivitas yang terjadi di dalamnya. Pada perancangan sistem ini boundary class terdiri dari RegistrasiUI, MemberUI, KeranjangUI, dan AdminUI.

(14)

12

MemberLogin, Keranjang, Admin, Manajemen Berita, Manajemen Data Supplier

dan Manajemen Stock Barang.

Entity Class, berfungsi sebagai media penyimpanan segala informasi yang berada dalam sistem. Kelas ini juga berfungsi sebagai media pengolahan data yang disebut database. Pada perancangan sistem ini entity class terdiri dari Registrasi, Member Login, Keranjang, Admin, Manajemen Berita, Manajemen Data Supplier dan Manajemen Stock Barang.

4. Hasil dan Pembahasan

Dalam sistem peenjualan dan persediaan berbasis web pada Butik Aqila, terdapat beberapa hal yang dapat dilakukan oleh pengunjung sebelum dirinya terdaftar menjadi Member dari Butik Aqila.

Gambar 9 Tampilan Halaman Utama Web Butik Aqila

Gambar 9 merupakan tampilan utama saat pengunjung ingin mengakses halaman web Butik Aqila. Halaman utama aplikasi web Butik Aqila memiliki beberapa menu yang dapat diakses sebelum pengunjung tersebut menjadi Member

(15)

13

Gambar 10 Tampilan Produk

Gambar 10 merupakan salah satutampilan produk. Dan yang bisa melakukan pemesanan produk hanya yang sudah menjadi member. Pada halaman ini member

dapat melakukan pemesanan terhadap produk dengan mengklik langsung tulisan

Add To Your Basket atau tanda plus yang ada disebelah gambar produk. Dengan demikian maka secara otomatis produk yang dipesan akan langsung masuk ke keranjang belanja.

Kode Program 1 Tampilan Produk

1. _{function ajax($kd){}

2. if (ISAJAX){

3. _{$where = array('kode' => $kd);}

4. _{$orderby = "dateadd desc";}

5. _{$data["query"]} ₌ _{$this->modelrecords->getrecords}

("tabel_stock", 1, 0, $where, '', '', '', $orderby, ''); 6. $data["total_rows"] = $data["query"] ?

$data["query"]->num_rows() : 0;

7. $head = $this->modelrecords->getsinglefield

("tabel_stock", "nama_barang", array("kode" => $kd));

2. $type = $this->modelrecords->getsinglefield ("tabel_stock", "type", array("kode" => $kd));

3. $namaType = $this->modelrecords->getsinglefield

("tabel_type_stock", "type", array("id" => $type));

4. $data['heading'] = $namaType . " " . $head;

5. $result = $this->load->view("product/page", $data, true);

6. $response = array(

Kode Program 1 adalah perintah yang digunakan untuk menampilkan produk. Pada proses ini memanggil data dari tabel_stock dengan limit 1, where = array („kode‟ => $kd), orderby = “dateadd desc”. Kemudian total_rows untuk menstruktur data yang dipanggil dan load->view "product/page" adalah untuk menampilkan data yang dipanggil pada folderview/product/page. Response dari data yang dipanggil akan direspon jika dibuat dalam bentuk json, jika tidak else

(16)

14

Gambar 11 Tampilan Stock Barang

Gambar 11 merupakan halaman input stock barang yang digunakan oleh

admin. Halaman input stock barang berisi beberapa field yang harus diisi oleh

Admin. Setiap inputan yang telah disimpan, sistem dengan otomatis akan langsung menampilkan hasil inputan di dalam tabel stock barang. Pada tabel stock barang admin dapat melihat gambar, mengedit dan menghapus stock barang dengan memilih tombol-tombol yang ada pada kolom setting.

Kode Program 2 Menampilkan Stock Barang

1. function add(){

2. if (ISAJAX){

3. $data["arrtype"] = array("" => "Pilih Type Stack...");

4. $qtype = $this->modelrecords->getrecords

("tabel_type_stock", 0, 0, '','', '', '', 'id asc', '');

5. $totaltype = $qtype ? $qtype->num_rows() : 0;

6. if ($totaltype > 0){

7. foreach ($qtype->result() as $rtype){

8. $data["arrtype"][$rtype->id] = $rtype->type;

9. }

10. }

11. $data['action'] = "stock/submitadd";

12. $result = $this->load->view("stock/form", $data, true);

13. $response = array(

14. "response" => $result

15. );

16. echo json_encode($response);

17. }

18. Else

19. {

20. die(show_404('page'));

21. }

(17)

15

Kode Program 2 adalah perintah yang digunakan untuk stock barang. Pada proses ini memanggil data dari tabel_type_stock dengan total_rows untuk menstruktur data yang dipanggil dan load-> view "stock/from" adalah untuk menampilkan data yang dipanggil pada folder view/stock/from. Response dari data yang dipanggil akan direspon jika dibuat dalam bentukjson, jika tidak else akan menampilkan error.

Pengujian sistem dilakukan untuk memeriksa kinerja antar komponen sistem yang telah diimplementasikan. Tujuannya untuk mengetahui apakah sistem yang dibuat telah bekerja sesuai dengan yang diharapkan oleh user. Pengujian sistem dilakukan dengan menggunakan metode black box testing. Metode black box testing digunakan oleh pengembang sistem atau programmer dengan memberikan inputan tertentu dan melihat hasil dari inputan tersebut. Metode black box testing lebih ditujukan pada fungsionalitas sebuah sistem.

Pengujian Hak Akses Admin dan Member

Tabel 1 menjelaskan aktivitas yang terjadi pada hak akses yang dilakukan oleh seorang admin dan member, beserta keluaran dan hasil pengujian dari aktivitas yang terjadi.

Tabel 1 Pengujian Hak Akses Admin dan Member

Aktivitas Input Output Keterangan

Melakukan barang gagal disimpan dan akan muncul pesan bahwa data harus diisi .

- Jika semua kolom diisi

(18)

16

- Jika semua kolom diisi

dengan benar sesuai

Berdasarkan hasil dan pembahasan yang telah dilakukan tentang sistem informasi penjualan berbasis web dapat disimpulkan bahwa customer dapat melakukan pemesanan secara online, namun sistem belum dapat melakukan konfirmasi pembayaran.

(19)

17

6. Daftar Pustaka

[1] Wahyono, Teguh. 2004. Sistem Informasi (Konsep Dasar, Analisis Desain dan Implementasi). Yogyakarta : Graha Ilmu.

[2] Muhammad dan Sangaji, Punjar dan Wicaksono, Aminuddin, 2010. Analisis dan Perancangan Sistem Informasi Penjualan dan Persediaan Barang pada UD. Indah Jati Sport Godean, Yogyakarta : Sekolah Tinggi Manajemen Informatika dan Komputer AMIKOM.

http://repository.amikom.ac.id/files/Publikasi%206611_6612_6617.pdf Diakses pada tanggal 20 November 2011

[3] Anshari, Yudi 2011, Analisis dan Perancangan Sistem Informasi Penjualan dan Pembelian Barang pada Toko Mairos Sport Yogjakarta, Yogyakarta : Sekolah Tinggi Manajemen Informatika dan Komputer AMIKOM.

http://repository.amikom.ac.id/files/Publikasi_07.11.1743.pdf. Diakses pada tanggal 20 November 2011

[4] Kadir, Abdul. 2003. Pengenalan Sistem Informasi. Yogyakarta: Andi.

[5] Niswonger, C.Rollin; E.Fess, Philip; S.Warre, Carl. 1999. Prinsip-prinsip Akuntansi. Jilid-1. Edisi ke-19. Erlangga,Jakarta

[6] Hidayat, Rahmat. 2010. Cara Praktis Membangun Website Gratis. Jakarta: PT Elex Media Komputindo.