SISTEM PENJUALAN SECARA ONLINE DAN OFFLINE PADA

OPTIK RAMADHAN DENGAN MENGGUNAKAN

PEMROGRAMAN NETBEANS 6.0, PHP, DAN MYSQL

Nama : Mellisa Edrianingtyas

NPM : 11100734

Jurusan : Sistem Informasi

Toko Optik Ramadhan merupakan suatu badan usaha yang bergerak di bidang

penjualan alat-alat optik. Perusahaan optik ini dalam mengerjakan proses transaksi

penjualan masih menggunakan sistem manual. Sehingga dalam melihat data

persediaan barang maupun data-data barang yang telah terjual banyak memakan

waktu. Sebagai salah satu contoh untuk membuat laporan harus mengumpulkan

semua berkas yang ada yang biasanya berkas tersebut berupa kertas. Hal ini

mengakibatkan pemprosesan data terhambat. Oleh karena itu dibutuhkan suatu sistem

terkomputerisasi sehingga data yang didapat lebih efektif dan efisien.

Sistem penjualan yang digunakan pada optik ini pun masih mempergunakan

sistem offline. Sehingga dalam melakukan suatu transaksi pembelian pelanggan harus

mendatangi ke toko tersebut. Cara ini dipandang sebagai sesuatu yang tidak efisien,

karena amat menyulitkan bagi pembeli yang berada di lokasi yang jauh dari toko

tersebut. Dengan demikian untuk lebih meningkatkan pelayanan kepada pelanggan

maka dibutuhkan suatu sistem yang mendukung penjualan secara elektronik (e-

commerce).

Untuk mengatasi persoalan-persoalan yang telah diuraikan sebelumnya,

dibuatlah sebuah sistem baru. Adapun di dalam sistem yang baru ini terdapat dua

buah aplikasi program yaitu program yang pemrosesannya dilakukan secara offline

dan program yang pemrosesannya dilakukan secara online. Aplikasi program offline

digunakan apabila customer datang secara langsung ke optik tersebut. Sedangkan

aplikasi online digunakan apabila customer memesan barang secara online, yakni

dengan membuka situs optik Ramadhan ini.

Berdasarkan uraian di atas dibuatlah sebuah alur sistem yang di tampilkan

dalam bentuk diagram Use Case, diagram Activity, dan diagram Class dalam model

Unified Modelling Language (UML). Unified Modelling Language (UML) adalah

sebuah bahasa pemodelan standar yang digunakan untuk menspesifikasikan,

memvisualisasikan, membangun dan mendokumentasikan object dari sistem

software, untuk urusan pemodelan dan sistem non-software.

Diagram Use Case menggambarkan apa saja aktivitas yang dilakukan oleh

suatu sistem dari sudut pandang pengamatan luar. Yang menjadi persoalan itu apa

yang dilakukan bukan bagaimana melakukannya. Diagram use case dekat kaitannya

dengan kejadian-kejadian. Kejadian (skenario) merupakan contoh apa yang terjadi

ketika seseorang berinteraksi dengan sistem. Diagram use case dapat membantu bila

kita sedang menyusun requirement sebuah sistem, mengkomunikasikan rancangan

dengan klien dan merancang test case untuk semua feature yang ada pada sistem. Use

Case diagram menjelaskan kegiatan yang dilakukan user dan sistem untuk mencapai

suatu tujuan tertentu. Adapun usecase yang digunakan dalam aplikasi offline dapat di

lihat seperti gambar di bawah ini.

pembeli

kasir

pemimpin

persediaan

membeli barang

membuat bon penjualan

membayar barang

membuat laporan

memesan barang

mengirim barang

memeriksa barang

memasukkan data ke persediaan barang

melihat-lihat barang

<<extend>>

distributor

melihat data barang

<<include>>

Sistem Penjualan

mengirim faktur pembeliandan pembukuan

Gambar Diagram use case offline

pada gambar di atas dapat dilihat bahwa sistem yang terjadi dalam proses penjualan

terdapat empat orang aktor yakni customer(pembeli), kasir, bagian persediaan dan

penjualan, dan distributor. Adapun hubungan antara ke empat aktor tersebut adalah :

