JOURNAL VCD

TIM, Volume 1 Agustus 2010

IMPLEMENTASI TEKNOLOGI GOOGLE WEB TOOLKIT UNTUK PEMBUATAN APLIKASI SISTEM INFORMASI SIKLUS PENDAPATAN (STUDI KASUS PT “PUTRA NUSANTARA MANDIRI”) Franky Tanujoyo Ciputra University Undergraduate Student UC Town, CitraLand Surabaya 60219 +62- 31-7451699

[email protected]

Trianggoro Wiradinata, S.T, M.Eng.Sc

Egawati Panjei, S.Kom

Ciputra University

Information Technology Lecturer UC Town, CitraLand Surabaya 60219 +62- 31-7451699

Information Technology Lecturer UC Town, CitraLand Surabaya 60219 +62- 31-7451699

Ciputra University

[email protected]

[email protected]

ABSTRAK PT “Putra Nusantara Mandiri” merupakan perusahaan yang berlokasi di Sidoarjo dan bergerak sebagai distributor oli. Sistem informasi siklus pendapatan (SISP) PT “Putra Nusantara Mandiri” masih manual walaupun menggunakan komputer sebagai alat bantu dalam pengetikan dan pencetakan dokumen. Masalah yang timbul dari penggunaan sistem informasi secara manual adalah lamanya pemeriksaan terhadap batas kredit pelanggan, lamanya pemeriksaan stok barang di gudang, lamanya pemeriksaan terhadap dokumen penagihan pelanggan dan direktur perusahaan kesulitan dalam menyetujui pesanan pelanggan ketika berada di luar perusahaan. Solusi dari masalah tersebut adalah membuat aplikasi sistem informasi siklus pendapatan PT “Putra Nusantara Mandiri” berbasis web dengan menggunakan teknologi Google Web Toolkit. Metode perancangan dan pembuatan aplikasi menggunakan pendekatan berbasis Software Development Life Cycle (SDLC) dengan metode waterfall. Metode ini meliputi requirements gathering, analysis & design, implementation, dan testing. Pembuatan aplikasi berbasis web yang interaktif (Ajax) diharapkan dapat mengatasi masalah yang dialami untuk mengelola SISP perusahaan. Selama ini pembuatan aplikasi Ajax membutuhkan pengertian bahasa pemrograman Javascript, XML, HTML/XHTML, dan CSS. Oleh karena itu, muncul teknologi Google Web Toolkit (GWT) yang memudahkan pengguna bahasa pemograman Java membuat aplikasi Ajax. GWT secara otomatis mengubah Java menjadi JavaScript pada saat kompilasi sehingga dapat berjalan di browser. Kesimpulan setelah uji coba dilakukan adalah fitur aplikasi yang terdiri dari login, pelanggan, produk, pegawai, user, ekspedisi, pesanan penjualan, pengiriman dan penagihan barang, retur barang, penerimaan barang, laporan penjualan tiap produk, laporan penjualan tiap pelanggan, laporan piutang pelanggan, ubah password dan logout dapat berjalan dengan baik. Selain itu aplikasi memungkinkan direktur perusahaan menyetujui pesanan pelanggan ketika berada di luar perusahaan. Kata kunci : Aplikasi Web, Google Web Toolkit, Siklus Pendapatan, Sistem Informasi, Open Source berkembang ke arah aplikasi Ajax dibandingkan dengan aplikasi 1. PENDAHULUAN web konvensional. Ajax adalah teknologi browser (client-side) PT “Putra Nusantara Mandiri” merupakan perusahaan yang tidak bergantung pada web server tertentu. Ajax yang masih menggunakan sistem informasi secara manual. merupakan teknik baru penggunaan standar yang ada dan bukan Perusahaan mengalami kesulitan dalam mengelola sistem merupakan bahasa pemrograman. Aplikasi Ajax dapat informasi pada siklus pendapatan yang meliputi membuat memberikan interaksi penuh kepada pengguna dalam pesanan penjualan, pengiriman barang dan penagihan ke mengerjakan tugas sehari-hari, seperti mengubah atau pelanggan. Masalah yang sering timbul adalah lamanya menambah data tanpa memerlukan perpindahan halaman untuk pemeriksaan kredit pelanggan, lamanya pemeriksaan stok mendapatkan hasilnya. barang di gudang, lamanya pemeriksaan terhadap dokumen Pembuatan aplikasi Ajax memerlukan pengertian penagihan pelanggan dan direktur perusahaan kesulitan dalam bahasa pemrograman Javascript, XML, HTML/XHTML dan menyetujui pesanan pelanggan ketika berada di luar perusahaan. CSS. Oleh karena itu, muncul teknologi Google Web Toolkit Pembangunan aplikasi berbasis web dapat menjadi (GWT) yang memudahkan dalam pembuatan aplikasi Ajax. solusi bagi perusahaan dalam mengolah sistem informasi siklus GWT merupakan sebuah framework bersifat open source yang pendapatan (SISP). Aplikasi SISP dapat memudahkan direktur memudahkan dalam pembuatan aplikasi berbasis web untuk perusahaan dalam menyetujui pesanan pelanggan atau pengguna bahasa pemrograman Java. GWT secara otomatis mengubah data baik dari dalam maupun dari luar perusahaan mengubah kode Java menjadi JavaScript sehingga dapat berjalan dan pelanggan dapat melakukan pemesanan secara online tanpa dan kompatibel dengan berbagai macam browser. melalui salesman yang menjadi nilai tambah perusahaan. Pembuatan aplikasi mencakup siklus pendapatan yang Pembuatan aplikasi berbasis web semakin meliputi pesanan penjualan, pengiriman barang, penagihan berkembang seiring dengan perkembangan teknologi yang piutang pelanggan dan penerimaan kas. Fitur yang akan begitu cepat. Pembuatan aplikasi berbasis web sudah disediakan dalam aplikasi terdiri dari login, pesanan penjualan,

