PERANCANGAN APLIKASI MANAJEMEN KEUANGAN PRIBADI UNTUK KALANGAN MAHASISWA BERBASIS MOBILE APPLICATION TUGAS AKHIR DEVI AFRILIA SINIKITE

(1)

BERBASIS MOBILE APPLICATION

TUGAS AKHIR

DEVI AFRILIA SINIKITE 132406186

PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA MEDAN

2016

(2)

PERANCANGAN APLIKASI MANAJEMEN

KEUANGAN PRIBADI UNTUK KALANGAN MAHASISWA BERBASIS MOBILE APPLICATION

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

DEVI AFRILIA SINIKITE 132406186

D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA MEDAN

2016

(3)

PERNYATAAN

PERANCANGAN APLIKASI MANAJEMEN KEUANGAN PRIBADI UNTUK KALANGAN MAHASISWA BERBASIS MOBILE

APPLICATION

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil karya sendiri. Kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2016

DEVI AFRILIA SINIKITE 132406186

(4)

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan Maha Penyayang, dengan limpah karunia-Nya penulis dapat menyelesaikan penyusunan tugas akhir ini dengan judul Perancangan Aplikasi Manajemen Keuangan Pribadi Untuk Kalangan Mahasiswa Berbasis Mobile Application.

Selama membangun aplikasi manajemen keuangan pribadi hingga selesainya Tugas Akhir ini penulis banyak mendapat bantuan, dorongan, serta motivasi baik secara langsung maupun tidak. Maka pada kesempatan ini, penulis mengucapkan terima kasih kepada :

1. Allah SWT, Sang Khalik yang Maha Pengatur.

2. Ayah saya Darul Aman, S.Pd dan ibu saya Dra. Nurasni yang telah memberikan cinta dan kasih sayang yang tiada tanding.

3. Kakak saya Fika Habbina, SH yang telah memberikan dukungan yang penuh terhadap saya.

4. Bapak M. Fadly Syahputra, B.Sc, M.Sc.IT selaku Dosen Pembimbing yang senantiasa membimbing penulis hingga Tugas Akhir ini selesai.

5. Bapak Dr. Kerista Sebayang, MS, selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

6. Bapak Prof. Dr. Tulus, Vordipl. Math., M.Si., Ph.D. selaku Ketua Departemen Matematika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

7. Ibu Dr. Elly Rosmaini, M.Si, selaku Ketua Program Studi D3 Teknik Informatika FMIPA.

8. Dio Nando Hasibuan dan Rendy Fahmi Roza sebagai senior saya yang telah membantu dan memberikan arahan saya dalam membangun aplikasi ini hingga selesai.

9. Achmad Faiz, Cahaya Romaito Manik, Gusfahri Ardiyansyah Hasibuan, Novita Nauli Nasution, dan Nurafni sebagai sahabat terbaik.

10. Kom D 2013 Program Studi D3 Teknik Informatika.

11. Asisten Laboratorium D3 Teknik Informatika 2013 selaku rekan kerja terbaik.

Akhir kata, semoga Tugas Akhir ini dapat memberi manfaat dan menambah wawasan maupun pengetahuan kita.

(5)

PERSONAL FINANCIAL MANAGEMENT FOR STUDENTS MOBILE APPLICATION BASED APPLICATION DESIGN

ABSTRACT

Penggunaan buku agenda keuangan di era teknologi sekarang ini, terasa merepotkan bagi mahasiswa yang disibukkan dengan kegiatan perkuliahannya.

Smartphone yang dimiliki oleh hampir dari seluruh kalangan mahasiswa, akan sangan bermanfaat bila memiliki aplikasi manajemen keuangan pribadi di dalamnya. Maka dari itu penulis mendapat ide untuk membuat sebuah aplikasi yang bergerak pada bidang keuangan yaitu sebuah “PERSONAL FINANCIAL MANAGEMENT FOR STUDENTS MOBILE APPLICATION BASED “.

Aplikasi ini dijalankan online atau menggunakan server sebagai media penyimpanan data.

Keywords: Hybrid Mobile Application, Database, Financial

(6)

PERANCANGAN APLIKASI MANAJEMEN KEUANGAN PRIBADI UNTUK KALANGAN MAHASISWA BERBASIS

MOBILE APPLICATION

ABSTRAK

Penggunaan buku agenda keuangan di era teknologi sekarang ini, terasa merepotkan bagi mahasiswa yang disibukkan dengan kegiatan perkuliahannya.

Smartphone yang dimiliki oleh hampir dari seluruh kalangan mahasiswa, akan sangat bermanfaat bila memiliki aplikasi manajemen keuangan pribadi di dalamnya. Maka dari itu penulis mendapat ide untuk membuat sebuah aplikasi yang bergerak pada bidang keuangan yaitu sebuah “APLIKASI MANAJEMEN KEUANGAN PRIBADI UNTUK KALANGAN MAHASISWA BERBASIS MOBILE APPLICATION “. Aplikasi ini dijalankan online atau menggunakan server sebagai media penyimpanan data.

Kata kunci : Hybrid Mobile Application, Database, Keuangan.

(7)

DAFTAR ISI

... Halaman

Persetujuan ... i

Pernyataan ... ii

Penghargaan ... iii

Abstrak ... iv

Abstract ... v

Daftar Isi ... vi

Daftar Tabel ... viii

Daftar Gambar ... ix

Bab 1. Pendahuluan ... 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 3

1.4 Tujuan Penelitian ... 3

1.5 Manfaat Penelitian ... 4

1.6 Metodologi Penelitian ... 4

1.7 Sistematika Penulisan ... 6

Bab 2. Landasan Teori ... 2.1 Pengertian Mobile Application ... 8

2.2 Pengertian Database dan MySQL ... 10

2.3 XAMPP Control Panel ... 12

2.4 HTML5 ... 12

2.5 CSS3 ... 13

2.6 PhoneGap ... 13

2.7 Sublime Text ... 14

2.8 PHP : Hypertext Preprocessor ... 15

2.9 Javascript ... 15

2.10 Flowchart ... 16

2.11 Entity Relationship Diagram ... 19

(8)

2.12 Data Flow Diagram ... 21

Bab 3. Perancangan Sistem ... 3.1 Pengertian Perancangan Sistem ... 24

3.2 Flowchart Program Aplikasi User ... 25

3.3 Diagram Konteks ... 26

3.4 Entity Relationship Diagram ... 26

3.5 Diagram Nol Sistem ... 27

3.6 Diagram Rinci Proses 1 : Input Data ... 28

3.7 Diagram Rinci Proses 2 : Lihat Riwayat Transaksi ... 29

3.8 Struktur Database ... 30

