TIAN

Gambaran Umum Aplikasi Pencatatan Informasi Keuangan

Dalam memodelkan proses yang terjadi pada rancangan sistem aplikasi Pencatatan Informasi Keuangan akan dibuat ke dalam 4 bentuk model UML, yaitu Use Case Diagram, Activity Diagram. Berikut adalah dua rancangan diagram UML untuk aplikasi ini.

Pada pembuatan aplikasi Pencatatan Informasi Keuangan terjadi interaksi antara user (manusia) dengan sistem. Hal ini dapat dilihat pada gambar use case diagram pada gambar 3.2. Pada gambar tersebut akan terlihat bagaimana alur interaksi antara user dengan system. Pada use case diagram, dapat dilihat bahwa interaksi antara user dengan system terdapat 3 case utama.

Case tersebut adalah case Pencatatan, case Bantuan, dan case Info. Aktor atau user berasosiasi dengan 3 case tersebut dan dilanjutkan ke turunan case yang ada pada masing-masing case utama.

Pada case Pencatatan akan diteruskan dengan stereotype <> yang berasosiasi dengan 6 case yang ada. 6 case tersebut adalah case nama_user, case pendapatan, case pengeluaran, case sumber pendapatan, sumber pengeluaran, case proses. Keenam case tersebut akan menyediakan informasi seputar aktifitas keuangan.

Pada case Bantuan maka akan berasosiasi dengan case tampilan Bantuan. Hubungan antara case ini ditandai dengan adanya stereotype sebagai fasilitas penghubung. Tidak jauh berbeda dari case Bantuan, begitu pula pada case Info, case ini berasosiasi langsung dengan user. Case Info akan dilanjutkan kepada case Tampilan Info

Perancangan antarmuka aplikasi merupakan dasar dari konsep pembuatan tampilan-tampilan antarmuka yang akan ada pada aplikasi Pencatatan Informasi Keuangan. Pada perancangan yang ada dalam aplikasi ini terdapat beberapa konsep tampilan terdiri dari perancangan antarmuka halaman awal, perancangan halaman tampilan pencatatan, perancangan halaman bantuan,  serta halaman info.

Rancangan Tampilan Halaman Pencatatan

Pada menu pencatatan ini terdapat 5 buah form pengisiian yaitu untuk mengisi nama_pengguna,  pendapatan, pengeluaran, sumber pendapatan, dan sumber pengeluaran berserta 3 buah button yang digunakan untuk melakukan proses, laporan, dan kembali.

 Rancangan Tampilan Halaman Info

Pada gambar 3.6 merupakan menu info aplikasi ini, menampilan judul Info, background dan Text keterangan. Untuk membuat judul, digunakan widget ImageView. Widget ini menampilkan tulisan Informasi dalam bentuk gambar. Gambar tersebut juga disimpan pada folder res/drawable.  Kemudian untuk backgroud pada tampilan ini digunakan gambar yang disimpan dalam folder res/drawable. Kemudian untuk Text, dibuat dengan widget TextView dan menampilkan informasi tentang aplikasi ini.

Gambar 3.6. Rancangan Tampilan Halaman Info

Pengkodean Program

Pada sub bab ini akan dijelaskan secara garis besar tentang pembuatan kode program Aplikasi Pencatatan Informasi Keuangan dengan menggunakan program editor Eclipse Galileo, Android SDK dan ADT yang dimulai dari pembuatan database dengan SQLite, pengkodean tampilan Halaman Awal, menu pencatatan, menu Bantuan, dan menu Info.

Membuat Database dengan SQLite

Membuat database Informasi Keuangan dengan menggunakan SQLite, langkahnya adalah membuat java file baru dengan nama DatabaseCreate.java. Lalu kode yang digunakan akan diulas pada penggalan kode program dibawah ini.

import android.content.Context;

import android.database.sqlite.SQLiteDatabase;

import android.database.sqlite.SQLiteOpenHelper;

Kutipan listing program diatas menunjukkan library-library pada android SDK yang diimport untuk digunakan pada proses pemrograman. Berikut ini merupakan kutipan listing untuk menampilkan kategori laporan pada aplikasi Finansial.