61 | T I M


pengiriman dan penagihan, retur barang, penerimaan barang, pelanggan, produk, pegawai, user, ekspedisi, ubah password, logout, laporan penjualan tiap produk, laporan penjualan tiap pelanggan dan laporan piutang pelanggan. Sistematika penulisan jurnal ini adalah pendahuluan, landasan teori, sistem desain, implementasi dan testing, dan kesimpulan dan saran. Landasan teori mencakup SISP, Software Development Life Cycle (SDLC), Rich Internet Applications (RIAs), Google Web Toolkit (GWT), arsitektur Model, View, dan Controller (MVC), dan Java Database Connectivity (JDBC) API. Sistem desain mencakup SISP PT “Putra Nusantara Mandiri”, Use Case, User Interface Mockup, User Interface Navigation, Data Flow Diagram (DFD), Arsitektur pada aplikasi SISP, Entity Relationship Diagram (ERD), Package Diagram, Class Diagram, dan Sequence Diagram. Implementasi dan testing mencakup MySQL, apache tomcat, netbeans, implementasi GWT pada aplikasi SISP, skenario pengujian, pengujian integrasi dan aspek entrepreneurial.

Requirements Gathering merupakan sebuah proses untuk memahami keinginan dan harapan klien dalam pembuatan sebuah aplikasi. Design adalah proses untuk menentukan arsitektur, komponen, modul, interface, dan data untuk sebuah aplikasi sehingga dapat memenuhi persyaratan yang diinginkan. Sebelum desain, dilakukan analisa terlebih dahulu Implementation biasanya termasuk dalam tahap development. Development merupakan proses pembangunan aplikasi yang dilakukan oleh programmer. Testing merupakan uji coba yang melakukan pemeriksaan secara keseluruhan terhadap aplikasi yang sudah dibuat untuk mengevaluasi kesesuaian aplikasi dengan keinginan klien. Deployment dan Maintenance merupakan kegiatan yang dilakukan untuk mengoperasikan aplikasi, dan mengimplementasikan aplikasi kepada client environment. Fase ini tidak dibahas dalam jurnal ini.

2. LANDASAN TEORI 2.1 SISP Sistem Informasi Akuntansi (SIA) adalah sistem yang mengumpulkan, menyimpan dan memproses data untuk menghasilkan informasi yang berguna bagi pembuat keputusan[5]. Siklus pendapatan adalah suatu rangkaian aktifitas bisnis dan kegiatan pengolahan informasi terkait dengan menyediakan barang atau jasa ke pelanggan dan mengumpulkan pembayaran dari penjualan tersebut. Tujuan utama dari siklus pendapatan adalah menyediakan produk yang tepat di tempat dan waktu yang tepat dengan harga yang tepat. Ada empat aktifitas yang dilakukan di siklus pendapatan, yaitu membuat pesanan penjualan, pengiriman barang, penagihan piutang dan penerimaan kas[5]. Siklus pendapatan dimulai dari membuat pesanan penjualan. Proses yang dibutuhkan untuk membuat pesanan penjualan adalah menerima pesanan pelanggan, memeriksa kredit limit pelanggan, memeriksa ketersediaan barang di gudang dan menjawab pertanyaan pelanggan. Proses kedua yang dilakukan dalam siklus pendapatan adalah memenuhi pesanan pelanggan dan melakukan pengiriman barang. Langkah-langkah yang dilakukan dalam proses ini adalah mengambil dan mengemasi pesanan serta mengirim pesanan tersebut. Proses ketiga yang dilakukan dalam siklus pendapatan ini adalah penagihan piutang. Langkah-langkah yang dilakukan dalam proses ini adalah membuat faktur penagihan dan memperbaharui piutang pelanggan. Proses terakhir dalam siklus pendapatan ini adalah penerimaan kas. Terdapat dua bagian yang terdapat pada proses ini yaitu bagian kasir yang bertugas menangani uang pembayaran serta bagian piutang yang bertugas memperbaharui piutang pelanggan setelah terjadi pembayaran.