Bab 4. Implementasi Sistem ... 4.1 Pengertian Implementasi Sistem ... 33

4.2 Tujuan Implementasi Sistem ... 33

4.3 Komponen Utama dalam Implementasi Sistem ... 34

4.3.1 Perangkat Keras ... 34

4.3.2 Perangkat Lunak... 34

4.3.3 Brainware ... 35

4.4 Demonstrasi Aplikasi Print Online ... 35

4.4.1 Tampilan Login User ... 36

4.4.2 Tampilan Home ... 36

4.4.3 Tampilan Menu Pemasukan ... 37

4.4.4 Tampilan Menu Pengeluaran ... 38

4.4.5 Tampilan Menu Transaksi ... 39

4.4.6 Tampilan Menu Statistik ... 39

4.4.7 Tampilan Menu Target ... 40

4.4.8 Tampilan Menu Akun ... 41

Bab 5. Penutup ... 5.1 Kesimpulan ... 43

5.2 Saran ... 44

Lampiran

(9)

DAFTAR TABEL

Nama Tabel ... Halaman

2.1 Simbol Flowchart ... 17

2.2 Komponen ERD ... 21

2.3 Simbol Data Flow Diagram ... 23

3.1 Tabel Akun ... 30

3.2 Tabel Kategori Pemasukan ... 30

3.3 Tabel Kategori Pengeluaran ... 30

3.4 Tabel Pemasukan ... 31

3.5 Tabel Pengeluaran ... 31

3.6 Tabel Target ... 31

(10)

DAFTAR GAMBAR

Nama Gambar Halaman

2.1 Arsitektur Hybrid Application (Baidu, 2013) ... 9

3.1 Flowchart Aplikasi User ... 25

3.2 Diagram Konteks Sistem ... 26

3.3 ERD Sistem ... 27

3.4 Diagram Nol Sistem ... 28

3.5 Diagram Rinci Proses 1 : Input Data ... 29

3.6 Diagram Rinci Proses 2 : Lihat Data ... 29

4.1 Tampilan Login User ... 36

4.2 Tampilan Home ... 37

4.3 Tampilan Menu Pemasukan ... 38

4.4 Tampilan Menu Pengeluaran ... 38

4.5 Tampilan Menu Transaksi ... 39

4.6 Tampilan Menu Statistik ... 40

4.7 Tampilan Menu Target ... 41

4.8 Tampilan Menu Akun ... 42

(11)

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Pada era globalisasi ini, mutu dan kualitas barang semakin bertambah baik. Hal ini diakibatkan keinginan setiap perusahaan, bahkan individu, untuk berjuang dan bertahan di pasar yang semakin besar dan padat. Akibatnya, begitu banyak cara yang dipakai oleh tim pemasaran masing-masing untuk memasukkan image produk mereka di mata dan pikiran para konsumen, yang nantinya konsumen pun mulai mengurangi waktu memilih dan tidak mempertimbangkan kondisi keuangan yang ada. Butuh waktu jangka panjang untuk menyadarkan konsumen atas apa yang sudah mereka beli.

Masalah keuangan peringkat satu menurut Bruce Hokin (n.d:1) dalam artikelnya di www.streetdirectory.com adalah “Spending without knowing your limits”, atau membelanjakan uang tanpa mengetahui batasan diri sendiri, diikuti dengan peringkat dua “Spending Without Setting Savings Targets”, atau membelanjakan uang tanpa mengatur target simpanan. Dari sini terbukti bahwa sulitnya mengatur keuangan bukan merupakan suatu masalah yang kecil ataupun sederhana.

(12)

Dalam pernyataan di ndonesia consumer electronics report - Q1 2012 (n.d:36), dipaparkan bahwa BMI (Business Monitor International) forecast menyatakan bahwa permintaan konsumsi alat komunikasi elektronik di Indonesia akan meningkat kurang lebih 7.6% per bulannya. Selain itu kebanyakan orang terlihat hampir selalu membawa telepon genggam mereka kemanapun mereka pergi. Selain karena ukurannya yang pas di saku, telepon genggam juga sangat dibutuhkan untuk proses komunikasi. Dengan munculnya berbagai jenis smartphone dan aplikasi-aplikasi menarik yang ditawarkannya juga, orang-orang dapat berjalan melangkahi waktu dengan lebih cepat.

Pada umumnya, kalangan mahasiswa sudah mengatur keuangan secara mandiri. Khususnya mahasiswa yang menjalani pendidikan jauh dari kampungnya, pastinya harus dapat mengatur seluruh keuangannya dengan baik. Penggunaan buku agenda keuangan di era teknologi sekarang ini, terasa merepotkan bagi mahasiswa yang disibukkan dengan kegiatan perkuliahannya. Smartphone yang dimiliki oleh hampir dari seluruh kalangan mahasiswa, akan sangan bermanfaat bila memiliki aplikasi manajemen keuangan pribadi di dalamnya.

1.2 Perumusan Masalah

Berdasarkan dengan latar belakang masalah di atas dapat di rumuskan menjadi beberapa masalah sebagai berikut :

(13)

1. Bagaimana cara pengguna agar dapat merencanakan pengeluarannya setiap hari?

2. Bagaimana cara pengguna agar dapat melihat laporan pengeluaran yang sudah pernah dia lakukan?

3. Bagaimana cara pengguna agar dapat mencatat pengeluaran dan pemasukannya dengan mudah?

1.3 Batasan Masalah

Dalam perancangan aplikasi ini dilakukan beberapa batasan sebagai berikut :

a. Bahasa pemrograman yang digunakan dalam perancangan aplikasi ini adalah bahasa pemrograman HTML, CSS, PHP, Javascript, Jquery.

b. Cakupan aplikasi ini memberikan aplikasi manajemen keuangan yang bersifat online.

c. Penggunaan aplikasi ini dapat diakses dimana saja dan kapan saja.

d. Menggunakan MySQL sebagai media penyimpanan database.

1.4 Tujuan Penelitian

Dalam penyusunan tugas akhir ini tujuan yang hendak dicapai dalam Aplikasi Manajemen Keuangan Pribadi ini adalah:

1. Membuat aplikasi yang memudahkan pengguna untuk merencanakan pengeluarannya setiap hari.

(14)

2. Membuat aplikasi yang memudahkan pengguna untuk melihat laporan pengeluaran yang sudah pernah ia lakukan.

3. Membuat aplikasi di platform yang memudahkan pengguna untuk mencatat pengeluarannya

4. Sebagai wujud kewajiban dari mahasiswa menyelesaikan SKS yang telah dibebankan pada masing – masing mahasiswa.