public class DatabaseCreate extends SQLiteOpenHelper{

private static final String DATABASE_NAME="finan.db";

private static final int DATABASE_VERSION = 1;

public DatabaseCreate(Context context){

super(context , DATABASE_NAME , null , DATABASE_VERSION);}

Listing Selanjutnya adalah OnCreate method dimana method ini akan dipanggil pertama kali dibuat, disini kita melakukan pengaturan statis secara normal. Method ini mempassing objek yang berisi status activity. setContentView adalah konten yang ditampilkan saat program berjalan, yaitu database.xml. Berikutnya adalah Inisialisasi widget yang akan ditampilkan, pendeklarasian hasil perhitungan yang akan disimpan pada konstruktor laporan. laporan yang akan ditampilkan berdasarkan id yang diberikan pada parameter.

@Override

public void onCreate(SQLiteDatabase db) {

db.execSQL("CREATE TABLE "+TABLE_NAME+"("+_ID +" INTEGER PRIMARY KEY AUTOINCREMENT,"+NAMA +" TEXT NOT NULL, "+TANGGAL +" INTEGER, "+BULAN +" TEXT NOT NULL, "+TAHUN +" INTEGER, "+PEMASUKAN +" INTEGER,"+DESCPENDAPATAN +" INTEGER, "+PENGELUARAN +" INTEGER, "+DESCPENGELUARAN +" INTEGER,"+NILAIAKG +" DOUBLE,"+WAKTU+" INTEGER);");

System.out.println("DATABASE DIBUAT");}

@Override

public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {db.execSQL("DROP TABLE IF EXIST "+TABLE_NAME);

onCreate(db);}}

 Halaman Awal

Pada pemrograman Android untuk pembuatan suatu tampilan pada program, dilakukan pengkodean pada dua bagian yang berbeda. Pembuatan tampilan layout dilakukan dengan melakukan pengkodean pada  file XML. Pada bagian rancangan halaman Menu Utama ini hanya terdiri dari background dan empat image button. Untuk membuat background dipergunakan file main.xml yang terdapat pada folder layout dan kemudian image yang di gunakan di letakan pada folder drawable-hdpi. Lalu kode yang digunakan akan diulas pada penggalan kode program dibawah ini.

"1.0" encoding="utf-8"?>

android:id="@+id/layout0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

android:id="@+id/button_main"

android:layout_width="100px"

android:layout_height="100px"

android:layout_x="41px"

android:layout_y="75px"

android:src="@drawable/awal"/>

android:id="@+id/txt_main"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_x="52px"

android:layout_y="180px"

android:text="PENCATATAN"/>

Kode diatas untuk membuat image button pencatatan pada halaman awal. Android: id merupakan kode pada xml untuk memberikan identitas pada setiap object. Pada image button ini identitasnya adalah button_main. Pengaturan tampilan width sebesar 100px dan heightnya 100px. Serta posisi dari image button itu pada layar, yaitu pada koordinat pixel x = 41px dan y = 75px. Sebagai image Button gambar akan ditampilkan dengan android:src. Kode ini digunakan untuk melakukan pemanggilan resource berupa gambar pada drawalbe yaitu gambar dengan nama awal. Untuk pembuatan image button Info, Bantuan dan Keluar caranya sama dengan pembuatan image button pencatatan. Pada gambar 3.16 dapat dilihat gambar tampilan dari image button yang telah dibuat.

       

android:id="@+id/txt_exit"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_x="193px"

android:layout_y="331px"

android:text="KELUAR"/>       

Landasan untuk membuat tampilan ini adalah absolute layout. Jenis ini digunakaan karena absolute layout merupakan jenis tampilan layar yang dapat memuat objecti button/image/text dan dapat diatur kedudukannya sesuat dengan koordinat pixel. Kemudian untuk ukuran dari layout baik secara height atau width menggunakan fill_parent agar mengikuti ukuran tampilan emulatornya. android:background merupakan kode program yang digunakan untuk menambahkan background pada tampilan ini, dengan memanggil file yang ada pada folder drawable dan nama file tersebut adalah awal.

Setelah melakukan pengkodean pada mainmenu.xml sebagai tampilan Halaman Awal, maka dilanjutkan pembahasan pada kode program yang ada dalam file java. Pertama kita akan membahas tentang kelas yang menjadi induk dari kelas lain yang nantinya ada dalam aplikasi ini. Kelas tersebut  diberi nama sebagain MainClass

import java.sql.Date;

import java.util.Calendar;

import financial.tian.R;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.ContentValues;

import android.content.DialogInterface;

import android.content.Intent;

import android.database.Cursor;

import android.database.sqlite.SQLiteDatabase;

import android.os.Bundle;

import android.view.View;

import static android.provider.BaseColumns._ID;

import static financial.tian.Constant.*;

//import android.view.View.OnClickListener;

import android.widget.AbsoluteLayout;

import android.widget.Button;

import android.widget.ScrollView;