Gambar 2.1: Tahapan dari SDLC

2.3 Rich Internet Applications (RIAs) Perkembangan aplikasi perangkat lunak semakin berkembang dengan menyediakan aplikasi yang interaktif kepada penggunanya. Perkembangan aplikasi perangkat lunak mengalami berbagai macam perubahan yaitu dari aplikasi yang lama ke aplikasi modern berbasis web yang interaktif. Perkembangan tersebut terbagi atas empat macam bagian yaitu mainframe applications, client/server applications, web applications, dan rich web applications seperti pada Gambar 2.2[1].

2.2 Software Dvelopment Life Cycle (SDLC) SDLC adalah proses yang digunakan dalam pembuatan suatu aplikasi. Pembuatan aplikasi pada tugas akhir ini menggunakan pendekatan berbasis SDLC dengan metode waterfall[7]. Hasil dari setiap tahapan menjadi input tahapan berikutnya. Tahapannya terdiri dari requirements, design, implementation, testing dan deployment & maintenance seperti pada Gambar 2.1.

Gambar 2.2: Perkembangan aplikasi perangkat lunak[1]

62 | T I M


Meskipun aplikasi berbasis web sudah merupakan standar dalam pembuatan sebuah aplikasi, aplikasi tersebut masih tidak mengijinkan pengguna untuk berinteraksi penuh dalam mengerjakan tugas sehari-hari. Ketika mengubah atau mengirimkan data, masih membutuhkan waktu tunggu untuk mendapatkan halaman hasilnya. Oleh karena itu, muncul Ajax untuk menyelesaikan masalah tersebut dan memberikan solusi bagi pembuat dapat membuat aplikasi yang tampilannya ramah dengan pengguna dan memberikan manfaat dari aplikasi berbasis web tersebut. Gambar 2.3 menunjukkan contoh interaksi sebuah aplikasi Ajax.

Arsitektur MVC merupakan sebuah pola desain yang digunakan dengan membagi komponen menjadi Model, View, dan Controller seperti pada Gambar 2.4[3]. Model menggambarkan data yang digunakan oleh aplikasi dan merupakan tempat untuk menampung dan memproses data. View merupakan tampilan yang digunakan oleh aplikasi untuk menampilkan data yang diterima dari Model. Controller merupakan bagian yang mengatur alur dan perpindahan tampilan dari aplikasi, serta memiliki tugas untuk menampung kegiatan yang dapat dilakukan oleh pengguna dari View dan melakukan atau mengirim perubahan data ke Model.

Gambar 2.3: Contoh interaksi sebuah aplikasi Ajax[1]

2.4 Google Web Toolkit (GWT) Google Web Toolkit (GWT) merupakan salah satu framework yang dapat digunakan untuk membuat Rich Internet Applications (RIAs)[1]. Ada banyak framework yang dapat digunakan untuk membuat aplikasi Ajax, tetapi pada akhirnya masih membutuhkan pengertian mengenai Javascript. GWT datang untuk menyelesaikan masalah tersebut sehingga masalah dengan browser dan Javascript dapat teratasi. Pembuatan aplikasi web menggunakan GWT dapat memudahkan para pembuat aplikasi yang menggunakan bahasa pemrograman Java, karena GWT secara otomatis mengubah kode Java menjadi Javascript sehingga dapat jalan di browser dan kompatibel terhadap berbagai macam browser. Para pembuat aplikasi dapat fokus pada cara menulis kode Java yang melakukan sesuatu dan dapat mempercepat waktu pembuatan. Kelebihan GWT dapat dibagi menjadi tiga bagian utama, yaitu Java to JavaScript compiler, JRE Emulation library, dan UI Building library. Java to JavaScript compiler merupakan bagian utama dan paling mengesankan dari GWT karena semua kode yang ditulis akan diubah secepatnya menjadi JavaScript dan kompatibel dengan berbagai macam browser sehingga memudahkan dalam pembuatan aplikasi RIAs. JRE emulation library merupakan impelementasi beberapa class di Java yang dapat digunakan dan diubah menjadi kode yang dapat berkerja di JavaScript. UI building library merupakan bagian dari GWT yang terdiri dari beberapa sub bagian untuk membuat GUI yang menampilkan perubahan informasi yang dilakukan oleh pengguna.

2.5 Arsitektur Controller (MVC)