5. Memberikan sebuah karya sebagai bukti hasil studi selama kuliah.

1.5 Manfaat Penelitian

Manfaat yang diperoleh dari Aplikasi Manajemen Keuangan Pribadi ini : 1. Pengeluaran pengguna dapat terorganisasi dengan baik dan jelas.

2. Pengguna dapat membuat perencanaan keuangan dengan baik.

3. Pengguna dapat mencapai target jumlah dana yang ingin ditabung sesuai dengan perencanaan.

4. Pengguna memiliki catatan pengeluaran dan pendapatan yang lengkap dan akurat.

5. Aplikasi ini juga memiliki fasilitas perhitungan statistik yang dapat melihat alur jalannya keuangan melalui grafik.

1.6 Metodologi Penelitian

Metodologi penelitian yang digunakan penulis untuk menyelesaikan permasalah

(15)

1. Studi Literatur

Pengumpulan data yang erat kaitannya dengan permasalahan dengan cara membaca buku-buku, makalah dan membaca bahan-bahan sumber lainnya di perpustakaan USU , toko buku dan internet.

2. Analisis Sistem

Melakukan analisis sistem terhadap masalah yang ada mengenai aplikasi berbasis mobile yang bisa dijalankan dengan mudah dan bisa dimanfaatkan oleh pengguna pada smartphone dengan fasilitas internet.

3. Desain Sistem

Pada tahap ini dilakukan perancangan program, membuat desain aplikasi manajemen keuangan pribadi.

4. Uji Coba

Melakukan pengujian program, mengangani dan memperbaiki kesalahan yang ada pada aplikasi manajemen keuangan pribadi ini agar dapat berjalan dengan baik.

5. Dokumentasi

Pada tahap ini dilakukan pembuatan laporan mulai dari studi literatur sampai dengan implementasi, serta penarikan kesimpulan dan saran. Pada tahap ini juga ada dicatat apa saja yang menjadi kelemahan dan kelebihan dalam aplikasi manajemen keuangan pribadi ini.

(16)

1.7 Sistematika Penulisan

Agar dapat memberikan gambaran yang jelas pada penulisan Tugas Akhir ini, maka penulis membaginya dalam beberapa bab sebagai berikut:

BAB 1 : PENDAHULUAN

Bab ini menguraikan tentang latar belakang pembangunan aplikasi, perumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian, hingga sistematika penulisan Tugas Akhir ini.

BAB 2 : LANDASAN TEORI

Bab ini menguraikan tentang teori-teori dasar dalam pembangunan aplikasi berbasis mobile. Mulai dari pengertian hingga apa-apa saja yang dibutuhkan untuk memulai pemrograman berbasis Mobile Application.

BAB 3 : PERANCANGAN SISTEM

Bab ini menguraikan mengenai perancangan sistem mulai dari perancangan layout, perancangan database, diagram konsepsi sistem, hingga flowchart sistem.

BAB 4 : IMPLEMENTASI SISTEM

Bab ini menguraikan tentang bagaimana proses lanjutan dari perancangan sistem. Menguraikan secara detail bagian implementasi

(17)

sistem dan menyorot apakah implementasi sesuai dengan perancangan sistem.

BAB 5 : KESIMPULAN DAN SARAN

Bab ini menguraikan tentang kesimpulan dan saran yang dikutip oleh penulis selama proses pembangunan aplikasi.

(18)

BAB 2

LANDASAN TEORI

2.1 Pengertian Mobile Applcation

Mobile application adalah jenis perangkat lunak aplikasi yang dirancang untuk berjalan dan melakukan tugas-tugas tertentu pada perangkat mobile, seperti handphone, smartphone, dan PDA’s (Janalta Interactive Inc, 2013). Semakin banyaknya perangkat lunak aplikasi untuk perangkat mobile merupakan dampak dari semakin pesatnya perkembangan teknologi mobile computing. Mobile application tidak hanya mampu untuk melakukan proses layanan dasar seperti layanan telepon maupun layanan pesan, tetapi sudah mampu untuk melakukan tugas-tugas yang rumit seperti melakukan pencarian posisi pengguna, menampilkan dan memproses informasi dalam peta digital.

Terdapat tiga kategori dalam mobile application menurut Nripin & Bhat (2013) yaitu mobile native application, mobile web application, dan mobile hybrid application. Perbedaan kategori tersebut berdasarkan bahasa pemrograman yang digunakan dan layanan yang dapat didukung oleh aplikasi mobile dimana masing- masing memiliki kelebihan dan kekurangan. Aplikasi Manajemen Keuangan Pribadi yang dikembangkan merupakan mobile hybrid application.

(19)

Mobile hybrid application merupakan bagian dari aplikasi native dan bagian dari mobile web app. Seperti aplikasi native, hybrid app dapat di upload ke toko penyedia aplikasi dan pengguna harus menginstallnya terlebih dahulu. Seperti mobile web app, hybrid app dibuat dengan menggunakan teknologi yang sama dengan teknologi mobile web app yaitu HTML, CSS, dan Javascript yang di render di dalam browser (Budiu, 2013). Salah satu kelebihan dari aplikasi hybrid antara lain kemampuan dalam cross platform portability sehingga dapat menyesuaikan terhadap sistem operasi lain (Cognizant, 2014). Selain itu, aplikasi hybrid juga dapat mengakses fitur-fitur seperti yang ada di dalam native application seperti kamera, GPS, Bluetooth, dan lain sebagainya (Tank, 2014). Gambar 2.1 berikut merupakan arsitektur dari hybrid application. Hybrid application menggunakan web view control (WebView dalam Android) untuk melakukan render halaman HTML dan Javascript yang dimana WebView mengunakan browser native.

Gambar 2.1. Arsitektur Hybrid Application (Budiu, 2013)

(20)

2.2 Pengertian Database dan MySQL

Database adalah suatu kumpulan data-data yang disusun sedemikian rupa sehingga membentuk informasi yang sangat berguna. Database terbentuk dari sekelompok data-data yang memiliki jenis/sifat yang sama. Ambil contoh, data- data berupa nama-nama, kelas-kelas, alamat-alamat. Semua data tersebut dikumpulkan menjadi satu menjadi kelompok data baru, sebut saja sebagai data- data mahasiswa.

Demikian juga, kumpulan dari data-data mahasiswa, data-data dosen, data- data keuangan dan lainnya dapat dikumpulkan lagi menjadi kelompok besar, misalkan data-data teknik informatika. Bahkan dalam perkembangannya, data- data tersebut dapat berbentuk berbagai macam data, misalkan dapat berupa program, lembaran-lembaran untuk entry (memasukkan) data, laporan-laporan. Kesemuanya itu dapat dikumpulkan menjadi satu yang disebut dengan database. Salah satu bahasa database yang populer adalah SQL.