- Customer bertindak sebagai pemberi masukan yaitu berupa data customer. Dari

masukan tersebut terdapat dua keluaran yang dihasilkan oleh customer yakni bon

penjualan dan laporan keuangan. Laporan keuangan tersebut kemudian akan

diberikan kepada pemimpin.

- Pada diagram use case di atas dapat dilihat bahwa bagian persediaan dan

pembukuan pada optik Ramadhan memberikan masukkan kepada distributor

berupa pemesanan barang dan dari masukkan tersebut menghasilkan keluaran

berupa faktur pembelian. Selanjutnya isi dari faktur pembelian tersebut akan

dimasukkan ke dalam data persediaan barang.

Diagram usecase untuk sistem online dapat di lihat pada gambar di bawah ini.

pembeli

admin

Sistem Penjualan Online

browsing situs

mengisi data customer

bukti transfersurat dokter

mengirim fax

mengisi order pembelian

mengisi pooling

melihat katalog

melakukan login

masuk ke form admin

<<extend>><<include>>

pesan validasi

mengirim pesanan

bon pembelianbarang

<<include>><<include>>

melakukan order

melihat hasil pooling

melihat guestbook

Yangmenjadiadmin onlineyaitu :- Persediaan dan pembukuan- Pemimpin

Gambar Diagram use case online Pada diagram use case online ini terdapat dua aktor yakni pembeli dan bagian

persediaan dan pembukuan yang bertindak sebagai admin. Inputan yang dihasilkan

berupa data pembelian dan fax bukti transfer beserta surat keterangan dokter yang

dilakukan oleh pembeli. Sedangkan untuk keluarannya bagian persediaan dan

pembukuan yang bertindak sebagai admin mengirimkan validasi pemrosesan

pembelian jika fax telah diterima. Bagian ini juga mengirimkan outputan berupa bon

pembelian kepada customer yang dikirimkan bersamaan dengan barang.

Sedangkan Diagram Activity adalah teknik untuk mendeskripsikan logika

procedural, proses bisnis, dan aliran kerja. Diagram Activity mempunyai peran

seperti halnya flowchart. Perbedaannya, activity diagram bisa mendukung perilaku

paralel, sedangkan flowchart tidak bisa.

Setelah pembuatan diagram use case, tentunya dalam membuat suatu program

perlu dijelaskan alur program dari aplikasi sistem yang akan dirancang. UML telah

menyediakan diagram yang digunakan untuk pembuatan alur rancangan aplikasi yaitu

diagram activity. Diagram ini digunakan sebagai analisa terhadap use case dengan

menjelaskan tindakan(aksi) yang akan diambil beserta waktu saat tindakan itu

dilakukan.

- Diagram Activity Buka-Tutup Sistem

Diagram di bawah ini menunjukkan aktivitas user yang dilakukan saat

masuk(buka) dan keluar(tutup) dari aplikasi sistem.

SistemUser

User(Kasir, Pemimpin, Persediaan dan Pembukuan)

login sistem

menutup aplikasilogout

membuka form pada aplikasi sistem

memproses login user

menampilkan form aplikasi sistem

Gambar Diagram Activity Buka-Tutup Sistem

- Diagram Activity Proses Transaksi Penjualan Offline

Diagram di bawah ini menunjukkan alur terjadinya proses penjualan di mana

kasir bertugas memasukkan data pembeli dan data transaksi penjualan ke dalam

sistem. Selanjutnya sistem akan memproses transaksi dan akan menghasilkan output

berupa bon penjualan.

Pembeli Kasir Sistem

melakukan pembelian barang meminta data pembeli

memberikan data pembeli menginput data pembeli menyimpan data pembeli

menginput data transaksi penjualan

memproses data transaksi penjualanmembatalkan transaksi

menyimpan data transaksi penjualan

mengembalikan data transaksi ke kondisi awal

menanyakan jenis pembayaranmemberitahukan jenis pembayaran

menginput jenis pembayaran memproses pembayaran pada transaksi penjualan

mencetak bon penjualan

menampilkan hasil cetakan bon penjualanmenyerahkan bon penjualan

ya