Model, View, dan

Gambar 2.4: Arsitektur MVC[3]

2.6 Java Database Connectivity (JDBC) API JDBC Application Programming Interface (JDBC API) merupakan API standar yang digunakan oleh Java untuk mengakses database[6]. Langkah yang dibutuhkan yaitu membuat koneksi dengan database, mengirim query dan mengubah statement ke database, dan mendapatkan serta memproses hasil yang diterima dari database

3. SISTEM DESAIN Sistem desain dari aplikasi SISP meliputi SISP PT “Putra Nusantara Mandiri”, Use Case, User Interface Mockup, User Interface Navigation, Data Flow Diagram (DFD), Arsitektur pada aplikasi SISP, Entity Relationship Diagram (ERD), Package Diagram, Class Diagram, dan Sequence Diagram.

3.1 SISP PT “Putra Nusantara Mandiri” Pengolahan SISP PT “Putra Nusantara Mandiri” menggunakan aplikasi berbasis web mengalami beberapa perubahan dibandingkan dengan manual. Proses pengolahan dimulai dengan pesanan pelanggan yang dicatat oleh salesman dalam dokumen pesanan penjualan. Jika pelanggan baru, maka data mengenai pelanggan tersebut dimasukkan terlebih dahulu. Staf administrasi penjualan memasukkan data pesanan pelanggan agar bisa diproses dan barang dapat dikirim ke pelanggan. Pesanan pelanggan tidak boleh melebihi batas kreditnya dan direktur perusahaan dapat menyetujui atau tidak pesanan tersebut.

63 | T I M


Pesanan pelanggan dapat disetujui jika barang telah tersedia di gudang, Setelah disetujui, maka bisa membuat data pengiriman dan penagihan. Data pengiriman dan penagihan dibuat menjadi satu untuk efisiensi proses bisnis perusahaan. Staf administrasi penjualan dapat mencetak dokumen pengiriman dan penagihan untuk mengirimkan barang dan bukti penagihan ke pelanggan. Tanggal jatuh tempo pembayaran pelanggan satu bulan sejak tanggal pengiriman. Retur barang dapat terjadi jika barang benar-benar rusak. Salesman membuat data retur melalui aplikasi yang disesuaikan dengan nomer faktur penagihan dan mencetak dokumen untuk menukarkan barang yang rusak dengan barang yang sama dari gudang. Bagian penagihan memberikan dokumen pengiriman dan penagihan ke salesman sebagai bukti penagihan piutang pelanggan yang telah jatuh tempo. Jika pelanggan telah melakukan pembayaran, maka bagian penagihan mengubah tanggal pembayaran dan status faktur dari data pengiriman dan penagihan. Aplikasi memiliki beberapa fitur seperti login, pesanan penjualan, pengiriman dan penagihan, retur barang, penerimaan barang, pelanggan, produk, pegawai, user, ekspedisi, laporan, ubah password, dan logout. Pengguna yang menggunakan aplikasi ini terdiri atas berbagai macam peran yaitu manajer penjualan (direktur perusahaan), staf administrasi penjualan, kepala gudang, bagian penagihan, manajer keuangan, salesman dan pelanggan. Selain itu, pengguna dari aplikasi ditambahkan dua peran yaitu administrator dan super administrator. Kedua peran tersebut berguna untuk mengatur dan mengawasi kelangsungan dari aplikasi.

3.2 Use Case Use adalah deskripsi yang bersifat tulisan dengan hierarki dan garis hubung. Setiap fitur dari aplikasi memiliki use case masing-masing. Gambar 3.1 menunjukkan use case dari fitur pengiriman dan penagihan serta peran yang menggunakan fitur tersebut.

Super administrator, direktur perusahaan, staf administrasi penjualan, bagian penagihan, dan manajer keuangan. 3.2.3 Prasyarat: Pengguna berhasil login dan menekan menu pengiriman dan penagihan. 3.2.4 Pemicu: Pengguna menekan menu pengiriman dan penagihan. 3.2.5 Skenario: 3.2.5.1 Pengguna menekan menu pengiriman dan penagihan 3.2.5.2 Pengguna memasukkan atau mengubah atau melihat data yang dibutuhkan dan disesuaikan dengan pesanan penjualan yang telah dipesan oleh pelanggan. 3.2.5.3 Pengguna menekan add atau edit button untuk membuat atau mengubah pengiriman dan penagihan. 3.2.5.4 Pengguna menekan view tab dan print button untuk mencetak dokumen pengiriman dan penagihan.