MySQL biasa dibaca mai-es-ki-el atau mai-se-kuel adalah suatu perangkat lunak database relasi (Relational Database Management System atau RDBMS) seperti halnya Oracle, Postgresql, MS SQL dan sebagainya.

SQL atau singkatan dari Structured Query Language ialah suatu sintaks perintah-perintah tertentu atau bahasa pemrograman yang digunakan untuk

(21)

mengelola suatu database. Jadi, MySQL dan SQL tidaklah sama. Singkatnya, MySQL ialah perangkat lunaknya dan SQL adalah bahasa perintahnya

Ketika dibandingkan antara MySQL dengan sistem database yang lain, maka perlu difikirkan apa yang paling penting sesuai kebutuhan. Apakah tampilan, support, fitur-fitur SQL, kondisi keamanan dalam lisensi, atau masalah harga. Dengan pertimbangan tersebut, MySQL memiliki banyak hal yang bisa ditawarkan, antara lain :

1. Berdasarkan kecepatannya, banyak ahli memberikan pendapat bahwa MySQL merupakan server tercepat.

2. MySQL memiliki performa tinggi namun merupakan database yang simpel sehingga mudah di-setup dan dikonfigurasi.

3. MySQL cenderung gratis untuk penggunaan tertentu.

4. MySQL mengerti bahasa SQL (Structured Query Language) yang merupakan pilihan sistem database moderen.

5. Banyak klien dapat mengakses server dalam satu waktu. Mereka dapat menggunakan banyak database secara simultan.

6. Database MySQL dapat diakses dari semua tempat di internet dengan hak akses tertentu.

7. MySQL mudah didapatkan dan memiliki source code yang boleh disebarluaskan sehingga bisa dikembangkan lebih lanjut.

8. Dapat dikoneksikan pada bahasa C, C++, Java, Perl, PHP dan Python.

(22)

Jika hal-hal diatas ialah kelebihan yang dimiliki oleh MySQL, maka MySQL juga memiliki kekurangan seperti :

1. Untuk koneksi ke bahasa pemrograman visual seperti visual basic, delphi, dan foxpro, MySQL kurang mendukung. Karena koneksi ini menyebabkan field yang dibaca harus sesuai dengan koneksi dari program visual tersebut.

Dan ini yang menyebabkan MySQL jarang dipakai dalam program visual.

2. Data yang ditangani belum begitu besar.

2.3 XAMPP Control Panel

XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual.

XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi

.

2.4 HTML5

HTML (Hypertext Markup Language) merupakan bahasa markup yang digunakan untuk mengubah dokumen teks menjadi halaman web. Pengembangan terbaru dari HTML yaitu HTML5 yang dirancang oleh WHATWG (Web Hypertext Application

(23)

Technology Working Group) dan direkomendasikan oleh W3C (World Wide Web Consortium) untuk digunakan. HTML5 menyediakan banyak fitur-fitur baru untuk mempermudah developer dalam pengembangan web. Beberapa API (Application Programming Interfaces) yang bisa digunakan dalam HTML5 yaitu Media API, Canvas API, Drag and Drop API, Geolocation API, dan lainnya (Robbins, 2013: 1- 6)

2.6. CSS3

CSS (Cascading Style Sheets) merupakan standar W3C (World Wide Web Consortium) untuk memperindah web secara visual. Terdapat banyak elemen baru yang ditambahkan W3C dalam CSS yang disebut dengan CSS3. Di dalam CSS3, memungkinkan developer untuk melakukan animasi pada elemen web dan merancang website yang responsif yaitu dengan menggunakan media queries. Fitur tersebut banyak digunakan developer untuk merancang web untuk ukuran layar yang berbeda-beda baik di komputer maupun mobile(Meyer, 2011).

2.5 PhoneGap

Phonegap adalah sebuah framework aplikasi HTML5 yang digunakan untuk mengembangkan native applications dengan menggunakan teknologi web. Ini berarti para developer dapat mengembangkan aplikasi smartphone dan tablet

(24)

dengan kemampuan atau pengetahuan mengenai HTML, CSS, dan Javascript yang telah dimiliki.

Aplikasi yang dikembangkan oleh Phonegap adalah hybrid application.

Phonegap menjadi sebuah “jembatan” yang menyambungkan dunia Javascript dengan dunia native dari berbagai platform, seperti Javascript API yang dapat melakukan akses dan control pada devices.

2.6 Sublime Text

Sublime Text merupakan code editor yang dibuat dengan menggunakan Python API yang memudahkan programmer untuk menyunting source code yang dikerjakan. Kelebihan Sublime Text dibandingkan code editor lain adalah kemudahan dan banyak plugin yang tersedia untuk menunjang penulisan kode.

Kinder (2013) menjelaskan bahwa Sublime Text merupakan code editor yang sangat cocok dan mampu menunjang cross-platform banyak bahasa pemrograman.

Sublime Text merupakan code editor yang cocok untuk pengembangan aplikasi manajemen keuangan pribadi karena mampu mendukung banyak bahasa pemrograman sekaligus tidak menghabiskan banyak sumber daya dari pengguna.

(25)

2.7 PHP: Hypertext Preprocessor

Menurut dokumen resmi PHP, PHP adalah singkatan dari PHP Hypertext Preprocessor. Ia merupakan bahasa pemrograman yang berbentuk skrip yang ditempatkan didalam server dan diproses di server. Hasilnyalah yang akan dikirimkan ke klien, tempat pemakai menggunakan browser.

Secara khusus, PHP dirancang untuk membentuk android dinamis. Artinya, ia dapat membentuk suatu tampilan berdasarkan permintaan terkini. Misalnya, untuk menampilkan isi database ke halaman android.

PHP bersifat bebas dipakai. Tidak perlu membayar apapun untuk menggunakan perangkat lunak ini.

2.8 Javascript

Javascript adalah bahasa pemrograman (skrip) yang ditempelkan pada kode HTML

& proses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan Javascript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server.

(26)

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript.

2.9 Flowchart

Flowchart merupakan bagan atau gambar yang memperlihatkan hubungan antar- proses beserta instruksinya. Gambaran ini dinyatakan dengan simbol yang mana dari tiap-tiap simbol mewakili proses tertentu. Sedangkan hubungan antar-proses tadi digambarkan dengan garis-garis.

Flowchart merupakan langkah awal pembuatan program. Setelah flowchart selesai disusun, selanjutnya pemrogram menerjemahkannya ke dalam bentuk program menggunakan bahasa pemrograman. Berikut ini adalah simbol-simbol standar pada sebuah flowchart beserta fungsinya.