import android.widget.TextView;

            Kutipan listing program diatas menunjukkan library-library pada android SDK yang diimport untuk digunakan pada proses pemrograman.

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.mainmenu);

// Set up click listeners for all the buttons

       

View enterButton = findViewById(R.id.button_main);

enterButton.setOnClickListener(this);

View aboutButton = findViewById(R.id.button_tentang);

aboutButton.setOnClickListener(this);

View bantuanButton = findViewById(R.id.button_bantuan);

bantuanButton.setOnClickListener(this);

View exitButton = findViewById(R.id.button_exit);

exitButton.setOnClickListener(this);}

      Listing diatas menjelaskan bahwa utama.java mempunyai extend ke activity dan diimplementasikan dengan klik. Tampilan pada java ini adalah mainmenu.xml yang terdapat di folder res>layout. Pada bagian ini juga dilakukan deklarasi button yang dipakai pada tampilan menu utama.

public void onClick(View v) {

switch (v.getId()) {

case R.id.button_main:

Intent Pencarian = new Intent(this, Perhitungan.class);

startActivity(Pencarian);

break;

case R.id.button_tentang:

Intent Tentang = new Intent(this, Tentang.class);

startActivity(Tentang);

break;

case R.id.button_bantuan:

Intent Bantuan = new Intent(this, Bantuan.class);

startActivity(Bantuan);

break;

case R.id.button_exit:

finish();

break;   }}