3.3 User Interface Mockup Gambar 3.2 menunjukkan user interface pengiriman dan penagihan dari aplikasi yang akan dibuat. Bentuk tampilan dari aplikasi akan disesuaikan dengan tampilan dari user interface pengiriman dan penagihan tersebut. Pengguna dapat mencari data pengiriman dan penagihan sesuai dengan field yang telah disediakan dalam bagian Search. Pengguna dapat melihat data pengiriman dan penagihan pada bagian List. Pengguna dapat menambah atau mengubah atau melihat atau mencetak data pengiriman dan penagihan lebih detil pada bagian Details. Pengguna dapat menambah data dengan menekan tab bernama add. Pengguna dapat mengubah data dengan menekan tab bernama edit. Pengguna dapat melihat data dengan menekan tab bernama view. Pengguna dapat mencetak dokumen pengiriman dan penagihan dengan menekan tab bernama view dan menekan tombol print. Setelah itu, pengguna akan ditampilkan halaman cetak dari data pengiriman dan penagihan yang diinginkan. Data tersebut mencetak dokumen faktur yang berfungsi sebagai bukti pengiriman dan bukti penagihan ke pelanggan.

Gambar 3.2: User Interface Pengiriman dan Penagihan

3.4 User Interface Navigation Gambar 3.1: Use Case Pengiriman dan Penagihan 3.2.1 Use Case: Pengiriman dan Penagihan 3.2.2 Aktor utama:

Gambar 3.3 menunjukkan User Interface Navigation dari aplikasi SISP PT “Putra Nusantara Mandiri”. Pengguna yang berhasil login, ditampilkan halaman menu dari aplikasi yang terdiri dari pesanan penjualan, pengiriman dan penagihan, retur barang, pelanggan, produk, pegawai, user, ekspedisi, laporan, ubah password dan logout.

64 | T I M


PengirimanDanPenagihanServiceImpl. View terdiri dari tampilan dari setiap fitur yang terdapat dalam class MainForm. Controller dari aplikasi terdapat pada class MainEntryPoint.

3.7 Entity Relationship Diagram (ERD) ERD merupakan diagram yang menunjukkan hubungan antar entitas atau tabel dalam suatu rancangan database. Gambar 3.5 merupakan ERD yang digunakan dalam aplikasi SISP PT. Putra Nusantara Mandiri.

Gambar 3.3: User Interface Navigation

3.5 Data Flow Diagram (DFD) DFD digunakan untuk menunjukkan hubungan antara pihak dalam, pihak luar, dan hubungan antar data atau proses dalam aplikasi SISP. Gambar 3.4 menunjukkan DFD Logical Diagram yang memperlihatkan proses yang terjadi dalam siklus pendapatan yaitu membuat pesanan pelanggan, membuat pengiriman dan penagihan, menerima retur barang dan melakukan penagihan piutang.

Gambar 3.5: ERD aplikasi SISP PT. Putra Nusantara Mandiri

3.8 Package Diagram Pembagian package dalam aplikasi terdiri dari dua macam yaitu client dan server, seperti pada Gambar 3.6. Class yang berada pada client merupakan class yang akan dikompilasi menjadi JavaScript sehingga dapat dijalankan pada browser oleh pengguna. Sedangkan class yang berada pada server merupakan class yang menghubungkan pengguna dengan server dari aplikasi. Gambar 3.4: DFD Logical Diagram

3.6 Arsitektur MVC pada aplikasi SISP Pembuatan aplikasi ini menggunakan arsitektur MVC yaitu Model, View, dan Controller. Model terdiri dari GWT Service yang digunakan dalam aplikasi ini. GWT Service membuat tiga macam class yaitu Service, ServiceAsync dan ServiceImpl. Semua fitur yang memerlukan hubungan ke database, menggunakan GWT Service. Contoh dalam fitur pengiriman dan penagihan. GWT Service membuat tiga class dari fitur tersebut, yaitu PengirimanDanPenagihanService, PengirimanDanPenagihanServiceAsync, dan

Gambar 3.6: Pembagian class

65 | T I M


3.9 Class Diagram Setiap fitur dari aplikasi memiliki class diagram masing-masing. Gambar 3.7 menunjukkan contoh class diagram dari fitur pengiriman dan penagihan. Class diagram tersebut digunakan selama dalam proses pembuatan aplikasi untuk fitur pengiriman dan penagihan.

4.1 MySQL MySQL merupakan salah satu Database Management System (DBMS) yang bersifat open source dan stabil[4]. Database MySQL yang digunakan selama pembuatan aplikasi SISP adalah versi 5.0.27. Setelah instalasi yang dilakukan selanjutnya adalah membuat skema database bernama gwt. Selanjutnya, membuat Data Definition Language (DDL) dan Data Manipulation Language (DML) berdasarkan pada ERD pada Gambar 3.7. DDL dan DML dijalankan dengan menggunakan script query.