(27)

Tabel 2.1. Simbol Flowchart

No Nama Simbol Fungsi

1 Terminator

Digunakan untuk mewakili simbol start atau

end.

2 Arrow Menunjukkan alur proses.

3 Rectangle

Menunjukkan langkah pemrosesan.

4 Trapezium

Simbol untuk input- output.

5 Document

Digunakan untuk mewakili output.

6 Decision

Simbol yang berfungsi untuk menyatakan

keputusan.

7 Preparation

Simbol yang berfungsi untuk proses inisialisasi

atau pemberian harga awal.

(28)

Tabel 2.1. Lanjutan

8 Connector

Simbol untuk keluar- masuk atau penyambungan proses

pada halaman yang berbeda.

9 Manual Input

Simbol untuk pemasukkan data secara manual melalui keyboard.

10

Manual Operation

Simbol yang menunjukkan pengolahan yang tidak dilakukan oleh

komputer.

11

Predefine Process

Simbol untuk pelaksanaan suatu bagian (sub-

prosedur)

(29)

12 Display

Simbol yang menyatakan peralatan output yang digunakan seperti layar,

printer, plotter, dan sebagainya.

13 Magnetic Disk

Simbol yang digunakan untuk penyimpanan data

ke database.

14 Storage Data

Simbol yang menyatakan input yang berasal dari

disk atau disimpan ke disk.

2.10 Entity Relationship Diagram

Entity Relationship Diagram merupakan suatu model untuk menjelaskan hubungan antar-data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar-relasi.

(30)

Menurut salah satu para ahli, Brady dan Loonam (2010), Entity Relationship Diagram (ERD) merupakan salah satu teknik yang digunakan untuk memodelkan kebutuhan data dari suatu organisasi. Komponen penyusun ERD adalah sebagai berikut.

Tabel 2.2. Komponen ERD

1 Entitas

Persegi panjang untuk entitas

2 Atribut Ellips untuk atribut

3 Relasi

Belah ketupat mewakili relasi

4 Garis Garis menghubungkan

Entitas adalah objek dalam dunia nyata yang dapat dibedakan dengan objek lain, seperti mahasiswa, dosen, departemen. Sedangkan setiap entitas pasti memiliki elemen yang disebut atribut yang berfungsi untuk mendeskripsikan karakter dari

(31)

entitas tersebut. Misalnya, atribut dari mahasiswa adalah nim dan nama. Relasi merupakan gambaran antar-entitas.

2.11 Data Flow Diagram

Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna ataupun ke pembuat program.

Didalam DFD terdapat tiga level, yaitu : 1. Diagram Konteks (DFD Level 0)

Diagram konteks menggambarkan satu lingkaran besar yang dapat mewakili seluruh proses yang terdapat dalam suatu sistem. Diagram konteks merupakan tingkatan tertinggi dalam Data Flow Diagram dan biasanya diberi penomoran nol. Semua entitas eksternal ditunjukkan dalam diagram konteks beserta dengan aliran-aliran data utama, baik dari dan menuju sistem.

2. Diagram Nol (DFD Level 1)

Diagram nol merupakan satu lingkaran besar yang mewakili lingkaran- lingkaran kecil yang ada pada diagram konteks. Dengan kata lain diagram nol merupakan pemecahan dari diagram konteks.

(32)

3. Diagram Rinci

Lebih rinci lagi, diagram rinci adalah diagram yang menguraikan proses- proses yang terdapat di dalam diagram nol.

Berikut merupakan simbol-simbol standar menurut Yourdan dan DeMarco yang digunakan untuk membuat sebuah Data Flow Diagram.

Tabel 2.3 Simbol Data Flow Diagram

1 Kesatuan Luar

Sebagai kesatuan (entitas) di lingkungan luar sistem yang dapat

berupa orang, organisasi, sumber asli transaksi, atau penerima akhir.

2 Arus Data

Berfungsi untuk menghubungkan antara

proses, simpanan data, dan kesatuan luar.

3 Proses

Berupa kegiatan atau proses yang sedang berakhir

4 Simpanan Data

Menunjukkan informasi yang disimpan

(33)

BAB 3

PERANCANGAN SISTEM

3.1 Pengertian Perancangan Sistem

Membangun sebuah aplikasi pada umumnya akan diawali oleh perancangan sistem terlebih dahulu. Dimana perancangan sistem adalah sebuah proses yang secara garis besar meliputi langkah-langkah operasi dalam proses pengolahan data dan prosedur untuk mendukung operasi sistem.

Menurut Jogiyanto H. M (1991) dalam bukunya “Analisis dan Desain Sistem”, perancangan sistem dapat diartikan seperti berikut :

1. Tahap setelah analisis dari siklus pengembangan sistem.

2. Pendefinisian dari kebutuhan-kebutuhan fungsional.

3. Persiapan untuk rancang bangun implementasi.

4. Menggambarkan bagaimana suatu sistem dibentuk.

5. Yang dapat berupa pengambaran perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi.

6. Termasuk menyangkut mengkonfigurasi dari komponen perangkat keras dari suatu sistem.

(34)

3.2 Flowchart Program Aplikasi User

Berikut adalah alur flowchart Aplikasi User untuk aplikasi yang dibangun.

Gambar 3.1. Flowchart Aplikasi User

(35)

Dari bagan flowchart diatas, tampak bahwa pengguna dapat melakukan beberapa hal melalui mobile saja. Pengontrolan keuangan seperti melihat data transaksi, melihat laporan keuangan dalam bentuk statistik, menginputkan data pemasukan dan pengeluaran, menginput daftar target pengeluaran serta memperbaharui akun.

3.3 Diagram Konteks Sistem

Berikut adalah diagram konteks dari aplikasi kontrol keuangan yang dibangun.

Diagram konteks ini hanya menampilkan entitas yang terdapat dalam aplikasi tersebut, yakni user dan sistem.

Gambar 3.2 Diagram Konteks Sistem

3.4 Entity Relationship Diagram

Seperti yang sudah dijelaskan pada bab sebelumnya bahwa Entity Relationship Diagram atau biasa disebut ERD merupakan suatu model yang menjelaskan hubungan antar-data dalam basis data. Berikut merupakan ERD dari aplikasi mobile ini.

(36)

Gambar 3.3. ERD Sistem

Pada ERD diatas, terdapat dua entitas yaitu akun dan transaksi yang antara keduanya terdapat sebuah relasi.

3.5 Diagram Nol Sistem

Berikut adalah diagram nol dari diagram konteks pada aplikasi kontrol keuangan.

(37)

Gambar 3.4 Diagram Nol Sistem