Selanjutnya dibuat kondisi saat tombol di klik. Ada 4 pada perintah public void onClick(View v) { switch(v.getId()) { menandakan 4 tombol yang setiap id nya akan dipanggil untuk seleksi kondisi. Kondisi yaitu jika tombol pertama yang di klik maka akan menampilkan menu slide pencatatan yang bisa diisi dan diproses. Jika memilih tombol kedua maka akan menampilkan menu slide mengenai aplikasi yang dibuat, Jika memilih tombol ketiga maka akan menampilkan tata cara penggunaan aplikasi, dan Jika memilih tombol keempat maka  program akan selesai dan kembali ke icon aplikasi pada menu aplikasi di androidnya. Setiap akhir case ada perintah break, perintah ini agar setiap setelah selesai memilih satu case maka akan keluar dari case yg telah dipilih.

Halaman Pencatatan

Pada halaman pencatatan terdapat beberapa menu button yang digunakan untuk proses perhitungan, laporan, dan kembali ke halaman awal. Terdapat tiga button, yaitu: proses, laporan, dan kembali. Pada menu button proses digunakan untuk menghitung hasil dari pemasukkan dan pengeluaran yang telah di input user, dan akan menampilkan hasil seperti gambar 3.9

Menu button laporan digunakan untuk menampilkan seluruh hasil proses yang telah masuk ke dalam database. Dan menu button keluar digunakan untuk kembali ke halaman awal aplikasi.

"1.0" encoding="utf-8"?>

"http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@drawable/finance">

   

android:id="@+id/fraabs"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="300px">

      Pada penggalan kode di atas menandakan bahwa pada @+id akan membuat sebuah identitas dengan nama fraabs bagi image button yang dibuat. 

android:gravity="center_vertical"

android:layout_width="fill_parent"

android:layout_height="50px"

android:text="User"

android:textColor="#000000"

android:textSize="10pt"

android:layout_x= "10px"

android:layout_y="10px"/>

Kode program di atas menjelaskan pembuatan textview dalam halaman pencatatan, untuk memberi form pencatatan yang dapat di isi sesuai textview yang dibuat.

      

 android:layout_width="150px"

 android:layout_height="50px"

 android:id = "@+id/txtNama"

 android:layout_x= "150px" 

 android:layout_y="10px"/>

      

EditText digunakan untuk membuat kolom pengisian yang nantinya akan di proses sesuai input an. Ukuran dari EditText dapat kita atur melalui besar layout yang dipakai.

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:id = "@+id/btnHitung"

     android:text = "PROSES"

     android:layout_gravity= "center_horizontal"

            android:layout_y="170px"

            android:layout_x="20px"/>

Kode program di atas menjelaskan pembuatan Button dalam halaman pencatatan. android:id = "@+id/btnHitung" adalah variabel yang telah di deklarasikan di class java.

  

       "@+id/ScrollInfo"

       android:layout_width="fill_parent"

       android:layout_height="350px"

       android:layout_y="30px"

       android:visibility="invisible">

       

       android:id="@+id/frahasil"

       android:orientation="vertical"

       android:layout_width="fill_parent"

       android:layout_height="fill_parent"

       android:layout_y="0px">

     

        

Kode Program Utama.java

public static class Perhitungan extends Activity implements android.view.View.OnClickListener {

private TextView txtNilai1, txtNilai2, txtHasil2, txtHasil, txtHasili2, txtHasili, txtNama;

    private ScrollView ScrollInfo;

    private Button button_back;

    private AbsoluteLayout fraabs;

    private Button btnOk, btnBack, btnHistory;

    private DatabaseCreate events = new DatabaseCreate(this);

    String kondisi;

Listing diatas menjelaskan bahwa utama.java mempunyai extend ke activity dan diimplementasikan dengan klik.

    

       /** Called when the activity is first created. */

       @Override

       public void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

setContentView(R.layout.utama);/**layout yang digunakan main.xml      di resource*/

         txtNama = (TextView)findViewById(R.id.txtNama);

         txtNilai1 = (TextView) findViewById(R.id.txtNilai1);

         txtNilai2 = (TextView) findViewById(R.id.txtNilai2);

         txtHasil = (TextView) findViewById(R.id.txtHasil);

         txtHasil2 = (TextView) findViewById(R.id.txtHasil2);

         txtHasili = (TextView) findViewById(R.id.txtHasili);

         txtHasili2 = (TextView) findViewById(R.id.txtHasili2);

         btnOk = (Button) findViewById(R.id.btnHitung);

         btnHistory = (Button)findViewById(R.id.btnHistory);

         btnBack = (Button)findViewById(R.id.btnKembali);

         fraabs = (AbsoluteLayout) findViewById(R.id.fraabs);

         ScrollInfo = (ScrollView) findViewById(R.id.ScrollInfo);

         button_back=(Button) findViewById(R.id.button_back);

         btnOk.setOnClickListener(this);

         btnBack.setOnClickListener(this);

         btnHistory.setOnClickListener(this);

         System.out.println("Proses 1");

         kondisi=txtNama.getText().toString();

         

Jadi kode di atas adalah melakukkan pendeklarasian variable baru yang diatur dapat diklik dengan setOnClickListner .Kemudian fungsi dari findViewById adalah untuk Menemukan view yang diidentifikasi oleh atribut id dari XML yang kemudian diproses dengan OnClick().

public void onClick(View v) {

switch (v.getId()) {

case R.id.btnHitung:

        

int n1 = Integer.valueOf((String.valueOf(txtNilai1.getText())));

int n2 = Integer.valueOf((String.valueOf(txtNilai2.getText())));

int hasil = n1;

int hasil2 = n1-n2;

System.out.println("Hitung sukses");

try{

  

        

//kalau pakai inputan, isi langsung addEvent(txt.getText().toString())

//jika menggunakan button maka addEvent dipanggil saat method onClick diekskusi.

              addEvent((txtNama.getText().toString()),n1,n2,hasil); //berfungsi untuk menambahkan data ke database

System.out.println("addEvent kelar");

       

}catch(Exception ex){

ex.getMessage();}

finally{

events.close();}

Pemenggalan program diatas adalah fungsi catch yang merupakan blok program untuk menangkap jika terjadi kesalahan pada blok try. Exception ex dimaksudkan bila terjadi eror maka akan keluar program.

txtHasili.setText(" Selisih pendapatan dan pengeluaran anda adalah= "+hasil2);

if(n1

txtHasili2.setText("Anda Mendapatkan Kerugian \n");

}else if(n1==n2){

txtHasili2.setText("Anda Menemui titik Ballance \n");

}else if(n1>n2){

txtHasili2.setText("Anda Mendapatklan Keuntungan \n");}

break;

case R.id.btnKembali:

finish();

break;

case R.id.btnHistory:

ScrollInfo.setVisibility(View.VISIBLE);

fraabs.setVisibility(View.INVISIBLE);

button_back.setVisibility(View.VISIBLE);

try{

Cursor cursor= getEvents();//berfungsi untuk menampilkan data ke database

showEvents(cursor);

System.out.println("getEvent() kelar");

}catch(Exception ex){

ex.getMessage();}

finally{

events.close();}

break;

default:

break;}}}

Kemudian terdapat 3 perintah public void onClick(View v) { switch(v.getId()) { menandakan 3 tombol yang setiap id nya akan dipanggil untuk seleksi kondisi. Kondisi yaitu jika tombol pertama yang di klik maka akan menampilkan menu proses yang bisa dipilih. Jika memilih tombol kedua maka program akan menampilkan slide laporan. Dan Jika memilih tombol ketiga maka program akan kembali ke icon aplikasi pada menu halaman awal. Setiap akhir case ada perintah break, perintah ini agar setiap setelah selesai memilih satu case maka akan keluar dari case yg telah dipilih

Halaman Info

Jika tombol Info pada Main Menu ditekan maka akan muncul tampilan halaman Info. Tampilan ini memuat informasi yang menjelaskan kegunaan aplikasi ini. Jika ingin kembali pada Menu Utama maka pengguna dapat menekan soft-key tombol back pada papan ketik di emulator atau telepon seluler

.

Kode Program XML:

"1.0" encoding="utf-8"?>

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#fff0f0f0"

xmlns:android="http://schemas.android.com/apk/res/android">

android:id="@+id/widget28"

android:layout_width="193px"

android:layout_height="wrap_content"

android:text="TENTANG"

android:textSize="28sp"

android:typeface="serif"

android:textStyle="bold|italic"

android:layout_x="65px"

android:layout_y="23px"

> 

android:id="@+id/widget29"

android:layout_width="270px"

android:layout_height="wrap_content"

android:text="aplikasi financial ini adalah suatu proses pencatatan segala aktifitas yang berhubungan dengan keuangan, sehingga pemakai dapat mengetahui tingkat keuangan yang dimiliki, apakah rugi, stabil, dan untung."

android:layout_x="25px"

android:layout_y="100px"

android:textColor="#ff00cccc">

Kode Program utama.java:

public static class Tentang extends Activity { //kelas untuk tentang

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.tentang);}}

Pada halaman Info ini terdapat suatu textview pada yang menunjukkan keterangan tentang pembuatan aplikasi Android Finansial. Deklarasi java pada eclipse dijadikan satu .java yaitu utama.java menampilkan halaman Info.

Bantuan.xml

"1.0" encoding="utf-8"?>

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

android:layout_width="fill_parent"

android:layout_height="350px"

android:layout_y="30px">

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

android:id="@+id/widget28"

android:layout_width="193px"

android:layout_height="wrap_content"

android:text="BANTUAN"

android:textSize="28sp"

android:typeface="serif"

android:textStyle="bold|italic"

android:layout_x="65px"

android:layout_y="40px">

Pada penggalan kode program diatas dijelaskan bahwa widget akan digunakan melalui beberapa kalimat, sehingga tampilan Halaman Bantuan terlihat teratur dalam langkah-langkah  nya.

Kode Program utama.java:

public static class Bantuan extends Activity { //kelas untuk bantuan

/** Called when the activity is first created. */

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.bantuan);

Cara Transfer dan Setting di Perangkat Seluler

Setelah Aplikasi Android Pencatatan Informasi Keuangan selesai dibuat di emulator android. Maka aplikasi tersebut siap untuk ditransfer ke dalam perangkat seluler. Langkah untuk mentransfer aplikasi dari PC ke mobile device adalah dengan meng-klik kanan pada project Financial kemudian pilih android tools, pilih export signed application package. Langkah selanjutnya mengisi kolom-kolom tentang allias, nama, password, validity years dan lain-lain sebagai keterangan atas aplikasi tersebut.

Setelah file yang diexport ke dalam folder yang diinginkan maka pada folder tersebut akan terdapat file financial.apk. file tersebut yang akan ditrasnfer ke perangkat seluler. Sebagai langkah terakhir, file financial.apk yang sudah ditransfer ke perangkat seluler kemudian dilakukan penginstalan. Setelah proses penginstalan selesai maka aplikasi ini dapat dijalankan di perangkat seluler tersebut. Klasifikasi perangkat seluler yang kompatibel dengan aplikasi Pencatatan Informasi Keuangan adalah segala jenis perangkat seluler yang memiliki sistem operasi Android versi 2.2 Froyo (Frozen Yoghourt) dan memiliki resolusi layar HVGA 320 x 480 pixel.

 Pada sub ini akan dijelaskan bagaimana mengimplementasikan rancangan Aplikasi Pencatatan Informasi Keuangan hingga menghasilkan sebuah program aplikasi yang memudahkan pengguna akhir. Pada pembuatan aplikasi ini menggunakan system operasi android dengan bahasa pemograman java, Untuk memulai membuat aplikasi, kita harus mengintegrasikan sistem android dan perangkat-perangkat lunak yang diperlukan sampai dapat menjalankan program aplikasi tersebut pada Android device.perangkat-perangkat lunak yang dibutuhkan untuk membuat aplikasi Android mulai dari instalasi adalah: JDK 6 (Java Development Kit), Android SDK, Eclipse 3.5 (Galileo), ADT 9.0.0 (Android Development Tools). Pada pembuatan program aplikasi ini digunakan PC dengan spesifikasi hardware sebagai berikut :