4.2 Apache Tomcat Apache Tomcat digunakan sebagai web server dan versi yang digunakan adalah versi 6.0.18. Apache Tomcat berguna agar aplikasi dapat dijalankan di web browser. Perubahan dilakukan di server.xml yang berada dalam subfoler dari apache bernama conf dan perubahannya adalah port yang digunakan dari 8080 menjadi 8081. Sehingga untuk mengakses apache tomcat dengan mengetikkan http://localhost:8081 di alamat url web browser.

4.3 Netbeans Netbeans merupakan Integrated Development Environment (IDE) yang digunakan selama dalam proses pembuatan aplikasi dan versi yang digunakan adalah versi 6.8. Setelah netbeans selesai diinstal, maka ditambahkan plugin gwt4nb untuk dapat menjalankan aplikasi yang menggunakan framework GWT.

4.4 Implementasi GWT pada aplikasi SISP Gambar 3.7: Class diagram Pengiriman dan Penagihan

3.10 Sequence Diagram Setiap fitur dari aplikasi memiliki sequence diagram masing-masing. Gambar 3.8 menunjukkan contoh sequence diagram dari fitur pengiriman dan penagihan. Alur tersebut mulai dari pengguna menekan tombol add/edit/view maka data dikirimkan ke class PengirimanDanPenagihanServiceImpl melalui class DataPengirimanDanPenagihan. Setelah data berhasil dimasukkan/diubah/diambil dari database, maka hasilnya akan ditampilkan ke dalam tabel pengiriman dan penagihan melalui class DataPengirimanDanPenagihan.

GWT yang digunakan adalah versi 2.0. GWT memiliki berbagai macam tambahan widget library yang dapat digunakan dan widget yang dipakai selama membuat aplikasi adalah smartgwt versi 2.2. Smartgwt mendukung berbagai macam interaksi pengguna yang dibutuhkan dalam pembuatan aplikasi. Langkah yang dilakukan adalah membuat sebuah project baru di netbeans dengan memilih kategori bertipe web application. Konfigurasi dengan web server untuk menjalankan aplikasi di web browser yaitu apache tomcat, dapat langsung dilakukan ketika membuat project tersebut. Pembuatan project dari aplikasi tersebut dapat dilakukan dengan menggunakan plugin gwt, sehingga susunan folder dari aplikasi dapat langsung dibuat seperti pada Gambar 4.1

Gambar 3.8: Sequence diagram Pengiriman dan Penagihan

4. IMPLEMENTASI DAN TESTING Pembuatan aplikasi menggunakan MySQL sebagai database server, Apache Tomcat sebagai web server, Netbeans sebagai IDE dan GWT sebagai framework. Tahap ujicoba dilakukan dengan skenario pengujian dan pengujian integrasi.

Gambar 4.1: Sususan Project aplikasi di Netbeans Proses menghubungkan framework gwt dan smartgwt adalah dengan menambahkan library smartgwt ke dalam library project tempat membuat aplikasi. Setelah penambahan library, maka dibutuhkan penambahan xml smartgwt yaitu
66 | T I M


name="com.smartgwt.SmartGwt"/> di Main.gwt.xml. Tujuan penambahan tersebut agar semua class smartgwt yang dipakai selama pembuatan aplikasi dapat berfungsi dan digunakan ketika aplikasi dijalankan di web browser. Class utama yang dipanggil ketika aplikasi dimuat atau dijalankan adalah MainEntryPoint.java. Method yang dipanggil ketika menjalankan aplikasi adalah onModuleLoad(), sehingga semua kode yang ingin dijalankan berada dalam method tersebut. Class MainEntryPoint dan method onModuleLoad() dapat terlihat pada Gambar 4.2.

Gambar 4.5 menunjukkan GwtRpcDataSource.

kode

dari

abstract

class

Gambar 4.2: Class MainEntryPoint.java Pembuatan tampilan yang disediakan adalah tampilan untuk mendatar dan tegak lurus. Class yang dipakai adalah VLayout untuk tampilan tegak lurus dan HLayout untuk tampilan mendatar. Agar tampilan yang telah dibuat dapat dilihat dan tampil, maka dapat memanggil method draw(). Sedangkan untuk membuat suatu formulir yang terdiri dari berbagai macam data yang dapat dimasukkan dan data tersebut dapat diubah atau ditampilkan, maka formulir tersebut dapat menggunakan class bernama DynamicForm. Gambar 4.3 menunjukkan sebuah contoh kode untuk membuat formulir yang berisi tempat untuk memasukkan data username dan password.

Gambar 4.5: Isi dari abstract class GwtRpcDataSource Setelah menambahkan abstract class GwtRpcDataSource, maka dibutuhkan sebuah class sebagai datasource dari sebuah menu aplikasi. Class sebagai datasource dari fitur pengiriman dan penagihan bernama DataPengirimanDanPenagihan yang merupakan turunan dari class GwtRpcDataSource. Class DataPengirimanDanPenagihan terdapat sebuah method bernama executeFetch() yang bertujuan untuk mengambil dan menampilkan data dari database. Gambar 4.6 menunjukkan kode dalam method executeFetch().