Diagram nol diatas menggambarkan jelas bahwasanya terdapat dua proses utama dalam aplikasi ini. Yakni input data dan lihat data transaksi. Untuk proses penginputan data yang dilakukan oleh user sendiri bersumber dari sumber data valid bagi aplikasi. Sehingga mengurangi kekeliruan dan kesalahan input data pada aplikasi mobile ini.

3.6 Diagram Rinci Proses 1: Input Data transaksi

Berikut adalah diagram rinci dari proses input data oleh user. Proses input data melalui beberapa proses rincian, mulai dari pengambilan data , dilanjutkan dengan proses penginputan data, hingga penyimpanan data ke database.

(38)

USER

1.1 PROSES INPUT

DATA

1.2 PROSES SIMPAN

JUMLAH

2.0

KATEGORI

DESKRIPSI ID

TANGGAL

Gambar 3.5 Diagram Rinci Proses 1: Input Data

3.7 Diagram Rinci Proses 2: Lihat Riwayat Transaksi

Diagram rinci berikut merupakan diagram rinci yang menggambarkan proses akhir dari aplikasi kontrol keuangan ini. Berikut diagram rinci dari proses lihat data riwayat transaksi.

Gambar 3.6. Diagram Rinci Proses 2: Lihat Data

(39)

3.8 Struktur Database

Berikut table-tabel yang ada di dalam database aplikasi manajemen keuangan pribadi:

Tabel 3.1 Tabel Akun

Nama Field ^{Tipe Data} Keterangan

Id_akun int (3) Id akun

email Varchar (50) Email

password Varchar (50) Password

username Varchar (50) Username

Tanggal Date Tanggal

Saldo_awal Int (5) Saldo Awal

Tabel 3.2 Tabel Kategori Pemasukan

id_kategori Int (3) Id Kategori

Id_akun Int (3) Id akun

Kategori Varchar (35) Kategori

Tabel 3.3 Tabel Kategori Pengeluaran

id_kategori Int (3) Id Kategori

Id_akun Int (3) Id akun

(40)

Tabel 3.4 Tabel Pemasukan

id_income Int (3) Id Pemasukan

id_akun Int (3) Id Akun

Jam Time Jam

Nominal Int (15) Nominal

Deskripsi Text Deskripsi

Tabel 3.5 Tabel Pengeluaran

Nama Field Tipe Data Keterangan

id_expense Int (3) Id Pengeluaran

Jam Time Jam

Deskripsi Text Deskripsi

Tabel 3.6 Tabel Target

Nama Field Tipe Data Keterangan

id_target Int (3) Id Target

(41)

Nama_target Varchar (50) Nama Target

Status Tyniint (4) Status Target

(42)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Implementasi sistem adalah langkah-langkah atau prosedur yang dilakukan untuk merealisasikan perancangan sistem yang sebelumnya telah disetujui. Implementasi sistem bertujuan untuk menciptakan sistem baru maupun mengganti sistem yang telah ada.

4.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah bukti nyata dari perencanaan yang matang. Segala aspek dalam perencanaan sistem direalisasikan sehingga sistem akhirnya dapat diuji dan dioperasikan langsung oleh pengguna. Pengguna berhak memastikan bahwa pengimplementasian sistem sesuai dengan perencanaan sistem. Implementasi sistem memperhitungkan banyak hal seperti memastikan sistem berjalan dengan baik dan penginstalan sistem secara benar.

(43)

4.3 Komponen Utama dalam Implementasi Sistem

Pada dasarnya, dalam pengimplementasian sistem terdapat beberapa komponen penting agar aplikasi yang dibangun dapat berjalan. Berikut beberapa komponen yang dibutuhkan.

4.3.1 Perangkat Keras

Perangkat keras merupakan bagian dari komputer yang dapat dilihat secara fisik dan dapat disentuh. Perangkat keras merupakan seluruh komponen peralatan yang membentuk suatu sistem komputer serta peralatan lainnya yang memungkinkan komputer dapat melakukan tugasnya. Dalam pembuatan perancangan aplikasi manajemen keuangan pribadi, penulis menggunakan komputer sebagai perangkat keras pengganti. Dimana setelah perancangan, aplikasi dijalankan pada gadget dimana penulis menggunakan smartphone tablet yang minimal beroperasi pada Android 2.3 (Gingerbread).

4.3.2 Perangkat Lunak

Perangkat lunak adalah sekumpulan instruksi yang memungkinkan perangkat keras untuk dapat memproses data. Perangkat lunak ini tidak berbentuk fisik, melainkan berupa program yang diciptakan melalui perangkat elektronik. Dalam perangkat

(44)

lunak dikenal dengan apa yang disebut sistem operasi dan program aplikasi. Penulis mengembangkan bagian perangkat lunak berupa aplikasi.

Perangkat lunak yang digunakan dalam perencanaan hingga implementasi sistem adalah :

1. Sublime Text 2.

2. Database MySQL.

3. XAMPP Control Panel Versi 3.0.12 4. PhoneGap / Cordova.

5. Windows 8.1 Pro 64-Bit.

6. Web browser Goggle Chrome

4.3.3 Brainware

Brainware atau pengguna adalah manusia yang terlibat dalam mengoperasikan serta mengatur sistem di dalam komputer. Diartikan juga sebagai perangkat intelektual yang mengoperasikan dan mengeksplorasi kemampuan dari perangkat keras maupun perangkat lunak.

Brainware termasuk bagian penting dari sebuah sistem komputer. Karena sebuah sistem tidak akan berjalan apabila tidak ada peran brainware. Dalam sistem yang dibangun ini, penggunalah yang mengambil peran sebagai brainware.

4.4 Demonstrasi Aplikasi Manajemen Keuangan Pribadi

(45)

Demonstrasi program akan menjelaskan secara visual bagaimana tampilan dari perancangan aplikasi manajemen keuangan pribadi.

4.4.1 Tampilan Login User

Berikut adalah tampilan awal aplikasi berupa Login User dari aplikasi Manajemen Keuangan Pribadi.

Gambar 4.1. Tampilan Login User

4.4.2 Tampilan Home

Pada tampilan beranda terdapat enam menu yaitu Pemasukan, Pengeluaran, Transaksi, Statistik, Target dan Akun..

(46)

Gambar 4.2. Tampilan Home

4.4.3 Tampilan Menu Pemasukan

Pada tampilan menu Pemasukan berisi saldo terakhir dan form pengisian pemasukan. Adapun yang diisi berupa nominal jumlah uang yang masuk, kategori dari pemasukan, tanggal pemasukan, jam pemasukan dilakukan dan catatan tambahan yang bersifat opsional diisi atau tidak.