tidak

menerima bon penjualan

Pembeli

memproses pencetakan bon penjualan

transaksi batal

Gambar Diagram Activity Proses Transaksi Penjualan Offline

- Diagram Activity Persediaan Barang

Dalam suatu proses penjualan memerlukan data persediaan barang. Adapun

untuk menambah atau mengisi persediaan barang, memerlukan suatu proses

pemesanan barang. Diagram di bawah ini akan menjelaskan aktivitas persediaan

barang tersebut yang dilakukan oleh bagian persediaan dan pembukuan.

Gambar Diagram Activity Persediaan Barang

Persediaan dan pembukuan Pemimpin Sistem

Persediaandan pembukuan

membuat form pemesanan barang

melihat data persediaan barang menampilkan form persediaan barang

meminta persetujuan memesan barang

memesan barang

menerima barang

memasukan data barang menyimpan data barang

menyetujui pemesanan

ya

tidak

batal memesan

- Diagram Activity Pembuatan Laporan

Diagram berikut akan memperlihatkan aktivitas yang dilakukan oleh bagian

persediaan dan pembukuan dalam membuat laporan.

persediaan dan pembukuan Pemimpin sistem

Persediaan dan Pembukuan

melihat laporan menampilkan laporan

mencetak laporan

memasukkan kondisi pencetakan memproses laporan

menampilkan cetakan laporanmenyerahkan kepada pemimpin

menerima laporan

Laporan dapatberupa laporanpenjualan danlaporan laba-rugi

Gambar Diagram Activity Pembuatan Laporan

- Diagram Activity Transaksi Penjualan Online

Diagram berikut menjelaskan alur penjualan secara online. Aktivitas ini

dimulai ketika pembeli masuk ke web site optik ini dan melihat Katalog online yang

terdapat pada halaman web. Aktivitas yang dilakukan oleh pembeli yang melakukan

pembelian secara online tidak berbeda jauh dengan yang dilakukan oleh pembelian

pada sistem offline. Perbedaannya hanya terletak pada cara pembayarannya saja yaitu

dilakukan dengan cara mentransfer. Setelah mentransfer, bukti pembayarannya pun di

fax. Baru setelah itu admin(pemimpin, persediaan dan pembukuan) melakukan

validasi pesanan dan mengirimkan barang ke alamat pemesan.

pembeli admin sistem

melihat katalog online

membeli barang

masuk ke order

memasukkan data pembelian memproses data

menampilkan pesan dan nomor transaksi

mentransfer pembayaran

mengirimkan bukti pembayaran melalui fax

menerima pesan validasi

menerima bukti pembayaran

memvalidasi transaksi memproses pesan validasimengirim barang

menerima pesan

mengirim pesan validasi via email

menerima barang

membatalkan pembelian

ya

tidak

Gambar Diagram Activity Transaksi Penjualan Online

Diagram kelas menggambarkan struktur dan deskripsi class, package dan

objek beserta hubungan satu sama lain seperti containment, pewarisan, asosiasi dan

lain-lain. Class memiliki tiga area pokok, yaitu : Nama (dan stereotype), Atribut,

Metoda.

Kelas atau class adalah sebuah spesifikasi yang jika diinstansiasi akan

menghasilkan sebuah objek dan merupakan inti dari pengembangan dan desain

berorientasi objek. Class menggambarkan keadaan (atribut/properti) suatu sistem,

sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut

(metode/fungsi).

cust

+kd_cust+nama+alamat+email+kota+kd_post+no_tlp+status

transaksi_total

+kode_trans+kd_cust+id_peg+tgl_trans+trans_total+trans_um+trans_sisa+no_struck_card+status+tgl_lunas+jm_kredit

pegawai

+id_peg+nama_peg+ktp_peg+tempatlahir_peg+tanggallahir_peg+pass+status+alamat_peg+no_tlp

transaksi

+kode_trans+kd_cust+ket_beli+tgl_pesan+tgl_sls+kode_brg+jum_item+untung_sementara

untung

+kode_trans+tgl_psn+untung+status

barang

+kode_brg+nama_brg+ket+jum_item+harga_jual+diskon+mulai_diskon+sls_diskon+image