Gambar 4.3: Contoh penggunaan class DynamicForm Tampilan yang digunakan aplikasi dapat berubah-ubah dari satu tampilan ke tampilan yang lain, sebagai contoh dari halaman login ke halaman menu aplikasi. Proses perubahan tampilan yang digunakan adalah menyembunyikan tampilan awal dengan menggunakan method hide() dan menampilkan tampilan yang diinginkan dengan menggunakan method show() seperti pada Gambar 4.4.

Gambar 4.4: Contoh penggunaan method hide() dan show() Hal yang dilakukan agar class DynamicForm dapat melakukan fungsi menambah atau mengubah atau menampilkan atau mencari data, maka dibutuhkan penambahan abstract class bernama GwtRpcDataSource ke folder pnm.client. Abstract Class tersebut berfungsi agar aplikasi dapat berkomunikasi dengan server melalui GWT Remote Procedure Call (RPC).

Gambar 4.6: Method executeFetch() dari class DataPengirimanDanPenagihan Data dari database dapat diterima atau ditambah atau diubah jika sudah membuat koneksi. Gambar 4.7 menunjukkan class untuk membuat koneksi ke database MySQL.

67 | T I M


Class PengirimanDanPenagihanServiceImpl membuat sebuah object dari class PengirimanDanPenagihanDao. Object tersebut berguna untuk mengambil atau mengubah atau menambah data ke database.

4.5 Skenario Pengujian Skenario pengujian digunakan untuk menguji aplikasi supaya dapat berjalan dengan baik dan mengurangi kesalahan yang dilakukan. Pengujian ini dilakukan sebelum aplikasi digunakan oleh klien. Pengujian dilakukan sesuai dengan modul yang disediakan oleh aplikasi yaitu login, pelanggan, produk, pegawai, user, ekspedisi, pesanan penjualan, pengiriman dan penagihan, retur barang dan laporan. Contoh skenario pengujian dilakukan pada modul pengiriman dan penagihan. Ketika pengguna menekan menu pengiriman dan penagihan, maka pengguna akan ditampilkan tabel mengenai data pengiriman dan penagihan seperti pada Gambar 4.9. Gambar 4.7: Isi dari class ConnectionManager Setelah membuat class ConnectionManager, maka dibutuhkan GWT RPC Service yang bertujuan menghubungkan antara sisi pengguna dengan sisi server agar dapat saling berkomunikasi. Pembuatan dapat dilakukan dengan menggunakan plugin gwt4nb yang sudah diinstal sebelumnya. Pembuatan GWT RPC Service secara otomatis membuat tiga class yaitu dua class di sisi pengguna dan satu class di sisi server. GWT RPC Service untuk fitur pengiriman dan penagihan. Class yang dibuat adalah PengirimanDanPenagihanService dan PengirimanDanPenagihanServiceAsync di folder pnm.client dan dibuat class PengirimanDanPenagihanServiceImpl di folder pnm.server. Class PengirimanDanPenagihanServiceImpl yang menghubungkan agar data yang ada di aplikasi sama dengan data di database, seperti pada Gambar 4.8.

Gambar 4.9: Tampilan dari menu Pengiriman dan Penagihan Pada bagian kolom pencarian, pengguna dapat langsung mencari data pengiriman dan penagihan dengan memasukkan data pada nama toko pelanggan, nama pengirim, status faktur dan/atau tanggal jatuh tempo seperti pada Gambar 4.10.

Gambar 4.10: Potongan tampilan pencarian dari menu Pengiriman dan Penagihan

Gambar 4.8: Isi dari class PengirimanDanPenagihanServiceImpl

Pada bagian terperinci dari data pengiriman dan penagihan, pengguna dapat menambah atau mengubah atau melihat data. Pengguna dapat mengubah data dalam bagian edit tab dengan menekan salah satu data dari tabel pengiriman dan penagihan. Setelah melakukan perubahan data, pengguna menekan tombol edit. Jika status faktur dalam keadaan lunas, maka akan muncul pemberitahuan bahwa data tidak dapat berubah seperti pada Gambar 4.11. Pengguna dapat menambah data dalam bagian add tab dengan memasukkan data-data yang dibutuhkan seperti nomer pesanan pelanggan, nama ekspedisi, nama pengirim, diskon dan status faktur. Pengguna dapat melihat data dalam bagian view tab dengan menekan salah satu data dari tabel pengiriman dan penagihan.

68 | T I M


4.7 Aspek Entrepreneurial