(47)

Gambar 4.3. Tampilan Menu Pemasukan

4.4.4 Tampilan Menu Pengeluaran

Pada tampilan menu Pengeluaran berisi saldo terakhir dan form pengisian pengeluaran. Adapun yang diisi berupa nominal jumlah uang yang keluar, kategori dari pengeluaran, tanggal pengeluaran, jam pengeluaran dilakukan dan catatan tambahan yang bersifat opsional diisi atau tidak.

(48)

Gambar 4.4. Tampilan Menu Pengeluaran 4.4.5 Tampilan Menu Transaksi

Tampilan Menu Transaksi berisi catatan riwayat dari pemasukan dan pengeluaran yang telah dimasukkan. Riwayat yang ditampilkan sesuai dengan bulan yang diinginkan. Adapun saldo, total pengeluaran dan total pemasukan sesuai dengan bulannya.

Gambar 4.5. Tampilan Menu Transaksi

4.4.6 Tampilan Menu Statistik

Tampilan Menu Statistik berisi tampilan diagram grafik dari pemasukan dan pengeluaran. Grafik yang digunakan adalah grafik garis dan grafik lingkaran / pie.

(49)

Grafik garis digunakan untuk melihat alur riwayat dari total pemasukan atau pengeluaran di tiap bulannya. Grafik lingkaran / pie digunakan untuk melihat banyaknya pemasukan atau pengeluaran sesuai kategori.

Gambar 4.6. Tampilan Menu Statistik

4.4.7 Tampilan Menu Target

Tampilan Menu Target berisi target yang ingin dicapai oleh pengguna dan saldo terakhir yang dimiliki.

(50)

Gambar 4.7. Tampilan Menu Target

4.4.8 Tampilan Menu Akun

Tampilan Menu Akun berisi data dari pengguna. Data berupa alamat email, username dan password. Dimana data tersebut dapat diperbaharui melalui menu ini.

Selain itu, pada menu Akun juga berisi tombol Log Out yang berfungsi jika pengguna ingin keluar sebagai akun.

(51)

Gambar 4.8. Tampilan Menu Akun

(52)

BAB 5

PENUTUP

5.1 Kesimpulan

Berdasarkan proses perencanaan hingga implementasi sistem, maka sebagai penutup laporan penulis mengambil beberapa kesimpulan antara lain:

1. Pembangunan aplikasi manajemen keuangan pribadi ini merupakan solusi kepada masyarakat khusunya pada mahasiswa tentang kemudahan mereka untuk memanajemen keuangan mereka setiap harinya.

2. Sulitnya membangun sebuah sistem mengidintifikasikan bahwa sistem yang ada haruslah selalu berada dalam pengawasan. Sehingga sistem senantiasa memiliki inovasi baru.

3. Memaksimalkan penggunaan smartphone.

4. Dengan adanya aplikasi ini, Memudahkan pengguna untuk melakukan pengontrolan keuangan dimana saja dan kapan saja.

5. Penulis melakukan pembatasan fungsi pada aplikasi ini mengingat sifatnya yang hanya untuk mengkontrol keuangan saja. Bukan sebagai sarana utama untuk mengedit, serta menghapus data.

(53)

1.2 Saran

Dengan selesainya pengimplementasian sistem ini, banyak saran-saran yang masuk baik kepada penulis, seperti berikut :

1. Besar harapan agar sistem dapat dibangun lebih lagi mengingat masih banyak kekurangan yang menempel pada sistem.

2. Sistem yang dibuat diharapkan mampu menaungi dan meringankan masalah-masalah yang terjadi dalam mengatur keuangan agar lebih terarah.

3. Melihat aplikasi bergerak pada bidang keuangan, besar harapan penulis agar bisa selalu memberikan maintenance pada aplikasi untuk memudahkan para user yang menggunakannya.

(54)

DAFTAR PUSTAKA

Huda, Muhammad K. 2013. Bagaimana Phonegap Bekerja.

http://mkhuda.com/teknologi. [8 Mei 2013].

Jogiyanto, H.M.2005.Analisis dan Desain Sistem Informasi.Andi Offset.Yogyakarta.

Mulhim, Imam.2014.Membuat Web Mobile untuk Orang Awam.

Maxikom.Palembang.

Kadir, Abdul. 2008. Tuntunan Praktis Belajar Database Menggunakan MYSQL.

Andi Offset. Yogyakarta.

Rochmansyah. 2012. Bab_II.pdf. sir.stikom.edu. [20 Desember 2005].

Sitompul, Opim Salim. 2014. Pemrograman C di Lingkungan Linux.

USU Press. Medan.

Sholekha, Anis. 2015. Pengertian dan Cara Kerja PhoneGap.

http://anis99mi.blogspot.co.id. [16 Februari 2015].

Trisna, Ridwan. 2013. Cara Kerja PhoneGap dalam Membangun Aplikasi.

http://phonegap.blog.amikom.ac.id.[19 Desember 2013].

Wahyuni, Rinda. 2013. Apache-Cordova-PhoneGap.

https://rindawahyuni.wordpress.com. [4 Oktober 2013].

Tutang. 2001. Belajar Cepat HTML.

Medikom. Jakarta

Kadir,Abdul. 2005. Dasar Pemrograman Web Dinamis Menggunakan PHP.

Informatika Bandung. Yogyakarta.

Saputra,Agus. 2011. Pemrograman CSS Untuk Pemula.

PT. Gramedia. Jakarta.

.

(55)

LAMPIRAN

Listing Program Index.html

<!DOCTYPE html>

<html>

<head>

<title>Aplikasi Uangku</title>

href="assets/css/style.css">

href="assets/css/fonts.css">

src="assets/js/jquery.min.js"></script>

initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"

/>

</head>

<body>

</div>

<tr>

<td><input id="username_login" type="text"

name="username" placeholder="username" autofocus/></td>

(56)

</tr>

<tr>

<td><input id="password_login" type="password"

name="password" placeholder="password" /></td>

</tr>

<tr>

<td class="forget"><a

href="forget.html">lupa password</a></td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

src="assets/js/home.js"></script>

src="cordova.js"></script>

src="js/index.js"></script>

(57)

$('#sign_in').on('click',function(){

username_login = $('#username_login').val();

password_login = $('#password_login').val();

var data;

data = {

'username_login' : username_login, 'password_login' : password_login };

$.post('http://'+ip+'/mome_server/login.php', data, function(responses)

if (responses=="success") {

window.location = "home.html";

}else{

alert('gagal login');

} });

});

</script>

</body>

</html>

Home.html

<!DOCTYPE html>

<html>

<head>

(58)