beli

+no_trans_beli+kode_brg+kode_dis+harga_beli+jum_item+tgl_beli+ket_beli

beli_total

+no_trans_beli+kode_dis+tgl_beli+total_beli

distributor

+kode_dis+nana_dis+alamat_dis+no_tlp_dis

Diagram class pada aplikasi desktop berikut ini menunjukkan hubungan

antara class cust, transaksi, transaksi_total, pegawai, barang, beli, beli_total, dan

distributor.

Gambar Diagram Class Dari model yang telah dibuat tersebut maka dikembangkan menjadi suatu

sistem dengan menggunakan pemrograman java untuk sistem offline dan

menggunakan pemrograman php dan html untuk sistem online sedangkan database

yang digunakan adalah Mysql.

Java adalah bahasa pemrograman serba guna. Java dapat digunakan untuk

membuat suatu program. Beberapa keuntungan yang di dapat dalam menggunakan

pemerograman java yaitu: multiplatform, OOP (Object Oriented Programming -

Pemrogram Berorientasi Objek), perpustakaan kelas yang lengkap, dan bergaya C++.

PHP adalah kependekan dari PHP Hypertext Preprocessor, adalah sebuah

bahasa script server-side yang bisa digunakan dengan bahasa HTML atau

dokumennya secara bersamaan untuk membangun sebuah aplikasi web yang sangat

banyak kegunaannya. Bebarapa faktor yang membuat PHP banyak digunakan adalah

sebagai berikut : Gratis, Life Cycle, Class Platform dan dukungan database yang

banyak tersedia di pasaran baik database yang komersil dan yang non komersil

seperti Oracle, Mysql, Mssql, Postgresql, dsb.

Untuk mengetahui garis besar isi dari aplikasi penjualan online ini dengan

menggunakan struktur navigasi. Struktur Navigasi ini digunakan untuk

menggambarkan secara garis besar isi dari seluruh Aplikasi web dan menggambarkan

bagaimana hubungan antara isi-isi tersebut. Struktur navigasi aplikasi online ini

adalah struktur navigasi composite. Melalui struktur navigasi ini, terlihat bagaimana

isi dan susunan dari sebuah Aplikasi web secara menyeluruh.

Tipe user untuk pengguna aplikasi online ini di kategorikan sebagai Admin

dan sebagai User. Adapun struktur navigasi untuk admin side adalah:

Gambar Struktur Navigasi Admin Side

Pada struktur navigasi ini, seorang admin jika ingin memasuki form admin

harus melakukan login terlebih dahulu. Sesudah Login, admin dapat melihat

guestbook dan mengedit dan mengupdate data pooling. Sedangkan data transaksi

online, dapat dilihat di dalam aplikasi desktop. Adapun yang bertugas menjadi admin

pada aplikasi offline ini adalah pemimpin dan bagian persediaan dan pembukuan.

Sedangkan sistem navigasi untuk user side adalah:

Gambar Struktur Navigasi User Side Pada navigasi ini, seorang user dapat membrowse link-link yang terdapat di

index yakni link home, katalog, order, buku tamu, dan tentang kami. Seorang user

juga dapat mengisi pooling dan melihat hasil dari pooling tersebut.

Dari data-data dan model yang telah dibuat, maka dibuatlah sepuluh buah

tabel database dan dibuatlah program aplikasi tersebut. Adapun tampilan dari

program tersebut aedalah:

Gambar Form Persediaan Barang

Gambar Program Utama

Gambar Data Barang

Gambar Login

Gambar Form Data Barang

Gambar Form Data Customer

Gambar Form Data Distributor

Gambar Form Identifikasi Customer

Gambar Form Transaksi Penjualan

Gambar Form Laporan Laba – Rugi

Gambar Form Laporan Penjualan

G

Gambar Form Pembelian Barang

USER SIDE

Gambar Home

Gambar lihat katalog

Gambar Katalog Frame

Gambar Order Barang

Gambar Katalog Lensa

Tampilan Admin-Side

Tampilan Menu Login

Tampilan Home Admine Side

Tampilan GuestBook

Tampilan Hasil Polling