Gambar 4.11: Potongan tampilan kesalahan dalam mengubah data dari menu Pengiriman dan Penagihan Pengguna dapat melihat dalam bagian view tab dengan menekan salah satu data dari tabel pengiriman dan penagihan. Jika pengguna menginginkan untuk mencetak faktur penagihan, maka menekan tombol print dan akan ditampilkan halaman untuk mencetak. Pengguna dapat menekan tombol print untuk mencetak faktur penagihan seperti terlihat pada Gambar 4.12.

Gambar 4.12: Tampilan halaman untuk mencetak faktur penagihan dari menu Pengiriman dan Penagihan

4.6 Pengujian Integrasi Pengujian integrasi dilakukan terhadap aplikasi SISP PT ‘Putra Nusantara Mandiri” seperti pada Tabel 4.1. Skenario mulai dari 3 Mei 2010 sampai dengan 4 Mei 2010. No

Tanggal

Kegiatan

Hubungan dengan sistem

1

03/05/10 Staf Administrasi Penjualan membuat Pesanan pesanan penjualan Aneka Motor dari Penjualan salesman Tono berupa 1 Drum Audi Add Turbo Plus SAE 40 API CD

2

03/05/10 Staf Administrasi Penjualan membuat Pesanan pesanan penjualan Aska Motor dari Penjualan salesman Tono berupa 5 dus Audi CR- Add 4 (24x1)

3

03/05/10 Direktur Perusahaan menyetujui pesanan pelanggan Aneka Motor

4

04/05/10 Staf Administrasi Penjualan membuat Pengiriman pengiriman dan penagihan Aneka dan Motor dengan pengirim Untara Penagihan Add

Pesanan Penjualan Edit

Aplikasi ini akan ditawarkan kepada PT “Putra Nusantara Mandiri” secara gratis, agar perusahaan dapat mempercepat proses pengolahan informasi siklus pendapatannya. Perubahan proses bisnis yang terjadi pada perusahaan memerlukan perubahan kinerja sumber daya manusia, sehingga diperlukan pelatihan bagi para karyawan agar mereka dapat mengerti dan memaksimalkan penggunaan aplikasi. Selain itu pemeliharaan juga dibutuhkan untuk meningkatkan atau menstabilkan kinerja dari aplikasi. Biaya yang dibutuhkan untuk pelatihan dan pemeliharaan akan dibicarakan dengan pihak perusahaan. Selanjutnya implementasi aplikasi SISP pada PT “Putra Nusantara Mandiri” dapat menjadi bahan rekomendasi bagi perusahaan lain yang ingin menggunakan aplikasi SISP.

5. KESIMPULAN DAN SARAN 5.1 Kesimpulan Setelah dilakukan uji coba, maka dapat diambil kesimpulan sebagai berikut: a. Fitur aplikasi terdiri dari login, pelanggan, produk, pegawai, user, ekspedisi, pesanan penjualan, pengiriman dan penagihan barang, retur barang, penerimaan barang, laporan penjualan tiap produk, laporan penjualan tiap pelanggan, laporan piutang pelanggan, ubah password dan logout. b. Aplikasi memungkinkan direktur perusahaan menyetujui pesanan pelanggan ketika berada di luar perusahaan Tampilan dapat dibuat seperti aplikasi desktop.

5.2 Saran Saran untuk melakukan pengembangan aplikasi SISP ini antara lain: a. Aplikasi dapat dikembangkan untuk mengolah sistem informasi pada siklus yang lain seperti pengeluaran, produksi, penggajian, dan pembiayaan. b. Aplikasi dapat dibuat kustomisasi sehingga dapat digunakan dalam berbagai bidang bisnis.

6. DAFTAR PUSTAKA [1] Smeets, Bram, et al. (2008). Beginning Google Web Toolkit: From Novice to Professional. USA: Apress. [2] Design Patterns: Data Access Object. Retrieved 06 10, 2010, from Data Access Object: http://java.sun.com/blueprints/patterns/DAO.html [3] Freeman, Eric, et al. (2004). Head First Design Patterns. USA: O'Reilly. [4] MySQL - Wikipedia, the free encyclopedia. Retrieved 5 20, 2010, from MySQL: http://en.wikipedia.org/wiki/MySQL [5] Romney, Marshall B. and Paul John Steinbart. (2008). Accounting Information Systems. Eleventh Edition. New Jersey: Prentice Hall. [6] Trail: JDBC(TM) Database Access (The Java™ Tutorials). Retrieved 6 7, 2010, from Trail: JDBC(TM) Database Access: http://java.sun.com/docs/books/tutorial/jdbc/ [7] Pilone, Dan and Russ Miles. (2008). Head First Software Development. USA: O'Reily.

69 | T I M

JOURNAL VCD

Recommend Documents