href="assets/css/style.css">

initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"

/>

</head>

<body>

<h1>dashboard</h1>

</div>

<ul>

<li

onclick="window.location='pengeluaran.html'">

<h2>pengeluaran</h2>

<p id="ttl_pengeluaran"

class="hidden"></p>

(59)

</li>

<li

onclick="window.location='pemasukan.html'">

<h2>pemasukan</h2>

<p id="ttl_pemasukan"

class="hidden"></p>

</li>

<li

onclick="window.location='transaksi.html'">

<h2>transaksi</h2>

<p>data tabel</p>

</li>

<li

onclick="window.location='statistik.html'">

<h2>statistik</h2>

<p>data grafik</p>

</li>

<li

onclick="window.location='target.html'">

<h2>target</h2>

<p>lihat target</p>

</li>

(60)

<li

onclick="window.location='akun.html'">

</li>

</ul>

</div>

$(document).ready(function(){

$.getJSON( 'http://'+ip+'/mome_server/show_akun.php', function(data) {

list = data.riwayat;

$.each(list, function(key,val) {

$('#tampil_email').append(val.username) });

});

(61)

$.getJSON( 'http://'+ip+'/mome_server/tanggal.php', function(data) {

list = data.riwayat;

$.each(list, function(key,val) {

$('#today').append(val.hari+', '+val.tanggal+' '+val.bulan+' '+val.tahun)

});

$.getJSON(

'http://'+ip+'/mome_server/show_expense_income.php', function(data) {

listPengeluaran = data.pengeluaran;

$.each(listPengeluaran, function(key,val) { total_pengeluaran = val.total1;

});

ttl_pengeluaran = currency(total_pengeluaran);

$('#ttl_pengeluaran').append('Rp. '+ttl_pengeluaran+',- ');

listPemasukan = data.pemasukan;

$.each(listPemasukan, function(key,val) { total_pemasukan = val.total; });

ttl_pemasukan = currency(total_pemasukan);

$('#ttl_pemasukan').append('Rp.

'+ttl_pemasukan+',-');

var saldo = 0;

saldo = total_pemasukan - total_pengeluaran;

$('#saldo_akhir').append('<h1>Rp. '+currency(saldo)+',-

</h1>');

});

(62)

function currency(saldo){

ar=parseInt(saldo,10).toString().split("").reverse().jo in("");

tmp_ar = '';

for(var i = 0; i < ar.length; i++){

tmp_ar += ar[i];

if((i+1) % 3 === 0 && i !== (ar.length-1)){

tmp_ar += '.';

} }

return tmp_ar.split("").reverse().join("");

}

function currency(total_pemasukan){

ar=parseInt(total_pemasukan,10).toString().split("").re verse().join("");

tmp_ar = '';

tmp_ar += ar[i];

if((i+1) % 3 === 0 && i !== (ar.length-1)){

tmp_ar += '.';

} }

}

function currency(total_pengeluaran){

ar=parseInt(total_pengeluaran,10).toString().split("").

reverse().join("");

tmp_ar = '';

tmp_ar += ar[i];

(63)

if((i+1) % 3 === 0 && i !== (ar.length-1)){

tmp_ar += '.';

} }

} });

</script>

</body>

</html>

Pemasukan.html

<!DOCTYPE html>

<html>

<head>

<title>Aplilasi Uangku</title>

href="assets/css/style2.css">

</head>

(64)

</div>

</div>

<h1>Pemasukan</h1>

</div>

<h1>Saldo</h1>

</div>

</div>

<tr>

<td><input id="jlh_income" class="input-full focus-form input-border-1" type="number" name=""

placeholder="Jumlah Pemasukan" /></td>

</tr>

<tr>

<td>

(65)

<option>Pilih Kategori</option>

</select>

</td>

</tr>

<tr>

<td>

</select>

</select>

</select>

</td>

</tr>

<tr>

<td>

</textarea>

</td>

</tr>

<tr>

(66)

<td><input id="input_income" class="input-submit"

type="submit" value="Simpan Data"></td>

</tr>

</table>

</div>

<table>

<tr>

<td>

<input id="nama_kategori_income" class="input-full focus-form-1 input-border-1 auto-focus" type="text"

name="" placeholder="tambah kategori" />

</td>

</tr>

<tr>

</tr>

</table>

</div>

(67)

src="js/pemasukan.js"></script>

$.getJSON(

'http://'+ip+'/mome_server/show_expense_income.php', function(data) {

listPengeluaran = data.pengeluaran;

$.each(listPengeluaran, function(key,val) { total_pengeluaran = val.total1;

});

ttl_pengeluaran = currency(total_pengeluaran);

listPemasukan = data.pemasukan;

$.each(listPemasukan, function(key,val) { total_pemasukan = val.total;

});

ttl_pemasukan = currency(total_pemasukan);

var saldo = 0;

saldo = total_pemasukan - total_pengeluaran;

$('#saldo_akhir').append('<h1>Rp. '+currency(saldo)+',-

</h1>');

});

function currency(saldo){

ar=parseInt(saldo,10).toString().split("").reverse().jo in("");

tmp_ar = '';

tmp_ar += ar[i];

if((i+1) % 3 === 0 && i !== (ar.length-1)){

tmp_ar += '.';

}

(68)

}

} });

</script>

</body>

</html>

Transaksi.html

<!DOCTYPE html>

<html>

<head>

href="assets/css/style2.css">

</head>

(69)

</div>

<h1>Transaksi</h1>

</div>

</select>

</div>

</div>

<ul>

<li class="show-transaksi-pengeluaran transaksi- active">Pengeluaran</li>

<li class="show-transaksi-pemasukan">Pemasukan </li>

</ul>

</div>

<ul>

<li>

<p><b>Total Pengeluaran</b></p>

</div>

(70)

<p id="ttl_pengeluaran"

class="hidden"></p>

</li>

</ul>

</div>

<div id="income-data-list"

class="transaksi-list"></div>

<ul>

<li>

<p><b>Total Pemasukan</b></p>

</div>

<p id="ttl_pemasukan"

class="hidden"></p>

</li>

</ul>

</div>

<table>

<tr>

(71)

<td><input id="nama_target" class="input-full focus- form-1 input-border-1 auto-focus" type="text" name=""

placeholder="judul/nama target" /></td>

</tr>

<tr>

<td><input id="harga_target" class="input-full focus- form-1 input-border-1" type="text" name=""

placeholder="harga target" /></td>

</tr>

<tr>

<td><input id="input_target" class="input-submit"

type="submit" value="tambah" /></td>

</tr>

</table>

</div>

var saldo = 0;

$('#expense-data-list').on('click','#data-row', function(){