SIDANG - 1507115719 - LUKMANNIL HAKIM (31-Maret)

SKRIPSI
RANCANG BANGUN APLIKASI TRACKING BIBIT

KELAPA SAWIT DENGAN QR CODE BERBASIS
MOBILE HYBRID APPLICATION
Oleh:
LUKMANNIL HAKIM
NIM: 1507115719
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS RIAU
2021
i
KATA PENGANTAR
Puji dan syukur penulis ucapkan kepada Allah Swt. karena dengan karunia
dan hidayah-Nya proposal skripsi dengan judul “Rancang Bangun Aplikasi
Tracking Bibit Kelapa Sawit dengan QR Code Berbasis Mobile Hybrid
Application” dapat diselesaikan. Salawat dan salam penulis ucapkan kepada Nabi
Muhammad saw. yang telah membawa umat manusia dari zaman kebodohan
menuju zaman yang penuh dengan ilmu pengetahuan. Penulis ucapkan terima
kasih kepada Bapak Dr. Feri Candra, S.T.,M.T. selaku dosen pembimbing yang
telah memberikan arahan dalam penyusunan proposal skripsi ini, sehingga dapat
selesai tepat waktu.
Penulis ucapkan terima kasih kepada semua pihak yang telah membantu
dalam penyusunan proposal skripsi ini. Proposal skripsi ini masih terdapat
kekurangan. Oleh karena itu, penulis mengharapkan pembaca dapat memberikan
kritik dan saran agar proposal skripsi ini menjadi sesuai dengan yang diharapkan.
Semoga proposal skripsi ini dapat memberikan manfaat bagi kemajuan ilmu
pengetahuan, pendidikan dan teknologi.
Pekanbaru, 3 Desember 2019
Lukmannil Hakim
ii
DAFTAR ISI
DAFTAR ISI..........................................................................................................ii
DAFTAR GAMBAR.............................................................................................iv
DAFTAR TABEL..................................................................................................v
BAB I PENDAHULUAN......................................................................................1
1.1 Latar Belakang..........................................................................................1
1.2 Rumusan Masalah.....................................................................................3
1.3 Tujuan Penelitian.......................................................................................3
1.4. Batasan Masalah........................................................................................4
1.5 Sistematika Penulisan................................................................................4
BAB II LANDASAN TEORI................................................................................6
2.1 Teori yang Relevan...................................................................................6
2.1.1 Aplikasi Mobile..................................................................................6
2.1.2 Database Management System (DBMS)...........................................7
2.1.3 Hypertext Markup Language (HTML)..............................................7
2.1.4 TypeScript..........................................................................................8
2.1.5 Syntactically Awesome Style Sheets (Sass)........................................8
2.1.6 JavaScript Object Notation (JSON)...................................................9
2.1.7 Structured Query Language (SQL)...................................................9
2.1.8 Web Browser....................................................................................10
2.1.9 Node.js.............................................................................................10
2.1.10 Ionic Framework..............................................................................10
2.1.11 Apache Cordova...............................................................................11
2.1.12 Mobile Hybrid Application..............................................................11
2.1.13 Tracking System...............................................................................12
2.1.14 Black Box Testing............................................................................13

iii
2.2 Penelitian Terdahulu...............................................................................14
BAB III METODOLOGI PENELITIAN..........................................................19
3.1 Tempat Penelitian....................................................................................19
3.2 Metode Pengumpulan Data.....................................................................19
3.2.1 Metode Wawancara.........................................................................19
3.2.2 Metode Observasi............................................................................19
3.3 Metode Pengembangan Sistem...............................................................19
3.4 Analisis Kebutuhan Sistem.....................................................................20
3.4.1 Analisis Kebutuhan Input................................................................21
3.4.2 Analisis Kebutuhan Output..............................................................21
3.4.3 Analisis Kebutuhan Proses..............................................................21
3.4.4 Analisis Kebutuhan Perangkat Lunak..............................................22
3.4.5 Analisis Kebutuhan Perangkat Keras...............................................22
3.5 Perancangan Sistem.................................................................................23
3.5.1 Use Case Diagram...........................................................................23
3.5.2 Flowchart.........................................................................................24
3.5.3 Perancangan Database.....................................................................34
3.6 Implementasi...........................................................................................40
3.7 Pengujian.................................................................................................40
3.8 Analisa Hasil Pengujian..........................................................................41
3.9 Kesimpulan..............................................................................................41
DAFTAR PUSTAKA...........................................................................................42
iv
DAFTAR GAMBAR
Halama
Gambar 3.1 Tahapan pengerjaan sistem...............................................................20

Gambar 3.2 Use Case Diagram sistem................................................................24
Gambar 3.3 Flowchart halaman login..................................................................25
Gambar 3.4 Flowchart fitur cek status bibit.........................................................26
Gambar 3.5 Flowchart halaman input bibit.........................................................28
Gambar 3.6 Flowchart halaman penyimpanan offline data input bibit................29
Gambar 3.7 Flowchart halaman ubah status bibit ke online database................30
Gambar 3.8 Flowchart halaman ubah status bibit ke offline database................32
Gambar 3.9 Flowchart halaman penyimpanan offline data ubah status bibit......33
v
DAFTAR TABEL
Halaman
Tabel 2.1 Penelitian terkait dengan aplikasi tracking bibit kelapa sawit.... 10
Tabel 3.1 Objek master.json yang memuat data primer bibit...................... 25
Tabel 3.2 Objek status.json yang memuat perubahan data status bibit....... 26
Tabel 3.3 Objek user.json yang memuat data pengguna............................. 26
Tabel 3.4 Objek asalbit.json yang memuat asal daerah bibit...................... 27
Tabel 3.5 Objek kirbit.json yang memuat data pengiriman bibit................ 27
Tabel 3.6 Objek klmpk.json yang menyimpan data kelompok bibit........... 27
Tabel 3.7 Objek lokasi.json yang memuat data lokasi pembibitan............. 28
Tabel 3.8 Objek varietas.json yang memuat data varietas bibit.................. 28
Tabel 3.9 Tabel ubah status untuk menyimpan data status bibit................. 29
Tabel 3.10 Tabel tambah bibit yang menyimpan data dan jumlah bibit....... 29
1
BAB I
PENDAHULUAN
1.1 Latar Belakang

PTPN V melakukan efisiensi dan efektifitas di semua bidang produksi,
termasuk didalamnya kegiatan pembukaan lahan, penanaman ulang, pengolahan
lahan, pembibitan, penanaman, pemeliharaan, dan kegiatan lainnya seperti
pengembangan kebun plasma. PTPN V selalu menginginkan kualitas hasil
produksi yang baik. Untuk mendapatkan hasil yang baik tentunya harus
memperhatikan banyak aspek, salah satunya kualitas bibit. Keberhasilan
penanaman kelapa sawit sangat bergantung kepada kualitas bibit sehingga teknis
pelaksanaan pembibitan perlu mendapat perhatian besar dan khusus (Rosa, 2017).
Pernyataan diatas membuktikan bahwa kualitas bibit sangat memengaruhi kualitas
hasil panen di masa depan. Bibit dengan kualitas rendah banyak menimbulkan
masalah dan kerugian, contohnya bibit afkir (mati), pertumbuhan bibit lambat,
dan waktu berbuah yang sangat lama.
Teknologi pertanian adalah penerapan ilmu pengetahuan atau peranti
dalam menggunakan sumber daya yang tersedia untuk meningkatkan
kesejahteraan manusia di bidang pertanian (Askina, 2016). Untuk menggunakan
teknologi, PTPN V harus memperhatikan kebutuhan sistem. Kebutuhan sistem
adalah kemampuan sistem untuk memenuhi dan menyelesaikan kondisi yang
dibutuhkan penggunanya. Kebutuhan sistem sangat penting karena teknologi yang
akan digunakan berada di sektor pertanian/perkebunan dan berlokasi di tempat
yang jauh dari infrastruktur teknologi. Setelah kebutuhan sistem rampung,
selanjutnya PTPN V bisa membuat sistem yang dapat menyelesaikan masalah
yang dialami.
PTPN V selalu menggunakan bibit kelapa sawit dengan kualitas terbaik di
setiap kebun-kebunnya. PTPN V memiliki 41 kebun yang tersebar di 4 distrik,
yaitu Distrik Lubuk Dalam, Distrik Sei Galuh, Distrik Sei Rokan, dan Distrik
Tandun. Tentunya kebutuhan bibit di seluruh kebun PTPN V tidak sedikit,
2
sehingga banyak benih yang dibeli untuk pembibitan. Setelah benih dikelola di
pembibitan, bibit-bibit siap tanam dikirim ke kebun-kebun yang membutuhkan.
Permasalahan dalam distribusi bibit-bibit tersebut adalah pendataannya yang
kurang tepat dan rawan kesalahan. Sebagai contoh, permasalahan yang sering
terjadi adalah jumlah bibit yang dikirim dari lokasi pembibitan tidak sesuai
dengan bibit yang diterima di kebun. Jumlah bibit yang berkurang ketika
didistribusikan tentu menimbulkan kerugian terhadap PTPN V. Bibit-bibit yang
didistribusikan juga rentan dan memiliki kemungkinan untuk ditukar dengan bibit
lain di perjalanan. Permasalahan tersebut sulit untuk diselesaikan dengan cara
manual. Salah satu cara untuk memperkecil kemungkinan kerugian dari
permasalahan ini adalah dengan pemanfaatan teknologi.
Penelitian yang dilakukan oleh penulis diadaptasi dari sistem tracking
ekspedisi pengiriman barang. Tracking lokasi barang dapat dilakukan oleh
pengguna dengan memasukkan nomor resi pada sistem. Lalu, sistem akan
melakukan checking pada database untuk status lokasi terakhir barang dengan
nomor resi yang dimasukkan oleh pengguna. Status lokasi terakhir bibit akan
selalu berubah setiap barang berhenti di setiap checkpoint (Sitanggang, 2014).
Adaptasi dari sistem tersebut dilakukan pada sistem tracking bibit kelapa sawit.
Nomor ID pada bibit digunakan layaknya nomor resi. Namun, sistem ini dapat
menggunakan Quick Response (QR) code untuk mempermudah pengguna
melakukan input. Proses input perubahan status lokasi bibit diharapkan dapat
dilakukan dengan mudah, sehingga tidak mengganggu proses pengiriman.
Checkpoint untuk sistem ini adalah lokasi pembibitan dan lokasi penanaman bibit.
Kesimpulannya, diperlukan sebuah sistem untuk mengelola data
pembibitan dan dapat bekerja dengan data dalam jumlah besar. Sistem juga
diharapkan dapat merekam perubahan status lokasi bibit kelapa sawit dengan
efektif dan efisien. Sistem tersebut adalah sistem tracking bibit kelapa sawit
dengan QR code berbasis mobile hybrid application. QR code dapat digunakan
sebagai identitas bibit kelapa sawit dan digunakan sampai bibit sampai di
penanaman. Diharapkan pengguna dapat memantau lokasi bibit dan data lainnya
dengan aplikasi. Berdasarkan latar belakang diatas maka penulis tertarik untuk
3
melakukan penelitian di Dinas Perpustakaan dan Arsip Kota Pekanbaru berjudul

“Rancang Bangun Aplikasi Tracking Bibit Kelapa Sawit dengan QR Code
Berbasis Mobile Hybrid Application”
1.2 Rumusan Masalah

Berikut ini merupakan rumusan masalah dari latar belakang yang dihadapi
sebagai berikut:
1. Bagaimana cara membuat aplikasi yang mudah digunakan oleh pegawai
PTPN V tentang pengelolaan data bibit?
2. Bagaimana cara membuat aplikasi yang dapat mencatat perubahan status
pengiriman bibit?
3. Bagaimana cara membuat aplikasi yang dapat menggunakan online dan
offline database?
1.3 Tujuan Penelitian

Adapun tujuan penelitian ini sebagai berikut:
1. Mengimplementasikan teknologi aplikasi mobile dalam pengelolaan
pengiriman dan pendataan bibit kelapa sawit dengan pembuatan purwarupa
aplikasi tracking bibit berbasis mobile
1.4. Batasan Masalah

Adapun batasan masalah dari aplikasi tracking bibit kelapa sawit dengan
QR code yang dibangun oleh penulis sebagai berikut:
1. Penulis hanya mengembangkan aplikasi mobile untuk akun pengguna,

sedangkan aplikasi berbasis web untuk akun administrator dikembangkan
oleh Sub Bagian Teknologi Informasi PTPN V
2. Akun administrator tidak dapat login di aplikasi mobile yang penulis
kembangkan untuk alasan keamanan data perusahaan
4
3. Pengelolaan akun pengguna dan data bibit hanya dapat dilakukan oleh akun
administrator, sehingga dua hal tersebut tidak dapat dilakukan dalam aplikasi
mobile yang penulis kembangkan.
1.5 Sistematika Penulisan

Laporan Sistematika penulisan laporan tugas akhir ini terdiri dari pokok-
pokok permasalahan yang dibahas pada masing-masing bab yang diuraikan
menjadi beberapa bagian:
BAB I PENDAHULUAN
Bab ini berisi uraian tentang latar belakang, perumusan masalah, tujuan
penelitian, manfaat penelitian, batasan masalah dan sistematika penulisan.
BAB II TINJAUAN PUSTAKA
Tinjauan pustaka berisi tentang penelitian terkait dan teori-teori yang

digunakan dalam perancangan sistem.
BAB III METODOLOGI PENELITIAN
Metodologi penelitian berisi tentang langkah-langkah perancangan dan

proses pembuatan sistem.
BAB IV HASIL DAN PEMBAHASAN
Hasil dan pembahasan berisi tentang laporan realisasi dan penerapan

perancangan yang telah dilakukan, sekaligus mengevaluasi hasil yang
diperoleh beserta pengujian dan analisis pengujian.
BAB V KESIMPULAN DAN SARAN
Bab ini berisi tentang simpulan hasil penelitian yang diperoleh sesuai
dengan tujuan penelitian serta memuat saran mengenai problematika,
solusi, dan pengembangan kedepannya.
5
DAFTAR PUSTAKA
LAMPIRAN
6
BAB II
LANDASAN TEORI
2.1 Teori yang Relevan

2.1.1 Aplikasi Mobile
Pengertian aplikasi mobile adalah aplikasi perangkat lunak yang dibuat
khusus untuk dijalankan di dalam tablet dan juga smartphone. Umumnya,
developer aplikasi mobile memerlukan Intergrated Development Environments
(IDE) dan Software Development Kit (SDK) untuk pengembangan dari aplikasi
mobile pada platform yang sesuai. Saat ini pengembangan aplikasi mobile
berkembang pesat. Hal ini menyebabkan banyaknya minat untuk memulai
mengembangkan aplikasi mobile pada platform populer. Terdapat dua platform
yang dipakai oleh mayoritas masyarakat, yaitu Android dan iOS (Irwansyah dan
Moniaga, 2012).
Android adalah sebuah sistem operasi dari Google. Android bersifat open
source dan gratis. Android SDK dari Google memuat semua fitur yang
dibutuhkan setiap orang yang ingin mengembangkan aplikasi Android. Developer
aplikasi juga dapat memanfaatkan fitur-fitur Android lengkap dengan logika
kompleks dan user experience. Android telah menjadi sebuah sistem operasi yang
sepenuhnya dapat diedit oleh banyak brand smartphone. Saat ini mayoritas
smartphone yang digunakan oleh masyarakat menggunakan Android sebagai
sistem operasinya (Gok dan Khanna, 2013).
iOS adalah sistem operasi yang dikembangkan oleh perusahaan Apple
untuk ponsel iPhone, tetapi kemudian berkembang dan dapat digunakan ke dalam
perangkat Apple lainnya seperti iPod Touch, Apple TV, dan iPad (Adelphia,
2015). Sistem iOS bersifat tertutup, sehingga sistem operasi ini tidak dapat
ditemukan di perangkat manapun selain merek Apple. Terdapat beberapa fitur
menarik pada sistem operasi iOS, seperti desain yang elegan, upgrade sistem yang
mudah, dan tampilan yang user friendly. Dibalik banyak kelebihan, tentu iOS tak
luput dari beberapa kelemahan. Perangkat seperti iPhone yang menggunakan iOS
7
tidak dapat menggunakan memori eksternal dan harga yang relatif tinggi. Dengan
beberapa kelemahan ini, iPhone tetap menjadi salah satu perangkat yang banyak
digunakan dalam masyarakat.
2.1.2 Database Management System (DBMS)

Database management telah berkembang dari aplikasi khusus komputer
menjadi komponen utama dari kemajuan computing environment. Sistem
database telah menjadi bagian yang paling penting dalam pendidikan ilmu
komputer (Gupta, 2007). DBMS dirancang untuk mengelola suatu database dan
dapat menjalankan operasi penghasil data yang diminta oleh user. Penyimpanan
data sebelum adanya DBMS disimpan dalam bentuk text file pada sistem operasi.
Cara ini memiliki banyak kekurangan seperti masalah manajemen data yang
buruk dan keamanan data yang disimpan. Kekurangan inilah yang dapat diatasi
dengan hadirnya DBMS. DBMS yang digunakan penulis adalah Firebase dan
SQLite.
Firebase adalah DBMS yang unik dan berbeda dengan database lainnya.
Setiap database Firebase disimpan dalam bentuk Javascript Object Notation
(JSON). Struktur yang berbentuk seperti array ini sangat fleksibel untuk berbagai
tipe data. Setiap nilai data dalam database memiliki unique path untuk
mengidentifikasinya. Unique path mendeskripsikan root atau jalur navigasi untuk
mendapatkan sebuah nilai data dalam database (Cheng, 2017). SQLite merupakan
salah satu open source database yang dirancang khusus untuk menyimpan data
pada perangkat yang memiliki memori terbatas. Penggunaan SQLite hampir sama
dengan MySQL karena mendukung penggunaan standar relasional database
(Junindar, 2017).
2.1.3 Hypertext Markup Language (HTML)

HTML adalah sebuah markup language yang dirancang untuk membuat
halaman web dan informasi lain dan dapat dilihat melalui browser. HTML
memiliki format text yang memungkinkan pengguna membaca dan mengubah file
HTML menggunakan text editor (Siswoutomo, 2005). File HTML mirip dengan
8
file teks biasa, tetapi dalam file HTML sebuah tulisan bisa memuat instruksi yang
ditandai dengan kode atau lebih dikenal dengan tag tertentu. HTML merupakan
bahasa dasar dalam pembuatan web, tetapi saat ini pemrograman web telah
menggunakan banyak kombinasi bahasa pemrograman.
2.1.4 TypeScript
TypeScript adalah sebuah superset dari JavaScript yang menambahkan
kesan lebih object oriented sehingga menyerupai pemrograman .NET yang
mampu melakukan compiling JavaScript dan dapat dijalankan di berbagai
browser (Maharry, 2013). JavaScript adalah bahasa pemrograman web yang
bersifat Client Side Programming Language. Client Side Programming Language
adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client.
Aplikasi client yang dimaksud merujuk kepada web browser. Bahasa
pemrograman client side berbeda dengan bahasa pemrograman server side seperti
PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.
JavaScript memiliki fitur: high-level programming language, client-side, dan
berorientasi objek.
Karena TypeScript merupakan superset dari JavaScript, maka JavaScript
murni dapat dijalankan dalam TypeScript. Framework JavaScript seperti jQuery
dan AJAX dapat digunakan dalam TypeScript. TypeScript bertujuan agar
JavaScript cocok untuk pengembangan berskala aplikasi. TypeScript bersifat
open source sehingga dapat digunakan dengan gratis. Namun, penggunaan
TypeScript masih sedikit sehingga dokumentasi dari TypeScript tidak sebanyak
bahasa pemrograman popular saat ini.
2.1.5 Syntactically Awesome Style Sheets (Sass)

Sass merupakan preprocessor dari Cascading Style Sheet (CSS). CSS
merupakan aturan untuk mengatur beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemograman. Sass adalah sebuah bahasa preprosessor yang dirancang dan
dikembangkan oleh Hampton Catlin dan Natalie Weizenbaum. Ketika SassScript
9
di-compile akan menghasilkan beberapa rule CSS untuk berbagai selector seperti
spesifikasi pada file Sass. Sass dapat memantau file .sass atau .scss dan
menghasilkan keluaran file .css kapanpun file .sass atau .scss disimpan (Prabhu,
2015).
2.1.6 JavaScript Object Notation (JSON)

JSON adalah salah satu struktur data JavaScript untuk mendefinisikan
objek. Model struktur data JSON sekarang telah menjadi salah satu standar untuk
pertukaran data yang ringan, sama populernya dengan XML (Sidik, 2012).
Memanipulasi data JSON dapat dilakukan menggunakan JavaScript. Setiap
elemen dari objek JSON yang diakses menggunakan atributnya. Lalu setiap data
dalam elemen objek JSON disimpan dalam array. PHP memberikan dukungan
dengan menyediakan beberapa ekstensi yang memungkinkan format data JSON
dapat dimanipulasi langsung oleh PHP. Salah satu fiturnya adalah WebService
JSON.
WebService JSON adalah suatu layanan web yang menggunakan JSON
sebagai format pertukaran datanya. Fitur ini dapat membuat layanan web berbasis
PHP dengan output JSON. Fungsi dasar untuk JSON dalam PHP adalah
json_encode() dan json_decode(). Fungsi json_encode()
memungkinkan data array pada PHP diubah menjadi format objek JSON.
Sebaliknya, Fungsi json_decode() memungkinkan objek JSON diubah
menjadi data array.
2.1.7 Structured Query Language (SQL)

SQL adalah bahasa standar yang digunakan untuk melakukan akses dan
manipulasi database. Lebih tepatnya, SQL adalah bahasa standar untuk database
relasional (Sidik, 2012). Perintah SQL akan disusun menjadi string agar bisa
digunakan. Setelah string SQL disusun, PHP dapat menjalankan perintah untuk
melakukan akses dan manipulasi database. SQL terdiri dari dua bahasa, yaitu
Data Definition Language (DDL) dan Data Manipulation Language (DML).
DDL digunakan untuk mendefinisikan, mengubah, serta menghapus database dan
10
objek-objek didalamnya. Berbeda dengan DDL, DML berfungsi untuk

memanipulasi data yang terdapat dalam tabel.
2.1.8 Web Browser

Web browser adalah aplikasi perangkat lunak yang memungkinkan
penggunanya untuk berinteraksi dengan teks, image, video, games, dan informasi
lainnya yang berlokasi pada halaman web pada World Wide Web (WWW) atau
Local Area Network (LAN). Teks dan image pada halaman web dapat berisi
hyperlink ke halaman web lain pada website yang sama maupun berbeda
(Limantara, 2009). Web browser membantu user untuk mengakses informasi yang
disediakan pada banyak website dengan cepat dan mudah. Saat ini banyak web
browser yang tersedia dengan berbagai kelebihan. Terdapat beberapa web
browser yang lazim digunakan seperti Mozilla Firefox, Google Chrome, dan
Safari.
2.1.9 Node.js
Node.js merupakan sebuah perangkat lunak yang dirancang untuk
mengembangkan aplikasi berbasis web dengan menggunakan bahasa
pemrograman JavaScript (Nugroho, 2016). Node.js membuat JavaScript dapat
berjalan di sisi server seperi PHP. Node.js juga memiliki HTTP server library
sehingga memungkinkan untuk menjalankan server web tanpa menggunakan
aplikasi seperti Apache dan Nginx. Berbeda dengan PHP, Node.js bersifat non-
blocking sebagaimana JavaScript bekerja. Arti dari non-blocking adalah Node.js
hanya mengeksekusi thread yang terlibat (memiliki event). Sifat ini juga dapat
disebut sebagai single-threaded.
2.1.10 Ionic Framework

Ionic adalah sebuah framework yang dapat membuat hybrid mobile
application dengan teknologi web seperti HTML5, CSS, dan JavaScript (Yusuf,
2016). Ionic menyediakan berbagai komponen yang dapat digunakan oleh
pengembang aplikasi. Komponen-komponen pada Ionic sangat mirip dengan
11
komponen-komponen native yang sering digunakan dalam aplikasi mobile. Fitur

dari framework ini seperti modal, gestures, popups, dan notification telah
disediakan dan dapat dimodifikasi sesuai dengan kebutuhan. Ionic diciptakan
dengan AngularJS. AngularJS merupakan framework JavaScript yang paling
sering digunakan dan diuji di dunia. Oleh karena itu, developing menggunakan
Ionic semakin mudah dengan banyak kelebihan fitur dari AngularJS.
2.1.11 Apache Cordova

Apache Cordova adalah sebuah teknologi yang dapat membuat aplikasi
web dibentuk menjadi sebuah native mobile application. Aplikasi yang diciptakan
dengan menggunakan Cordova disebut sebagai hybrid application. Hybrid
Application dalam konteks yang mengacu pada Cordova sebenarnya merupakan
aplikasi web yang dibentuk dalam sebuah komponen penampil di aplikasi native.
Perbedaan dari aplikasi web dan aplikasi native adalah aplikasi native mendapat
akses terhadap fitur hardware dari perangkat. Jadi, aplikasi hybrid tampil
layaknya aplikasi web dan mendapat akses penuh dari perangkat (Yusuf, 2016).
2.1.12 Mobile Hybrid Application

Sangat penting untuk mengetahui perbedaan antara mobile web, mobile
hybrid, dan mobile native application. Mobile web application bisa diakses
menggunakan web browser dan didesain untuk memiliki tampilan yang
responsive. Tampilan mobile web application harus bisa beradaptasi dengan
ukuran resolusi layar smartphone maupun tablet. Dibutuhkan koneksi internet
untuk mengakses mobile web application. Aplikasi ini bukan secara khusus
ditujukan untuk smartphone, tetapi aplikasi ini dapat dirancang sehingga dapat
menyerupai mobile native application. Tetapi, mobile web application memiliki
kelemahan. Aplikasi ini tidak sepenuhnya dapat mengakses fitur native yang ada
pada smartphone, seperti fitur geolocation dan storage (Saleh, 2014).
Walaupun mobile hybrid dan mobile native application memiliki format
fisik yang sama, masing-masing aplikasi ini dikembangkan dengan menggunakan
bahasa pemrograman yang jauh berbeda. Mobile hybrid application
12
dikembangkan dengan bahasa pemrograman yang biasa digunakan untuk web

(HTML, CSS, dan JavaScript), sedangkan mobile native application
dikembangkan bahasa pemrograman platform mobile (Java untuk Android dan
Objective-C untuk iOS). Ketika mengembangkan sebuah aplikasi native, aplikasi
tersebut hanya dapat digunakan pada satu platform. Aplikasi harus dibuat ulang
dalam bahasa pemrograman lain dengan mengikuti dan mengimplementasi ulang
logika pada aplikasi sebelumnya.
Mengembangkan mobile hybrid application memiliki banyak keuntungan.
Pengembang dapat menggunakan code base yang sama (HTML, CSS, dan
JavaScript) pada setiap platform. Semua logika proses pada aplikasi
diimplementasikan dengan satu bahasa pemrograman, yaitu JavaScript. Waktu
yang dibutuhkan untuk mengembangkan aplikasi berbagai platform menjadi
sangat singkat dan efisien. Kebutuhan resource untuk membuat aplikasi dengan
implementasi hybrid dapat diminimalisasi dibanding menggunakan implementasi
native.
2.1.13 Tracking System

Menurut Kamus Besar Bahasa Indonesia, tracking adalah proses, cara, dan
perbuatan untuk mencari atau menuruti jejak. Tracking system adalah sebuah
sistem yang digunakan untuk mengamati objek yang berpindah dan menyediakan
data lokasi yang dapat diproses menjadi informasi terhadap penggunanya.
Package tracking merupakan salah satu proses yang dapat digunakan dalam
tracking system. Package tracking adalah proses pencatatan lokal barang yang
dikirim di berbagai titik waktu untuk memverifikasi keasliannya dan memperbarui
lokasi barang dalam pendataan (Carroll, 2001).
Proses verifikasi dapat dilakukan pada setiap checkpoint pengantaran
barang. Hal ini dilakukan dengan memperbarui data lokasi bibit berdasarkan ID
barang tersebut. Sehingga pergerakan barang setiap melewati checkpoint dapat
dipantau. Untuk melihat pergerakan barang, dibutuhkan ID bibit sebagai input.
Output yang ditampilkan adalah rekam jejak perjalanan barang melewati
checkpoint berdasarkan timestamp.
13
2.1.14 Quick Response (QR) Code

QR code adalah sebuah gambar dua dimensi yang dapat digunakan untuk
menyimpan data berbentuk teks, mulai dari numeric, alfanumerik, dan biner code.
Penggunaan QR code saat ini sudah banyak diterapkan di berbagai industri. QR
code dapat menyimpan berbagai data spesifik, seperti identification number, kode
produksi, label harga, dan verification code. QR code pertama kali diperkenalkan
pada tahun 1994 oleh sebuah perusahaan yang bergerak di bidang otomotif di
Jepang, Denso Corporation. QR code juga dikenal sebagai simbol penandaan
objek yang berbentuk blackbars pattern (Nugraha, 2011).
2.1.15 Black Box Testing

Black box testing adalah metode pengujian yang terfokus pada
terpenuhinya kebutuhan (requirement) yang disebutkan dalam spesifikasi (Fatta,
2017). Cara yang dilakukan untuk menguji adalah menjalankan atau
mengeksekusi modul pada sistem. Setelah itu diamati apakah modul
menghasilkan output yang sesuai dengan perancangan.
2.1.16 Usability Testing

Usability testing merupakan analisa yang dilakukan untukm menentukan
tingkat kemudahan pengguna menggunakan antarmuka sebuah sistem. Sistem
dapat disebut usable apabila fungsi-fungsi yang ada di dalamnya dapat digunakan
dan dijalankan secara efektif, efisien, dan memuaskan. Evaluasi akan dilakukan
sebagai pengujian kesesuaian dan kebutuhan aplikasi telah terpenuhi (Firmansyah,
2018).
2.1.17 Usefulness, Satisfaction, and Ease of Use (USE) Questionnaire

Usability testing sering menggunakan USE Questionnaire sebagai metode
kuesioner. Pertanyaan yang diberikan dengan metode ini adalah pertanyaan umum
yang mencakup kebergunaan, kemudahan penggunaan, kemudahan pembelajaran,
dan kepuasan (Firmansyah, 2018).
14
2.1.18 Skala Likert

Skala Likert adalah sebuah skala pengukuran kuesioner yang diberikan
pada pengguna dengan bobot tertentu pada tiap-tiap pertanyaannya. Pilihan bobot
pada Skala Likert yaitu Sangat Setuju (SS) bernilai 5, Setuju (S) bernilai 4, Netral
(N) bernilai 3, Tidak Setuju (TS) bernilai 2, Sangat Tidak Setuju (STS) bernilai 1
(Syofian, 2015).
2.2 Penelitian Terdahulu

Berdasarkan tinjauan pustaka yang telah dilakukan, beberapa penelitian
terkait sebagai berikut.
Tabel 2.1 Penelitian terkait dengan aplikasi tracking bibit kelapa sawit
No Penulis Judul Tahun Hasil
1. Alvianto Aplikasi sistem 2017 Sistem dapat memonitor
Romansyah, pelacakan kinerja setiap kendaraan yang
Heru pengiriman pada digunakan oleh sopir
Supriyono truk pengangkut sehingga dapat dilakukan
barang berbasis penilaian terhadap sopir
android tersebut, memberikan
informasi proses
pengiriman sehingga
admin dapat mengetahui
lokasi barang dan
meneruskan kepada
customer, memberikan
informasi lokasi serta
status kendaraan sehingga
admin dapat
memperkirakan waktu
pengiriman
2. Herdiana Aplikasi ekspedisi 2017 Sistem dapat melakukan
Sefriani, Elis barang berbasis pengecekan status
Hernawati, web (studi kasus pengiriman barang,
Ferra Arik pada PT Hasanah mengubah status
Tridalestari Multiguna pengiriman barang,
Ekspres) memasukkan data
pengiriman barang. Sistem
juga menyediakan fitur
untuk menyampaikan
keluhan terkait barang
15
yang sudah dikirim atau

barang hilang melalui
pesan, fitur grafik
perkembangan pengiriman
barang, dan fitur laporan
pengiriman setiap
bulannya
3. Ayu Laksmi Rancang bangun 2015 Sistem dapat membantu
Pandhita, aplikasi android petugas mencari dan
Herman berbasis lokasi mengetahui lokasi
Yuliansyah untuk pencarian distribution point dalam
distribution point jangkauan jarak tujuh
(studi kasus PT meter
Telkom Indonesia
Kandatel Pati
Jawa Tengah)
4. Andi Juansyah Pembangunan 2015 Sistem dapat membantu
aplikasi child orang tua mengetahui
tracker berbasis lokasi anak, membantu
Assisted – Global anak menghubungi orang
Positioning tua dengan cepat melalui
System (A-GPS) fitur sos yang dapat
dengan platform mengirimkan notifikasi
android sos ke smartphone orang
tua dan kemudian
menghubungi nomor
telepon orang tua secara
otomatis
5. Nuchvi Tracking 2015 Sistem dapat melacak
Rachmat, Adi kendaraan mobil lokasi mobil,
Muhajirin, dengan mengirimkan koordinat
Mukhsin pemanfaatan GPS lokasi mobil secara
berbasis android realtime, memiliki fitur
peta untuk menunjukkan
posisi mobil secara nyata.
Sistem dapat mengurangi
risiko tindak kejahatan
pencurian mobil
6. Dewi Yenny Aplikasi Sistem 2014 Sistem ini dapat
Sitanggang, Pengecekan Tarif mempermudah konsumen
Lena dan Tracking yang menggunakan
Magdalena, Status Pengiriman handphone berbasis Java
Deny Martha Barang dalam tracking paket yang
Menggunakan dikirim. Pengintegrasian
Ponsel Berbasis aplikasi pengecekan
Java tracking barang belum
16
dapat dikorelasikan
dengan database asli
perusahaan
7. Ichsan Indra Aplikasi 2016 Sistem ini telah berhasil
Wahyudi, Monitoring dibangun mengikuti
Aridhanyati Pengiriman pendekatan model proses
Arifin Barang dengan waterfall. Algoritma
Algoritma Dijsktra telah berhasil
Dijkstra diimplementasikan untuk
mendapatkan rute
pengiriman barang
terpendek
8. Ria Setiawanti Analisis dan 2012 Analisis dan perancangan
Perancangan sistem ini akan
Sistem Pelacakan mempermudah PT.
Pengiriman Prima Express untuk
Barang Berbasis mengembangkannya pada
WAP dan SMS tahap selanjutnya. Sistem
yang dihasilkan berbasis
WAP yang dapat diakses
secara online oleh
user
9. Noventa Perancangan 2016 Sistem ini meningkatkan
Pungki Aplikasi fasilitas untuk
Ristantyo Pemantauan kenyamanan konsumen
Lokasi Barang dalam menggunakan
Auto-Update layanan jasa pengiriman
Berbasis Android tersebut. Sistem ini dapat
untuk Jasa menampilkan informasi
Pengiriman paket, lokasi kurir yang
Barang pada sedang membawa paket,
Harkirana Cargo dan dapat melihat status
Yogyakarta pengirim
10. Setiawan Aplikasi Tracking 2017 Sistem ini menggunakan
Dimas Pengiriman desain responsive ini
Arimurti Barang memberikan informasi
Menggunakan detail dan progress barang
Responsive Web yang dikirim melalui jasa
Desain pengiriman barang kafila
Express. Sistem ini
membutuhkan koneksi
internet untuk
menjalankan aplikasi baik
untuk user maupun admin
17
18
BAB III
METODOLOGI PENELITIAN
3.1 Tempat Penelitian

Penelitian dilakukan di Kantor Pusat PT Perkebunan Nusantara V yang
berada di Jl. Rambutan No. 43, Kec. Marpoyan Damai, Kota Pekanbaru.
3.2 Identifikasi Masalah
Tahap identifikasi masalah dilakukan oleh penulis dan ditemukan
permasalahan yang akan dirumuskan menjadi topik penelitian. Tahap ini
diidentifikasikan sebagai berikut:
1. Bibit yang dikirim sering hilang, jumlah bibit yang dikirim tidak sesuai
dengan jumlah bibit yang diterima. Sehingga, untuk memecahkan masalah
kehilangan, dibuat ID untuk setiap bibit. ID tersebut ditampilkan dalam
bentuk QR code dan dicantumkan pada setiap bibit. QR code tersebut yang
akan digunakan dan dipindai melalui aplikasi untuk pemantauan status
bibit ataupun melakukan perubahan data bibit.
2. Ada kemungkinan bibit yang dikirim dapat ditukar dengan bibit lain
diperjalanan. Bibit yang dibeli oleh PTPN V merupakan bibit dengan
kualitas terbaik. Untuk memecahkan masalah ini dapat dilakukan
pembuatan ID untuk setiap bibit. Peletakan ID bibit dapat diletakkan pada
polybag bibit.
3. Kualitas jaringan internet di berbagai pembibitan tidak memungkinkan
untuk mengakses online database. Sementara, penggunaan fungsi
pengubahan data status bibit banyak dilakukan di tempat pembibitan.
Untuk itu penggunaan fungsi tersebut dirancang dengan melibatkan offline
database.
Berdasarkan identifikasi tersebut maka diangkatlah permasalahan utama pada
penelitian ini yaitu bagaimana membangun aplikasi tracking bibit kelapa sawit
yang tepat guna, efisien dan efektif.
19
3.3 Metode Pengumpulan Data

Metode pengumpulan data dalam memperoleh informasi yang dilakukan
Penulis, terbagi menjadi dua metode, yaitu metode wawancara dan metode studi
kepustakaan.
3.3.1 Metode Wawancara

Metode yang penulis lakukan pertama kali untuk mengumpulkan data
adalam mewawancarai pegawai PTPN V. Pemilihan pegawai sebagai narasumber
dilakukan pada pegawai yang bekerja di bagian informasi dan teknologi, bagian
pengiriman bibit di pembibitan dan bagian penerimaan bibit di kebun. Penulis
dapat menghimpun data kebun dan kebutuhan I/O(Input/Output) dalam
pengiriman bibit.
3.3.2 Metode Observasi

Penelitian ini dilakukan secara langsung dengan mengobservasi dan
mempelajari mekanisme pengiriman bibit secara manual yang telah dilakukan
oleh PTPN V. Kemudian penulis meminta data laporan pengiriman bibit yang
akan digunakan sebagai acuan penggunaan variabel pada aplikasi dan database.
3.4 Metode Pengembangan Sistem

Metode penelitian yang penulis gunakan adalah metode waterfall. Metode
waterfall merupakan model yang bersifat sistematis dan linear, yang artinya
membangun sistem secara berurutan (Rahayu, 2016). Penulis memilih metode
Waterfall karena metode ini memiliki rangkaian kerja yang jelas. Kebutuhan
20
sistem harus didefinisikan secara jelas diawal pengerjaan sistem. Metode ini
sering digunakan oleh penganalisa sistem pada umumnya. Berikut ini alur tahapan
pengerjaan sistem yang penulis gunakan.
Gambar 3.1 Tahapan pengerjaan sistem
3.5 Analisis Kebutuhan Sistem

Penulis melakukan beberapa tahap analisis, yaitu analisis kebutuhan input,
analisis kebutuhan output, analisis kebutuhan proses, analisis kebutuhan perangkat
lunak, dan analisis kebutuhan perangkat keras.
3.5.1 Analisis Kebutuhan Input

Terdapat beberapa kebutuhan input pada sistem. Pengguna sistem adalah
staf PTPN V bagian perawatan, pengiriman, dan penerimaan bibit. Staf tersebut
harus memiliki username dan password dari pengguna untuk login. Data bibit
dapat dilihat saat pengguna melakukan pemindaian kode QR bibit tersebut.
21
Pengguna dapat memasukkan data bibit ke online database (Firebase) maupun

offline database (SQLite) ketika berada di tempat yang sulit untuk mengakses
internet. Untuk mengubah dan menghapus data input bibit hanya dapat dilakukan
dalam offline database. Pengguna juga dapat mengubah data status bibit di online
database maupun offline database. Proses mengubah status bibit dilakukan saat
ada bibit yang mati, pengiriman bibit, dan penerimaan di kebun.
3.5.2 Analisis Kebutuhan Output

Kebutuhan output dari sistem adalah kemampuan menampilkan data
setelah kode QR bibit dipindai lewat sistem. Sistem juga dituntut untuk dapat
menampilkan pemberitahuan setelah melakukan penambahan, pengubahan,
ataupun penghapusan data di database. Selain itu tampilan dari sistem harus
sederhana dan mudah dimengerti oleh staf PTPN V.
3.5.3 Analisis Kebutuhan Proses

Adapun proses yang dibutuhkan dalam sistem ini sebagai berikut:
1. Proses login. Proses ini diawali dengan memasukkan username dan
password. Hasil masukan kemudian di-check. Prosesnya adalah
membandingkan data masukan dengan data dari database.
2. Proses page loading. Proses ini menghasilkan redirecting ke halaman yang
sesuai dengan perintah pengguna. Contohnya tombol ‘Input Bibit’ untuk
melihat halaman input bibit.
3. Proses scanning kode QR. Proses ini dilakukan untuk mendapatkan
identification code bibit.
4. Proses action loading. Proses terjadi saat pemasukan, pengeditan, dan
penghapusan data bibit.
3.5.4 Analisis Kebutuhan Perangkat Lunak
Kebutuhan perangkat lunak dalam sistem ini terdiri dari dua sisi, yaitu sisi
developer dan sisi pengguna. Kebutuhan perangkat lunak pada sisi developer
sebagai berikut:
22
1. Text editor. Aplikasi ini digunakan untuk membuat dan memodifikasi script
pada sistem.
2. Browser. Aplikasi ini digunakan sebagai live preview sistem pada komputer.
Browser dapat menggantikan Smartphone yang merupakan platform
sebenarnya dari sistem.
3. Smartphone. Walaupun sistem dapat dijalankan dengan Browser, penulis
perlu mengoperasikan di platform sebenarnya. Hal ini dilakukan untuk
memeriksa pengoperasian sistem dapat bekerja dengan baik dan benar.
4. Command Prompt. Aplikasi ini digunakan untuk mengeksekusi script yang
telah dibuat dengan text editor.
5. Node.js. Aplikasi ini digunakan agar JavaScript dapat berjalan di sisi server
lokal.
6. Ionic dan Cordova. Framework ini membantu penulis untuk membangun
sistem.
Kebutuhan perangkat lunak pada sisi pengguna tidak terlalu rumit. Kebutuhan
minimum perangkat lunak yang diperlukan oleh pengguna adalah sistem operasi
Android 4.4 ataupun iOS 8 pada smartphone yang digunakan.
3.5.5 Analisis Kebutuhan Perangkat Keras

Kebutuhan perangkat keras dalam sistem ini terdiri dari sisi developer dan
sisi pengguna, sama seperti kebutuhan perangkat lunak. Kebutuhan perangkat
keras pada sisi developer sebagai berikut:
1. Komputer. Perangkat ini digunakan dalam proses system developing.
Perangkat ini juga digunakan untuk menguji sistem sebelum digunakan di
platform yang sebenarnya.
2. Smartphone. Perangkat ini digunakan untuk mengoperasikan sistem.
Pengujian sistem dengan smartphone memastikan bahwa sistem dapat
bekerja pada platform yang sebenarnya.
23
Kebutuhan perangkat keras pada sisi pengguna hanya membutuhkan

smartphone. Smartphone digunakan oleh pengguna untuk menjalankan sistem.
Spesifikasi smartphone yang digunakan penulis untuk penelitian ini yaitu:
1. Android Version 8.0.0
2. Penyimpanan Internal 32 Gigabyte
3. Random Access Memory 4 Gigabyte
4. Rear Camera dengan Resolusi 19 Megapixel
3.6 Perancangan Sistem

Perancangan sistem ini terdiri atas tiga bagian, yaitu perancangan Use
Case Diagram, Activity Diagram, Class Diagram, Flowchart, dan Entity
Relationship Diagram. Metode yang digunakan dalam perancangan adalah
metode perancangan data berarah, karena mudah untuk dipahami dan efisien.
Metode ini menggambarkan keseluruhan sistem yang akan dibuat.
3.6.1 Use Case Diagram

Use Case Diagram digunakan penulis untuk mendeskripsikan interaksi
antara pengguna dengan sistem, dapat dilihat pada Gambar 3.2.
24
Gambar 3.2 Use Case Diagram sistem

3.6.2 Flowchart
Perancangan sistem dengan flowchart secara umum menggambarkan dan
menyederhanakan rangkaian proses atau prosedur sehingga mudah dipahami
berdasarkan urutan proses. Gambar 3.3 menampilkan flowchart untuk halaman
login. Pengguna akan ditujukan ke halaman utama ketika verifikasi akun berhasil.
25
Gambar 3.3 Flowchart halaman login
Gambar 3.4 menampilkan flowchart untuk fitur cek status bibit. Pengguna
memindai kode QR yang memuat kode bibit. Setelah pemindaian, sistem akan
mencari kode bibit di database. Apabila kode bibit ditemukan, pengguna akan
dialihkan ke halaman data bibit.
26
Gambar 3.4 Flowchart fitur cek status bibit

27
Gambar 3.5 menampilkan flowchart untuk halaman input bibit. Pengguna

dapat memilih untuk menyimpan data input langsung ke online database
(Firebase) atau database lokal (SQLite).
28
Gambar 3.5 Flowchart halaman input bibit

Gambar 3.6 menampilkan flowchart untuk halaman penyimpanan offline
data input bibit. Pengguna dapat mengedit, menghapus, dan mengunggah data
input bibit.
29
Gambar 3.6 Flowchart halaman penyimpanan offline data input bibit

Gambar 3.7 menampilkan flowchart untuk halaman ubah status bibit ke
online database. Pengguna memasukkan data ubah status bibit sebelum memulai
30
memindai kode QR bibit. Setelah kode QR dipindai, sistem akan melakukan

pencarian data bibit. Apabila data bibit ditemukan, status bibit akan berubah.
Gambar 3.7 Flowchart halaman ubah status bibit ke online database

31
Gambar 3.8 menampilkan flowchart untuk halaman ubah status bibit ke

offline database. Pengguna memasukkan data ubah status bibit sebelum memulai
memindai kode QR bibit. Berbeda dengan proses ubah status bibit ke online
database, setelah pemindaian sistem tidak memeriksa kode bibit dan langsung
menyimpannya dalam array. Pemeriksaan kode bibit dilakukan di halaman
penyimpanan offline data ubah status bibit.
32
Gambar 3.8 Flowchart halaman ubah status bibit ke offline database

Gambar 3.9 menampilkan flowchart untuk halaman penyimpanan offline
data ubah status bibit. Pengguna memasukkan data ubah status bibit sebelum
memulai memindai kode QR. Pengguna hanya dapat memilih untuk mengunggah
atau menghapus data ubah status bibit.
33
Gambar 3.9 Flowchart halaman penyimpanan offline data ubah status bibit
34
3.6.3 Perancangan Database

Database dirancang untuk memiliki struktur yang baik sehingga dapat
digunakan dalam jangka waktu yang lama. Penulis menggunakan firebase dan
SQLite dalam perancangan sistem. Struktur database pada firebase dan SQLite
sedikit berbeda. Firebase digunakan sebagai online database dan SQLite
digunakan untuk offline database.
1. Struktur Data Firebase
Objek dari firebase adalah sebuah JSON. JSON memiliki format
data key-value dan ditulis didalam kurung kurawal. Sebuah objek JSON
berperan seperti tabel pada SQL. Berikut objek yang terdapat dalam
online database sistem ini.
a. Master
Objek ini memuat value tiap-tiap bibit yang didaftarkan dalam sistem.
Isi objek ini ditampilkan saat pemeriksaan data bibit dalam aplikasi.
Tabel 3.1 Objek master.json yang memuat data primer bibit
No Key Type Value
1. Id string identitas bibit
2. idgroup string identitas grup bibit saat dimasukkan

ke database
3. Asal string kode asal bibit
4. Klmpk string kode kelompok pembibitan
5. Lokasi string kode lokasi bibit terkini
6. Serbuk number nomor penyerbukan
7. Tgl string tanggal data bibit dimasukkan ke

database
8. Varietas string kode varietas bibit
b. Status
Objek ini memuat dan mendokumentasikan perubahan data pada objek
master.json. Data dalam objek ini tidak boleh diubah atau dihapus. Data
35
yang masuk didokumentasikan sebagai arsip perusahaan untuk keamanan

dan integritas data.
Tabel 3.2 Objek status.json yang memuat perubahan data status bibit
No Key Type Value
1. Id string identitas perubahan status bibit
2. id_bibit string identitas bibit
3. Ket string keterangan dalam perubahan status

bibit
4. lokasi_awal string kode lokasi awal bibit sebelum diubah
5. lokasi_akhir string kode lokasi bibit setelah diubah
6. Stat string kode status bibit yang berisi keterangan

afkir (mati), dalam pengiriman, dalam
pembibitan, atau dalam kebun (sudah
ditanam)
7. Waktu string tanggal dan waktu perubahan status

bibit
c. User
Objek ini memuat data akun pengguna sistem. Hanya pekerja di
pembibitan yang memiliki akun pengguna dalam aplikasi.
Tabel 3.3 Objek user.json yang memuat data pengguna
No Key Type Value
1. Uname string username yang digunakan pengguna

untuk login
2. Passw string kata sandi pengguna untuk login
3. Nama string nama pengguna
4. Nohp string nomor handphone pengguna
5. Lokbit string kode lokasi penempatan kerja

pengguna
36
d. Asalbit
Objek ini memuat data asal daerah bibit yang dimiliki di pembibitan
PTPN V. Data ini juga berisi keterangan dan penjelasan asal bibit yang
dibeli.
37
Tabel 3.4 Objek asalbit.json yang memuat asal daerah bibit
No Key Type Value
1. Id string identitas asal bibit
2. Kode string kode atau nama asal daerah bibit
3. Ket string keterangan dan deskripsi asal daerah

bibit
e. Kirbit
Objek ini memuat data pengiriman bibit. Data ini digunakan dalam
laporan pengiriman bibit.
Tabel 3.5 Objek kirbit.json yang memuat data pengiriman bibit
No Key Type Value
1. Id string identitas pengiriman bibit
2. Tujuan string kode lokasi tujuan pengiriman bibit
3. Waktu string tanggal dan waktu pengiriman bibit
4. nm_supir string nama sopir pengiriman bibit
5. nm_kawal string nama pengawal pengiriman bibit
6. no_ken string nomor kendaraan yang digunakan

untuk pengiriman bibit
7. no_spb string nomor surat permintaan barang
8. r_afdel string kode afdeling bibit
9. r_blok string kode blok bibit
f. Klmpk
Objek ini memuat data kelompok bibit. Data ini juga berisi keterangan
dan detail kelompok bibit.
Tabel 3.6 Objek klmpk.json yang menyimpan data kelompok bibit
No Key Type Value
38
1. Id string identitas kelompok bibit
2. Kode string kode atau nama kelompok bibit
3. Ket string keterangan kelompok bibit
g. Lokasi
Objek ini memuat data lokasi penempatan bibit. Data ini dapat memuat
lokasi pembibitan dan penanaman. Lokasi pembibitan dibagi menjadi dua,
yaitu pre nursery (PN) dan main nursery (MN).
Tabel 3.7 Objek lokasi.json yang memuat data lokasi pembibitan
No Key Type Value
1. Id string identitas lokasi bibit
2. Jenis string kode lokasi pembibitan, data dapat

berisi PN, MN, atau null
3. Kebun string nama lokasi bibit
4. Kode string kode lokasi bibit yang lebih spesifik
5. Ket string keterangan dan deskripsi lokasi bibit
h. Varietas
Objek ini memuat data varietas bibit. Varietas bibit yang dimiliki oleh
PTPN V disimpan di tabel ini
Tabel 3.8 Objek varietas.json yang memuat data varietas bibit
No Key Type Value
1. Id string identitas varietas bibit
2. Kode string kode atau nama varietas bibit
3. Ket string keterangan dan deskripsi varietas bibit
2. Struktur Data SQLite

39
SQLite memiliki sintaks yang mirip dengan SQL. Penulis

membuat setiap tipe data menjadi text untuk menyesuaikan SQLite dengan
tipe data string di Firebase. Hal ini berguna agar sistem tidak perlu
melakukan pengubahan tipe data saat proses pengunggahan data dari
SQLite ke Firebase. Berikut tabel yang terdapat dalam offline database
sistem ini.
40
a. Tabel Ubah Status

Tabel ini memuat data ubah status bibit. Kode bibit disimpan dalam
bentuk array untuk menyimpan banyak bibit dalam satu variabel.
Tabel 3.9 Tabel ubah status untuk menyimpan data status bibit
No Name Type Value
1. Id integer nomor identitas ubah status bibit

(primary key, auto increment)
2. id_bibit text identitas bibit, berbentuk array atau

kompilasi bibit-bibit yang dipindai
3. Ket text keterangan perubahan status bibit
4. lokasi_awal text kode lokasi awal bibit sebelum diubah
5. lokasi_akhir text kode lokasi bibit setelah diubah
6. Stat text kode status bibit yang berisi keterangan

afkir (mati), dalam pengiriman, dalam
pembibitan, atau dalam kebun (sudah
ditanam)
7. Waktu text keterangan waktu perubahan status
b. Tabel Tambah Bibit

Tabel ini memuat data input bibit. Pengguna akan menyimpan data
bibit dan jumlah yang akan dimasukkan kedalam firebase.
Tabel 3.10 Tabel tambah bibit yang menyimpan data dan jumlah bibit
No Key Type Value
1. Jumlah integer jumlah bibit yang ditambahkan
2. idgroup text identitas grup bibit saat dimasukkan ke

database (primary key)
3. Asal text kode asal bibit
4. Klmpk text kode kelompok pembibitan
5. Lokasi text kode lokasi bibit terkini
6. Serbuk text nomor penyerbukan

41
7. Tgl text tanggal data bibit dimasukkan
8. Varietas text kode varietas bibit
3.7 Implementasi
Implementasi dari aplikasi tracking bibit kelapa sawit dengan QR code
menggunakan bahasa pemrograman TypeScript, HTML, dan SQL. Penulis
menggunakan Ionic framework untuk membangun aplikasi hybrid. Aplikasi
hybrid dapat diekspor ke sistem operasi Android dan iOS.
3.8 Pengujian
Pengujian sistem dilakukan setelah aplikasi tracking bibit kelapa sawit
dengan QR code selesai dibangun. Pengujian dilakukan di Kantor Pusat PTPN V.
Pengujian dilakukan untuk membuktikan dan mendokumentasikan tingkat
keberhasilan sistem dalam mengatasi masalah pengelolaan bibit. Kepala Sub
Bagian Teknologi Informasi akan mengundang pengguna aplikasi yaitu pegawai
yang bekerja di pembibitan untuk melakukan pengujian aplikasi. Pertama, penulis
menjabarkan mekanisme penggunaan aplikasi kepada pengguna. Kemudian,
dilakukan demonstrasi pemakaian aplikasi. Setelah setiap pegawai mencoba
aplikasi, pegawai dapat menilai kesesuaian sistem dengan kebutuhan yang
diinginkan. Pengujian dilakukan dengan usability testing dan black box testing.
Untuk usability testing, penulis menggunakan quesionnaire yang diberikan pada
empat pegawai kantor pusat PTPN V dan enam pegawai pembibitan. Secara
bersamaan, usability testing dilakukan dengan black box testing dengan meminta
responden untuk menguji kesesuaian fungsi sistem sesuai dengan pernyataan
tentang sistem informasi tersebut. Kuesioner untuk usability testing pada pegawai
PTPN V dapat dilihat pada tabel 3.11.
Tabel 3.11 Tabel pernyataan usability testing
No
Pernyataan
.
42
1. Aplikasi dapat membantu Pegawai PTPN V dalam pendataan input

bibit
2. Aplikasi dapat mempermudah Pegawai PTPN V dalam pendataan
pengiriman bibit
3. Fitur QR Scan mempermudah Pegawai PTPN V mengidentifikasi
data bibit
4. Fitur simpan offline membantu Pegawai PTPN V yang bekerja di
daerah yang sulit mendapatkan akses internet
5. Fitur-fitur aplikasi mudah digunakan
6. Tombol-tombol pada aplikasi memberikan respon yang baik ketika
digunakan.
7. Cara penggunaan aplikasi mudah dipelajari
8. Cara penggunaan aplikasi mudah diingat
9. Aplikasi memiliki tampilan yang menarik
10. Aplikasi memiliki manfaat untuk Pegawai PTPN V
3.9 Analisa Hasil Pengujian

Analisa hasil dilakukan sebagai tahap setelah pengujian. Hal ini dilakukan
dengan menganalisa kelemahan dari aplikasi yang telah diuji untuk diperbaiki
kembali sampai mendapat penanganan proses sesuai dengan perancangan aplikasi.
3.10 Kesimpulan
Kesimpulan adalah tahapan terakhir dari metode waterfall. Pada tahap ini
didapatkan suatu simpulan dari aplikasi yang telah diselesaikan.
43
BAB IV
HASIL DAN PEMBAHASAN
4.1 User Interface (UI)

UI merupakan tampilan grafis dari komputer yang beroperasi dan
diprogram sedemikian rupa sehinggadapat dimengeri oleh pengguna (Aziza,
2019). Penulis membuat beberapa halaman untuk memisahkan berbagai fitur-fitur
kompleks yang ada pada sistem ini. Sistem ini terdiri dari beberapa halaman
utama, yaitu login, main menu, hasil scan, penambahan data, pengubahan status
data, penyimpanan offline, dan Frequently Asked Question (FAQ).
4.1.1 UI Halaman Login

Halaman login adalah halaman pertama yang dapat diakses oleh pengguna.
Pengguna dapat melakukan login di saat online maupun offline. Namun, pengguna
harus login secara online terlebih dahulu dan menyimpan informasi login sebelum
melakukan login secara offline. UI dari halaman login dapat dilihat pada gambar
4.1.
44
Gambar 4.1 Tampilan sistem halaman login

4.1.2 UI Halaman Main Menu
Setelah berhasil login, pengguna akan diarahkan ke halaman utama.
Halaman ini terdiri dari 3 tab, yaitu tab utama, tab tambah data, dan tab ubah
status data. UI dari halaman main menu dapat dilihat pada gambar 4.2, gambar
4.3, dan gambar 4.4.
45
Gambar 4.2 Tampilan menu utama sistem pada tab utama

46
Gambar 4.3 Tampilan menu utama sistem pada tab penambahan data
47
Gambar 4.3 Tampilan menu utama sistem pada tab pengubahan status data
4.1.3 UI Halaman Hasil Scan

Pada halaman main menu, terdapat fitur scan bibit. Fitur ini digunakan
untuk memindai QR code bibit, dan setelahnya pengguna diarahkan ke halaman
hasil scan untuk melihat detail data bibit. UI dari halaman hasil scan dapat dilihat
pada gambar 4.5 dan gambar 4.6.
48
Gambar 4.5 Tampilan sistem saat melakukan pemindaian
Gambar 4.6 Tampilan sistem detail data bibit setelah pemindaian

49
4.1.4 UI Halaman Penambahan Data

Halaman ini digunakan untuk menambah jumlah data bibit. Pengguna
dapat menambahkan data secara langsung ke online database atau menyimpan
penambahan data terlebih dahulu di offline database. UI dari halaman
penambahan data dapat dilihat pada gambar 4.7.
Gambar 4.7 Tampilan sistem pada halaman penambahan data
4.1.5 UI Halaman Pengubahan Status Data

Halaman pengubahan status bibit memiliki dua tab, yaitu tab online dan
tab offline sebagai referensi tujuan penyimpanan data. Setiap tab berisi
50
pengubahan status untuk kirim, terima, dan afkir bibit. UI dari halaman
pengubahan data dapat dilihat pada gambar 4.8 dan gambar 4.9.
Gambar 4.8 Tampilan sistem pada halaman pengubahan status data tab online
51
Gambar 4.9 Tampilan sistem pada halaman pengubahan status data tab offline
4.1.6 UI Halaman Penyimpanan Offline

Setelah pengguna menyimpan data ke offline database, data tersebut dapat
dilihat pada halaman penyimpanan offline. Halaman penyimpanan offline untuk
penambahan dan pengubahan data ditampilkan terpisah. UI dari halaman
penyimpanan offline dapat dilihat pada gambar 4.10.
52
Gambar 4.10 Tampilan sistem pada halaman penyimpanan offline
4.1.7 UI Halaman FAQ

Halaman ini bertujuan untuk memudahkan dan membantu pengguna
dengan beberapa pertanyaan-pertanyaan dasar seputar penggunaan sistem ini. UI
dari halaman FAQ dapat dilihat pada gambar 4.13.
4.2 Pengujian Sistem

4.2.1 Pengujian Login
Pengujian halaman login dilakukan untuk melihat akun dari database dapat
melakukan login dengan verifikasi yang benar dan sesuai. Pengujian dapat dilihat
pada gambar 4.14 dan gambar 4.15.
53
Gambar 4.14 Tampilan halaman login saat proses authentication
Gambar 4.15 Tampilan saat proses authentication berhasil
4.2.2 Pengujian Penambahan Data

Pengujian penambahan data dilakukan dengan penyimpanan online dan
offline database. Pengujian dapat dilihat pada gambar 4.16, gambar 4.17, gambar
54
Gambar 4.16 Tampilan halaman input saat pengisian data
Gambar 4.17 Tampilan saat proses input ke online database berhasil

55
Gambar 4.18 Tampilan saat proses input ke offline database berhasil
Gambar 4.19 Tampilan halaman data input yang tersimpan di offline database
4.2.3 Pengujian Scanning QR Code Bibit

Pengujian scanning QR code bibit dilakukan untuk memastikan scanning
bibit berjalan dengan baik. Pengujian dapat dilihat pada gambar 4.20, gambar
56
Gambar 4.20 Tampilan proses scanning QR code bibit
Gambar 4.21 Tampilan sistem detail data bibit setelah pemindaian berhasil
57
Gambar 4.22 Tampilan pop up apabila QR code yang di scan tidak valid
4.2.9 Usability Testing
Penulis menggunakan USE quesionnaire pada usability testing di sistem
ini. Pengujian ini dilakukan bersama empat pegawai kantor pusat PTPN V dan
enam responden pada pegawai pembibitan yang telah diajari penggunaan sistem.
Data respon dari usability testing ini akan dihitung dengan menggunakan skala
Likert. Hasil kuesioner komponen usefulness dapat dilihat pada tabel 4.1.
Tabel 4.1 Tabel komponen usefulness penerima bibit

Total Persentase
Total Jawaban
No Pertanyaan Skor (%)
SS S N TS STS
Aplikasi
dapat
membantu
Pegawai
1 7 3 47 94
PTPN V
dalam
pendataan
input bibit.
58
Aplikasi
dapat
mempermuda
h Pegawai
2 PTPN V 5 4 1 44 88
dalam
pendataan
pengiriman
bibit.
Fitur QR
Scan
mempermuda
3 h Pegawai 9 1 49 98
PTPN V
mengidentifik
asi data bibit
Fitur simpan
offline
membantu
Pegawai
PTPN V yang
4 6 4 46 92
bekerja di
daerah yang
sulit
mendapatkan
akses internet
Total 186
Rata-rata 9,3 93
Hasil kuesioner pada komponen ease of use pada pegawai PTPN V dapat
dilihat pada tabel 4.2.
Tabel 4.2 Tabel komponen ease of use pada pengguna

Total Persentase
Total Jawaban
SS S N TS STS
Fitur-fitur
aplikasi
1 7 3 47 94
mudah
digunakan
Tombol-
2 tombol pada 8 2 48 96
59
aplikasi
memberikan
respon yang
baik ketika
digunakan.
Total 95
Rata-rata 9,5 95
Hasil kuesioner pada komponen ease of learning pada pegawai PTPN V

dapat dilihat pada tabel 4.3.
Tabel 4.3 Tabel komponen ease of learning pada pengguna

Total Persentase
Total Jawaban
SS S N TS STS
Cara
penggunaan
1 6 4 46 92
sistem mudah
dipelajari.
Cara
penggunaan
2 6 2 2 44 88
sistem mudah
diingat.
Total 90
Rata-rata 9,0 90
Hasil kuesioner pada komponen satisfaction pada pegawai PTPN V dapat

dilihat pada tabel 4.4.
Tabel 4.4 Tabel komponen satisfaction pada pengguna

Total Persentase
Total Jawaban
SS S N TS STS
Aplikasi
memiliki
1 7 3 47 94
tampilan yang
menarik
Aplikasi
2 memiliki 7 3 47 94
60
manfaat untuk
Pegawai
PTPN V
Total 94
Rata-rata 9,4 94%
Hasil usability testing dari enam responden pegawai PTPN V dapat dilihat
pada tabel 4.5.
Tabel 4.4 Tabel hasil usability testing

No User Komponen Persentase Kepuasan
Sangat
1 Usefulness 93%
Memuaskan
Sangat
2 Ease of Use 95%
Pegawai PTPN Memuaskan
V Ease of Sangat
3 90%
Learning Memuaskan
Sangat
4 Satisfaction 94%
Memuaskan
4.2.10 Blackbox Testing

Penulis menggunakan blackbox testing untuk menguji sistem oleh orang
yang hanya mengetahui fungsi tiap fitur sistem tanpa mengetahui berbagai
prosedur kinerja tiap fungsi tersebut. Pengujian dilakukan dengan memberikan
kuesioner kepada 6 pegawai PTPN V. Hasil dari kuesioner tersebut akan
menghasilkan presentasi kebenaran sistem. Hasil pengujian sistem dapat dilihat
pada tabel 4.5.
Tabel 4.5 Tabel hasil blackbox testing

No Pernyataan Berhasil Tidak Berhasil
Pengguna dapat melakukan login
1 10
dengan akun masing-masing
Pengguna dapat menambahkan data
2 10
bibit ke online database
Pengguna dapat menambahkan data
3 10
bibit ke offline database
61
Pengguna dapat mengunggah data dari

4 10
offline database ke online database
Pengguna dapat melihat data bibit
5 dengan menggunakan fitur QR code 10
scan
Pengguna dapat mengubah status bibit
6 dan mengirim perubahan data ke online 10
database
Pengguna dapat mengubah status bibit
7 dan mengirim perubahan data ke offline 6
database
Sistem dapat mengatasi kesalahan
8 6
dalam penambahan data bibit
Sistem dapat mengatasi kesalahan
9 6
dalam pemindaian QR code bibit
Hasil black box testing dari sistem ini menunjukkan bahwa seluruh fungsi
sistem telah bekerja dengan benar.
62
BAB V
PENUTUP
5.1 Kesimpulan
Berdasarkan hasil penelitian Rancang Bangun Aplikasi Tracking Bibit
Kelapa Sawit dengan QR Code Berbasis Mobile Hybrid Application dapat
disimpulkan bahwa:
1. Sistem yang dibangun dapat menggunakan dua jenis database, yaitu Firebase
sebagai online database dan SQLite sebagai offline database.
2. Pengguna dapat melakukan login dengan akun yang telah diberikan oleh
administrator. Setiap aktivitas pengguna yang mengubah data pada database
dapat dilihat oleh administrator. Dokumentasi perubahan data status bibit
memberikan kemudahan dalam pengelolaan data bibit.
3. Sistem ini dapat menambahkan data bibit dengan jumlah besar dan dengan
durasi proses yang cukup singkat.
4. Menggunakan USE Quesionnaire, usability testing yang dilakukan pada
pengujian sistem bersama enam pegawai PTPN V menghasilkan persentase
usefulness 92,5%, ease of use 95%, ease of learning 91,67%, dan satisfaction
95%. Seluruh aspek mendapat nilai sangat memuaskan.
5. Hasil black box testing dari sistem ini menunjukkan bahwa seluruh fungsi
sistem telah bekerja dengan benar.
5.2 Saran
Pada Aplikasi Tracking Bibit Kelapa Sawit dengan QR Code Berbasis
Mobile Hybrid Application masih dapat dikembangkan. Berdasarkan berbagai
kekurangan yang ada pada sistem ini, dapat diberikan beberapa saran sebagai
berikut:
1. Performa sistem pada proses scanning perlu ditingkatkan kecepatan dan
efektifitasnya.
2. Pengujian sistem bisa dilakukan dengan metode White Box.
63
DAFTAR PUSTAKA
Askina, Nur. 2016. Teknologi Modern Terhadap Aktivitas Pertanian Masyarakat

Perkampungan Bukkang Mata Kelurahan Paccarakang Kecamatan
Biringkanayya Kota Makassar. Skripsi. Fakultas Ushuluddin, Filsafat dan
Politik. UIN Alauddin: Makassar.
Arimurti, Setiawan Dimas. 2017. Aplikasi Tracking Pengiriman Barang
Menggunakan Responsive Web Desain. Yogyakarta: Jurnal AKAKOM.
Aziza, Rifda Faticha Alfa dan Yahya Taufiq Hidayat. 2019. Analisa Usability
Testing Desain User Interface pada Website Tokopedia Menggunakan
Metode Heuristics Evaluation. Volume 13, No. 1. pp.7-11.
Cheng, Fu. 2017. Building Mobile Apps with Ionic 2 and Firebase. Auckland;
Apress Media.
Fatta, Hanif Al. 2007. Analisis dan Perancangan Sistem Informasi untuk
Keunggulan Bersaing Perusahaan dan Organisasi Modern. Yogyakarta:
Penerbit Andi.
Firmansyah, Ricky. 2018. Usability Testing dengan USE Questionnaire pada
Aplikasi Sipolin Provinsi Jawa Barat. Volume 6. No. 1. pp.1-7.
Gok, Nizamettin, dan Nitin Khanna. 2013. Building Hybrid Android Apps with
Java and Javascript. Sebastopol: O’Reilly Media, Inc.
Irwansyah, Edy, dan Jurike V. Moniaga. 2014. Pengantar Teknologi Informasi.
Yogyakarta: Deepublish.
Junindar. 2017. Xamarin Forms: Membangun Aplikasi Mobile Cross-Platform
(Android, iOS & Windows). Yogyakarta: Ebooku.
Limantara, Hans S. 2009. Jelajah Dunia Maya dengan Cepat dan Mudah. Jakarta:
Elex Media Komputindo.
Maharry, Dan. 2013. TypeScript Revealed. New York: Apress Media.
Muslim, Abdul Hayyie Al-Kattani, dan Wido Supraha. 2018. Menumbuhkan
Karakter Anak (Perspektif Ibn Abd Al-Barr Al-Andalusi). Sleman:
Deepublish.
64
Nugraha, M. Pasca. 2011. Pengembangan Aplikasi QR Code Generator dan QR

Code Reader dari Data Berbentuk Image. Bandung: Jurnal Institut
Teknologi Bandung.
Nugroho, M. Agung dan Rikie Katardi. 2016. Analisis Kinerja Penerapan
Container untuk Load Balancing Web Server pada Raspberry Pi. Volume
1, No. 2. pp.7-15.
Pandhita, Ayu Laksmi dan Herman Yuliansyah. 2015. Rancang Bangun Aplikasi
Android Berbasis Lokasi untuk Pencarian Distribution Point. Volume 7.
No. 2. pp.83-92.
Prabhu, Anirudh. 2015. Beginning CSS Preprocessors: With SASS, Compass.js
and Less.js. New York: Apress Media.
Rahayu, Yuni, Kurnia Muludi, dan Astria Hijriani. 2016. Pemetaan Penyebaran
dan Prediksi Jumlah Penduduk Menggunakan Metode Geometrik di
Wilayah Bandar Lampung Berbasis Web-GIS. Volume 2. No. 2. pp.95-
101.
Ristantyo, Noventa Pungki. Perancangan Aplikasi Pemantauan Lokasi Barang
Auto-Update Berbasis Android untuk Jasa Pengiriman Barang pada
Harkirana Cargo Yogyakarta. Yogyakarta: Jurnal AMIKOM Yogyakarta.
Rosa, Rahayu Novrina dan Sofyan Zaman. 2017. Pengelolaan Pembibitan
Tanaman Kelapa Sawit (Elais guineensis Jacq.) di Kebun Bangun
Bandar, Sumatera Utara. Management Oil Palm (Elaeis guineensis Jacq.)
Nursery in Bangun Bandar Estate, North Sumatera. Volume 5, No. 3.
pp.325-333.
Saleh, Hazem. 2014. JavaScript Mobile Application Development. Birmingham:
Packt Publishing Ltd.
Setiawanti, Ria. 2012. Analisis dan Perancangan Sistem Pelacakan Pengiriman
Barang Berbasis WAP dan SMS. Palembang: Jurnal Universitas Bina
Darma.
Sidik, Betha. 2012. Pemrograman Web PHP. Bandung: Penerbit
INFORMATIKA.
65
Siswoutomo, Wiwit. 2005. Panduan Karir di Dunia Teknologi Informasi. Jakarta:

Elex Media Komputindo.
Sitanggang, Dewi Yenny, Lena Magdalena dan Deny Martha. 2014. Aplikasi
Sistem Pengecekan Tarif Dan Tracking Status Pengiriman Barang
Menggunakan Ponsel Berbasis Java (Studi Kasus: PT JNE Cirebon).
JURNAL DIGIT. Vol. 4 No.2, pp.122-135.
Suryana, Dayat. 2012. Provinsi-Provinsi di Indonesia. Singapore: CreateSpace
Independent Publishing.
Syofian, Suzuki, Timor Setiyaningsih, Nur Syamsiah. 2015. Otomatisasi Metode
Penelitian Skala Likert Berbasis Web. Jakarta: Jurnal UMJ.
Wahyudi, Ichsan Indra dan Aridhanyati Arifin. Aplikasi Monitoring Pengiriman
Barang dengan Algoritma Dijkstra. Palembang: Jurnal Universitas
Sriwijaya.
Wiranata, Kornelius Halim, Sugeng Purwantoro dan Yuli Fitrisia. 2012. Aplikasi
Live Tracking Package Berbasis Android. Diambil dari:
https://docplayer.info/32066131-Aplikasi-live-tracking-package-berbasis-
android.html
Yusuf, Sani. 2016. Ionic Framework by Example. Birmingham: Packt Publishing
Ltd.
Yulianto, Nur Achmad Budi, Mohammad Maskan, dan Alifiulahtin Utaminingsih.
2018. Metode Penelitian Bisnis: Metode Penelitian Bisnis. Malang:
Polinema Press.
66
LAMPIRAN
67
1. Halaman Login
<ion-header>
<ion-toolbar color="light" >
<ion-title color="ptpn">Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="all" no-bounce>

<div *ngIf="load">
<ion-progress-bar type="indeterminate"
color="{{warna}}"></ion-progress-bar>
</div>
<div *ngIf="!load">
<ion-progress-bar color="{{warna}}"></ion-progress-bar>
</div>
<div padding>
<div padding>
<ion-img id="picheader"
src="../assets/imgs/ptpn5.png"></ion-img>
</div>
<ion-item>
<ion-label color="ptpn"
position="floating">Username</ion-label>
<ion-input clearInput [(ngModel)]="id"></ion-input>
</ion-item>
<ion-item (click)="showw=true">
<ion-label color="ptpn"
position="floating">Password</ion-label>
<div style="display:flex;width:100%;">
<ion-input item-left type="{{type}}"
(ionChange)="showw=true" (blur)="showww()"
(click)="showww()" (change)="showww()" (focus)="showww()"
[(ngModel)]="pass" id="leftt"></ion-input>
<ion-buttons slot="end" id="rightt">

<ion-button item-right size="small"
id="showhide" *ngIf="!showPass && showw" clear color="dark"
item-right (click)="showPassword()" slot="icon-only">
<ion-icon name="eye" style="font-
size:25px;"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end" id="rightt">
<ion-button item-right size="small"
id="showhide" *ngIf="showPass && showw" clear color="dark"
item-right (click)="showPassword()" slot="icon-only">
68
<ion-icon name="eye-off" style="font-

size:25px;"></ion-icon>
</ion-button>
</ion-buttons>
</div>
</ion-item>
<br/>
<ion-button color="ptpn" expand="block"
(click)="buttonLogin()">Login</ion-button>
<ion-button color="ptpn" expand="block"
(click)="buttonLoginOff()">Offline Login</ion-button>
<ion-button color="light" expand="block"
(click)="luPass()">Lupa Password</ion-button>
</div>
</ion-content>
// Back-end
import { AlertController, LoadingController, NavController }

from '@ionic/angular';
import { DbconService } from './../dbcon.service';
import { Component, OnInit } from '@angular/core';
import { LokalService, AkunOff } from '../lokal.service';
import { SQLitePorter } from '@ionic-native/sqlite-

porter/ngx';
import { HttpClient } from '@angular/common/http';
import { SQLite, SQLiteObject } from '@ionic-
native/sqlite/ngx';
import { BehaviorSubject, Observable } from 'rxjs';
// import 'rxjs/add/operator/map';
import { AngularFireDatabase, AngularFireList,
AngularFireObject } from '@angular/fire/database';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
public id: string;

public pass: string;
max_list: any;
hitung: any = 0;
69
public return_code = 404;
load: any = 0;
warna: any = "primary";
akunoff={};
public akunLogin: Array<{

uname: string,
passw: string,
nama: string,
nohp: string,
lokbit: string
}>;
constructor(
private db: DbconService,
private dbo: LokalService,
public database: AngularFireDatabase,
public alertCtrl: AlertController,
public loadCtrl: LoadingController,
public navCtrl: NavController,
public lokal: LokalService
) { }
ngOnInit() {
console.log("Enkripsi: " + this.enkripsi("potapota"));
// let x = this.lokal.loadAkunOff();
console.log(this.lokal.akun_off);
this.dbo.getDatabaseState().subscribe(rdy => {
if (rdy) {
this.dbo.getAkunOffs().subscribe(devs => {
this.akunoff = devs;
console.log(this.akunoff);
});
}
});
}
luPass(){
this.navCtrl.navigateRoot('/home');
}
buttonLogin(){
this.load = 1;
// this.cekAkun();
let p = this.return_code;
console.log("Status: "+this.return_code);
this.loadMasuk();
}
70
buttonLoginOff(){
this.load = 1;
// this.cekAkun();
let p = this.return_code;
console.log("Status: "+this.return_code);
this.loadMasukOff();
}
async loadMasuk1() {
const loading = await this.loadCtrl.create({
spinner: 'crescent',
duration: 3000,
message: 'Authenticating...'
});
await loading.present();
this.cekAkun();
return await loading.dismiss();
async loadMasuk() {
duration: 3000,
});
this.cekAkun();
async loadMasukOff() {
duration: 3000,
});
this.cekAkunOff();
71
// if(kode == 202){
// this.warna = "success";
// const loading = await this.loadCtrl.create({
// spinner: 'bubbles',
// duration: 5000,
// message: 'Please wait...'
// });
// this.navCtrl.navigateRoot('/home');
// return await loading.present();
// }
// else
pl(){
this.alertGagal(this.return_code);
}
async alertGagal(kode: any) {

if(kode == 401){
this.warna = "danger";
const alert = await this.alertCtrl.create({
header: 'Gagal Login',
message: 'Password salah, coba lagi.',
buttons: ['OK']
});
await alert.present();
// this.load = 0;
}
else
if(kode == 404){
this.warna = "danger";
header: 'Gagal Login',
message: 'Akun tidak ditemukan. Periksa kembali
username yang anda masukkan.',
buttons: ['OK']
});
// this.load = 0;
}
}
cekAkunOff() {
let hitung = 0;
let maxlist = Object.keys(this.akunoff).length;
72
this.id = this.id.toLocaleLowerCase();
while (hitung < maxlist) {
if (this.akunoff[hitung].uname == this.id) {
if (this.akunoff[hitung].passw ==
this.enkripsi(this.pass)) {
this.db.uname = this.akunoff[this.hitung].uname;
this.db.passw = this.akunoff[this.hitung].passw;
this.db.lokbit = this.akunoff[this.hitung].lokbit;
this.db.nama = this.akunoff[this.hitung].nama;
this.db.nohp = this.akunoff[this.hitung].nohp;
console.log("Welcome " + this.db.uname);
this.return_code = 202;
console.log(this.return_code);
this.db.logged = true;
this.load = 1;
return 1;
}
else {
this.pl();
return 1;
}
}
else{
hitung++;
}
}
this.pl();
return 1;
}
cekAkun(){
this.db.akunRef$.valueChanges().subscribe(x => {
this.max_list = Object.keys(x).length;
this.hitung = 0;
this.id = this.id.toLocaleLowerCase();
while(this.hitung<this.max_list){
if(x[this.hitung].uname == this.id){
if(x[this.hitung].passw ==
this.enkripsi(this.pass)){
this.db.uname = x[this.hitung].uname;
this.db.passw = x[this.hitung].passw;
this.db.lokbit = x[this.hitung].lokbit;
this.db.nama = x[this.hitung].nama;
73
this.db.nohp = x[this.hitung].nohp;
this.lokal.addAkunOff(x[this.hitung].lokbit,
x[this.hitung].nama, x[this.hitung].nohp,
x[this.hitung].passw, x[this.hitung].uname);
console.log("Welcome "+ this.db.uname);
this.db.logged = true;
this.load = 1;
return 1;
}
else {
this.pl();
return 1;
}
}
else{
this.hitung++;
}
}
this.pl();
return 1;
});
}
enkripsi(text: any) {
var encrypted = "";
var action = 'encrypt';
for(var i = 0; i < text.length; i++) {

var ASCII = text[i].charCodeAt(0);
var n = null;
if(i % 2 == 0) {
n = action == 'encrypt' ? ASCII + 4 : ASCII - 4;
}
else if(i % 2 == 1) {
n = action == 'encrypt' ? ASCII + 7 : ASCII - 7;
}
var s = String.fromCharCode(n);
encrypted += s;;
}
74
return encrypted;
}
public type = 'password';

public showPass = false;
public showw = false;
showww(){
if(this.pass==""){
this.showw=false;
}
else{
this.showw=true;
}
}
showPassword() {
this.showPass = !this.showPass;
if(this.showPass){
this.type = 'text';
} else {
this.type = 'password';
}
}
}
2. Halaman Utama
<ion-header>
<ion-toolbar color="light" >
<ion-title color="dark">Tracking Bibit Kelapa
Sawit</ion-title>
<ion-buttons slot="primary">
<ion-button (click)="presentAlertConfirm()">
<ion-icon slot="icon-only" name="EXIT"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-segment (ionChange)="segmentChanged($event)"
color="dark" value="satu" style="z-index: 999;">
<ion-segment-button value="satu">
<ion-icon color="primary" name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button value="dua">
<ion-icon color="primary" name="add-circle-
outline"></ion-icon>
<ion-segment-button value="tiga">
<ion-icon color="primary" name="shuffle"></ion-
icon>
</ion-segment>
75
</ion-header>
<ion-content style="background-color: #222428">
<div id="bg">
<img src="../../assets/imgs/mona-eendra-unsplash-
2.jpg">
2.jpg">
</div>
<div *ngIf="satu" padding>

<div id="item">
<ion-card>
<ion-item>
<ion-icon color="primary" name="scan-circle-
outline" slot="start"></ion-icon>
<ion-label>Scan Bibit</ion-label>
<ion-button fill="outline" slot="end"
(click)="scanCode()">Buka Kamera</ion-button>
</ion-item>
<ion-card-content style="background: white;">

<ion-img src="../assets/imgs/hold.jpg"></ion-img>
Scan kode QR bibit untuk melihat data dari bibit
tersebut.
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-card>
<ion-item>
<ion-icon color="ptpn" name="analytics-outline"
slot="start"></ion-icon>
<ion-label>Hasil Scan</ion-label>
(click)="presentAlert()">Lihat Data</ion-button>
</ion-item>

<ion-img src="../assets/imgs/check.jpg"></ion-img>
Melihat data hasil scan kode QR sebelumnya.
</ion-card-content>
</ion-card>
</div>
<div id="item">
76
<ion-card>
<ion-item>
<ion-icon color="ptpn" name="help"
<ion-label>FAQ</ion-label>
routerLink="/listoffinput"
routerDirection="forward">Lihat</ion-button>
</ion-item>

<ion-img src="../assets/imgs/faq.jpg"></ion-img>
Frequently Asked Question (FAQ) seputar scanner
bibit.
</ion-card-content>
</ion-card>
</div>
<ion-input type="hidden" [(ngModel)]="scannedData"

(change)="presentAlert()"></ion-input>
</div>
<div *ngIf="tiga" padding>
<div id="item">
<ion-card>
<ion-item>
<ion-icon color="primary" name="options"
<ion-label>Ubah Status</ion-label>
routerLink="/input" routerDirection="forward">Pilih
Aksi</ion-button>
</ion-item>

<ion-img src="../assets/imgs/rev.jpg"></ion-img>
Scan kode QR bibit saat mengirim, menerima,
ataupun menetapkan status afkir pada bibit.
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-card>
77
<ion-item>
<ion-label>Penyimpanan Offline</ion-label>
routerLink="/listoffubahstat"
</ion-item>

<ion-img src="../assets/imgs/offlinedb.jpg"></ion-
img>
Melihat data yang tersimpan di offline database.
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-card>
<ion-item>
(click)="faqChange()">Lihat</ion-button>
</ion-item>

Frequently Asked Question (FAQ) seputar mengubah
status bibit.
</ion-card-content>
</ion-card>
</div>

</div>
<div *ngIf="dua" padding>
<div id="item">
<ion-card>
<ion-item>
78
<ion-icon color="ptpn" name="create"

<ion-label>Tambah Data</ion-label>
<ion-button fill="outline"
slot="end"routerLink="/ubahstat"
routerDirection="forward">Pilih Aksi</ion-button>
</ion-item>

<ion-img src="../assets/imgs/add.jpg"></ion-img>
Menambah data bibit.
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-card>
<ion-item>
<ion-label>Penyimpanan Offline</ion-label>
routerLink="/listoffinput"
</ion-item>

<ion-img src="../assets/imgs/offlinedb.jpg"></ion-
img>
Melihat data yang tersimpan di offline database.
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-card>
<ion-item>
(click)="faqInput()">Lihat</ion-button>
</ion-item>

Frequently Asked Question (FAQ) seputar input data
bibit.
</ion-card-content>
</ion-card>
79
</div>

</div>

</ion-content>

80



// Back-end

import { Component, NgZone } from '@angular/core';
import { Platform, LoadingController, AlertController,

NavController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-
screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Observable } from 'rxjs';

import { BarcodeScanner, BarcodeScannerOptions } from
'@ionic-native/barcode-scanner/ngx';
interface Bibit {
asal_bibit: string,
bedeng_bibit: string,
blok_bibit: string,
id_bibit: string,
jenis_bibit: string,
kebun: string,
kelompok: string,
varietas: string
}
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
81
styleUrls: ['home.page.scss'],
})
export class HomePage {
encodeData: any;
scannedData: {};
bibitList: Observable<Bibit[]>
list: any;
max_list: any;
hitung: any = 0;
logged: boolean = false;
jenis_bibit: any;
kode_bibit: any = 0;
asal_bibit: any;
vari_bibit: any;
klmpk_bibit: any;
bedeng_bibit: any;
blok_bibit: any;
kebun_bibit: any;
asal_bit: any = "";

id_bit: any = "";
idgroup_bit: any = "";
klmpk_bit: any = "";
lokasi_bit: any = "";
serbuk_bit: any = "";
tgl_bit: any = "";
varietas_bit: any = "";
slide: any = "satu";
satu: any = true;

dua: any = false;
tiga: any = false;
tampung: Array<{
asal_bibit: string,
blok_bibit: string,
id_bibit: string,
kebun: string,
kelompok_bibit: string,
varietas_bibit: string
}>;
test: any;
82
barcodeScannerOptions: BarcodeScannerOptions;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private barcodeScanner: BarcodeScanner,
private loadCtrl: LoadingController,
private alertCtrl: AlertController,
public ngZone: NgZone,
private navCtrl: NavController
) {
this.initializeApp();
this.logged = this.db.logged;
if(this.logged == false){
this.presentLoading();
}
this.db.getBibitList().snapshotChanges().subscribe(i =>{
this.test = i;
});
console.log('Hasildfsg');
console.log(this.test);
this.db.listRef$.valueChanges().subscribe(x=>
{
console.log(x[0].id_bibit);
// this.hitung = 0;
console.log(this.max_list);
}
);
this.hitung = 0;
this.barcodeScannerOptions = {
showTorchButton: true,
showFlipCameraButton: true
};
this.list = this.db.last_list;
this.max_list = this.db.max_list;
console.log(this.tampung);
// this.presentLoading('Sedang Memproses...', 2000);

}
segmentChanged(ev: any) {
console.log('Segment changed', ev);
83
console.log(ev.detail.value);
this.slide = ev.detail.value;
if(this.slide == "satu"){
this.satu = true;
this.dua = false;
this.tiga = false;
} else
if(this.slide == "dua"){
this.satu = false;
this.dua = true;
this.tiga = false;
} else
if(this.slide == "tiga"){
this.satu = false;
this.dua = false;
this.tiga = true;
}
}
async loadData() {
cssClass: "stroke:var(--ion-color-ptpn);",
duration: 4000,
message: 'Retrieving Data...'
});
this.db.variRef$.valueChanges().subscribe(x => {
this.hitung = 0;
this.db.varis = x;
console.log(this.db.varis);
});
this.db.asbitRef$.valueChanges().subscribe(x => {
this.hitung = 0;
this.db.asbits = x;
console.log(this.db.asbits);
});
this.db.klmpkRef$.valueChanges().subscribe(x => {
this.hitung = 0;
this.db.klmpks = x;
84
console.log(this.db.klmpks);
});
this.db.lokRef$.valueChanges().subscribe(x => {
this.hitung = 0;
this.db.lokasis = x;
console.log(this.db.lokasis);
});
return await loading.present();
async presentAlertConfirm() {
header: 'Konfirmasi Logout',
message: 'Apa anda yakin ini keluar?',
buttons: [
{
text: 'Tidak',
role: 'cancel',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Ya',
handler: () => {
console.log('Confirm Okay');
this.navCtrl.navigateRoot('/login');
}
}
]
});
}
gotoInput(){
// this.navCtrl.navigateForward('/input');
}
async presentLoading() {
duration: 5000,
cssClass: "--spinner-color:var(--ion-color-ptpn);",
message: 'Please wait...',
translucent: true
});
85
const { role, data } = await loading.onDidDismiss();
this.navCtrl.navigateRoot('/login');
console.log('Loading dismissed!');
}
ionViewDidLoad(){
if(this.db.fst != 0){
// this.presentAlert()
}
this.db.fst = 1;
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.encodeData = "https://www.ptpn5.co.id";
this.loadData();
});
}
ketemu: boolean;
verify(kode: any){
this.hitung = 0;
this.ketemu = false;
this.db.masRef$.valueChanges().subscribe(x => {
if(x[this.hitung].id == kode){
this.db.asal_bit = x[this.hitung].asal;
this.db.id_bit = x[this.hitung].id;
this.db.idgroup_bit = x[this.hitung].idgroup;
this.db.klmpk_bit = x[this.hitung].klmpk;
this.db.lokasi_bit = x[this.hitung].lokasi;
this.db.serbuk_bit = x[this.hitung].serbuk;
this.db.tgl_bit = x[this.hitung].tgl;
this.db.varietas_bit = x[this.hitung].varietas;
this.hitung = this.max_list;
this.ketemu = true;
}
else{
this.hitung++;
}
86
}
});
cekBibit(scan: any){
this.db.masRef$.valueChanges().subscribe(x => {
this.hitung = 0;
// if(scan.localeCompare(x[this.hitung].id) == 0){
if(x[this.hitung].id == scan){
this.db.i_id = x[this.hitung].id;
this.db.i_idgroup = x[this.hitung].idgroup;
this.db.i_lokasi = x[this.hitung].lokasi;
this.db.i_tgl = x[this.hitung].tgl;
this.db.i_serbuk = x[this.hitung].serbuk;
this.db.i_vari = x[this.hitung].varietas;
this.db.i_klmpk = x[this.hitung].klmpk;
this.db.i_asbit = x[this.hitung].asal;
this.ketemu = true;
this.hitung = this.max_list;
console.log("Ketemu dong");
}
else{
this.hitung++;
}
}
});
}
async ketemutidak() {
duration: 5000,
message: 'Please wait...',
});
if(this.ketemu){
this.navCtrl.navigateRoot('/detail');
}
else{
this.gagalScan();
}

}
scanCode() {
this.barcodeScanner.scan().then(barcodeData => {
87
// alert('Barcode data ' +

JSON.stringify(barcodeData));
this.cekBibit(barcodeData['text']);
this.scannedData = barcodeData['text'];
this.ketemutidak();
}).catch(err => {
console.log('Error', err);
});
// this.presentLoading('Sedang Memproses...', 2000);
// this.presentAlert()
}
async gagalScan() {
header: 'Data tidak ditemukan',
message: 'Pastikan anda memindai QR Tracking Bibit
PTPN5.',
buttons: [
{
text: 'Tidak',
role: 'cancel',
}
}
]
});
}
encodedText() {
this.barcodeScanner.encode(this.barcodeScanner.Encode.TE
XT_TYPE, this.encodeData).then((encodedData) => {
console.log(encodedData);
this.encodeData = encodedData;
}, (err) => {
console.log("Error occured : " + err);
});
}
faqChange() {
presentAlert() {
88
faqInput() {}}
3. Halaman Input
<ion-header>
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button routerLink="/home"
routerDirection="forward">
<ion-icon slot="icon-only" name="arrow-back"></ion-
icon>
</ion-button>
</ion-buttons>
<ion-title>Edit Data Bibit</ion-title>
</ion-toolbar>
</ion-header>
<ion-content color="dark">
<div id="bg">
2.jpg">
2.jpg">
</div>
<div id="contents" padding>
<div id="item">
<ion-card>
<ion-item>
<ion-label color="primary">Detail Input</ion-
label>
</ion-item>

<ion-item>
<ion-label position="stacked">Lokasi</ion-label>
<ion-input type="text" value="{{recentPlace}}"
[(ngModel)]="lokasi" readonly></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Tanggal Bibit
Diterima</ion-label>
<ion-input type="date" value="{{tgl}}"
[(ngModel)]="tgl"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Jumlah Bibit</ion-
label>
89
<ion-input placeholder="999" type="number"

value="{{jmlh}}" [(ngModel)]="jmlh"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-card>
<ion-item>
<ion-label color="primary">Detail Bibit</ion-
label>
</ion-item>

<ion-item>
<ion-label position="stacked">Nomor
Penyerbukan</ion-label>
<ion-input placeholder="14045" type="number"
value="{{serbuk}}" [(ngModel)]="serbuk"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Varietas</ion-
label>
<ion-select (ionChange)="onChangeVar($event)"
placeholder="Pilih Varietas">
<ion-select-option *ngFor="let vari of varis"
value="{{vari.kode}}">{{vari.kode}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="floating">Kelompok</ion-
label>
<ion-select (ionChange)="onChangeKel($event)"
placeholder="Pilih Kelompok">
<ion-select-option *ngFor="let klmpk of
klmpks" value="{{klmpk.kode}}">{{klmpk.kode}}</ion-select-
option>

</ion-select>
</ion-item>
90
<ion-item>
<ion-label position="floating">Asal Benih</ion-
label>
<ion-select (ionChange)="onChangeAsb($event)"
placeholder="Pilih Lokasi">
<ion-select-option *ngFor="let asbit of
asbits" value="{{asbit.kode}}">{{asbit.kode}}</ion-select-
option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-card>
</div>
<div id="item">
<ion-button color="light" expand="block"
(click)="confirmCheck()">Input Bibit Ke Server</ion-button>
<ion-button color="danger" expand="block"
(click)="confirmCheckoff()">Simpan Offline</ion-button>
</div>
</div>
</ion-content>
// Back-end
import { LokalService, Dev, Createnew } from

'../lokal.service';
import { AlertController, LoadingController, NavController }
from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
// import 'rxjs/add/operator/map';
@Component({
selector: 'app-ubahoff',
templateUrl: './ubahoff.page.html',
styleUrls: ['./ubahoff.page.scss'],
})
export class UbahoffPage implements OnInit {
hitung: any;
max_list: any;
varis: any;
asbits: any;
klmpks: any;
public recentPlace: any;

91
public lokasi: string;

public tgl: string;
public jmlh: number;
public serbuk: string;
public varie: string;
public asbite: string;
public klmpke: string;
idgroup: any;
// public lokasi: string;
constructor(
public database: AngularFireDatabase,
public alertCtrl: AlertController,
public loadCtrl: LoadingController,
public navCtrl: NavController,
public lokal: LokalService
) {
this.idgroup = this.lokal.ubah_now.idgroup;
this.recentPlace = this.lokal.ubah_now.recentPlace;
this.lokasi = this.lokal.ubah_now.lokasi;
this.tgl = this.lokal.ubah_now.tgl;
this.jmlh = this.lokal.ubah_now.jumlah;
this.serbuk = this.lokal.ubah_now.serbuk;
this.varie = this.lokal.ubah_now.varietas;
this.asbite = this.lokal.ubah_now.asal;
this.klmpke = this.lokal.ubah_now.klmpk;
this.loadMasuk();
this.initialize();
/**
*
export interface Createnew {
asal: string,
idgroup: string,
klmpk: string,
lokasi: string,
serbuk: string,
tgl: string,
varietas: string,
jumlah: string
}
*
*
*/
}
92
initialize(){
// console.log(this.recentPlace);
// console.log(this.varis);
// console.log(this.asbits);
// console.log(this.klmpks);
}
async loadMasuk() {
duration: 3000,
});
this.recentPlace = this.db.lokbit;
this.varis = this.db.varis;
this.asbits = this.db.asbits;
this.klmpks = this.db.klmpks;

}
ngOnInit() {
}
onChangeVar(value){
// console.log(value);
this.varis = value.detail.value;
}
onChangeKel(value){
// console.log(value.detail.value);
this.klmpks = value.detail.value;
}
onChangeAsb(value){
// console.log(value.detail.value);
this.asbits = value.detail.value;
}
async confirmCheck() {
header: 'Konfirmasi Input Ke Server',
message: 'Apa anda yakin ingin menambahkan <strong
style="color: #f04141;">'+this.jmlh+'</strong> buah bibit
dengan nomor penyerbukan <strong style="color:
#f04141;">'+this.serbuk+'</strong> ?',
buttons: [
93
{
text: 'Batal',
role: 'cancel',
// console.log('Confirm Cancel: blah');
}
}, {
text: 'Oke',
handler: () => {
// console.log('Confirm Okay');
this.inputBibit();
}
}
]
});
}
async confirmCheckoff() {
header: 'Konfirmasi Simpan Offline',
message: 'Apa anda yakin ingin menambahkan <strong
style="color: #f04141;">'+this.jmlh+'</strong> buah bibit
dengan nomor penyerbukan <strong style="color:
#f04141;">'+this.serbuk+'</strong> ?',
buttons: [
{
text: 'Batal',
role: 'cancel',
// console.log('Confirm Cancel: blah');
}
}, {
text: 'Oke',
handler: () => {
this.inputBibitoff();
}
}
]
});
}
public generateID(): any {

var d = new Date().getTime();
var uuid = 'group-xxxx-xxxxxl-hyxxxx'.replace(/[xy]/g,
function (c) {
94
var r = (d + Math.random() * 16) % 16 | 0;

d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
uuid = uuid+'-'+this.db.uname;
return uuid;
}
async loadInput() {
let hit = 0;
duration: 10000,
message: 'Menginput Data ...'
});
// this.recentPlace = this.db.lokbit;
// this.varis = this.db.varis;
// this.asbits = this.db.asbits;
// this.klmpks = this.db.klmpks;
// let varis = this.varis;

// let klmpk = this.klmpks;
// let asbit = this.asbits;
while(hit<this.jmlh){
this.db.inputData(this.lokasi,this.tgl,this.serbuk,thi
s.varis,this.klmpks,this.asbits, this.idgroup);
hit++;
}
this.confirmRedirect();
async confirmRedirect() {
header: 'Berhasil Dimasukkan!',
message: this.jmlh+' data bibit telah disimpan.',
buttons: [
{
text: 'Oke',
handler: () => {
95
}
}
]
});
}
async gagalInput() {
header: 'Gagal Menyimpan',
message: ':(',
buttons: [
{
text: 'Yalah',
handler: () => {
}
}
]
});
}
async confirmRedirectoff() {
header: 'Berhasil Disimpan!',
message: 'Apa anda ingin melihat list data
tersimpan?',
buttons: [
{
text: 'Ya',
handler: () => {
this.navCtrl.navigateRoot('/listoffinput');
}
},
{
text: 'Tidak',
handler: () => {
}
}
]
});
}
96
inputBibitoff(){
this.idgroup = this.generateID();
let a = 0;
this.db.i_jmlh = this.jmlh;
this.db.i_lokasi = this.lokasi;
this.db.i_serbuk = this.serbuk;
this.db.i_tgl = this.tgl;
this.db.i_vari = this.varis;
this.db.i_klmpk = this.klmpks;
this.db.i_asbit = this.asbits;
// addCreatenew(asal, idgroup, klmpk, lokasi, serbuk,

tgl, varietas, jumlah)
this.lokal.addCreatenew(this.asbits, this.idgroup,
this.klmpks, this.lokasi, this.serbuk, this.tgl, this.varis,
this.jmlh).then(x=>{
this.confirmRedirectoff();
},
error => {
this.gagalInput();
a = 1;
}
);
// if(a!=1){
// this.confirmRedirectoff();
// a=0;
// }
}
inputBibit(){
this.idgroup = this.generateID();
this.db.i_jmlh = this.jmlh;
this.db.i_lokasi = this.lokasi;
this.db.i_serbuk = this.serbuk;
this.db.i_tgl = this.tgl;
this.db.i_vari = this.varis;
this.db.i_klmpk = this.klmpks;
this.db.i_asbit = this.asbits;
// console.log(this.db.i_jmlh);
// console.log(this.db.i_lokasi);
// console.log(this.db.i_serbuk);
// console.log(this.db.i_tgl);
this.loadInput();
97
//
this.db.inputData(this.lokasi,this.tgl,this.serbuk,this.vari
s,this.klmpks,this.asbits);
// this.db.variRef$.valueChanges().subscribe(x => {
// this.max_list = Object.keys(x).length;
// this.hitung = 0;
// this.varis = x;
// console.log(this.varis);
// });
}
}
4. Konfigurasi Online Database
import { Injectable } from '@angular/core';

interface Bibit {
asal_bibit: string,
blok_bibit: string,
id_bibit: string,
kebun: string,
kelompok_bibit: string,
varietas_bibit: string
}
interface Akun {
uname: string,
passw: string,
nama: string,
nohp: string,
lokbit: string
}
interface Vari{
id: string,
ket: string,
98
kode: string
}
interface Lok{
id: string,
kebun: string,
ket: string,
nama: string
}
interface Master{
asal: string,
id: string,
klmpk: string,
lokasi: string,
serbuk: string,
tgl: string,
varietas: string,
idgroup: string
}
interface Stat{
id: string,
id_bibit: string,
ket: string,
lokasi_akhir: string,
lokasi_awal: string,
stat: string,
waktu: string
}
@Injectable({
providedIn: 'root'
})
export class DbconService {
asal_bit: any;
id_bit: any;
idgroup_bit: any;
klmpk_bit: any;
lokasi_bit: any;
serbuk_bit: any;
tgl_bit: any;
varietas_bit: any;
// get_list: AngularFirestoreCollection<Bibit>;
public dbRef = this.database.list<Bibit>('bibit');
public akunRef = this.database.list<Akun>('migrasi/user');
public variRef =
this.database.list<Vari>('migrasi/varietas');
99
public asbitRef =
this.database.list<Vari>('migrasi/asalbit');
public klmpkRef =
this.database.list<Vari>('migrasi/klmpk');
public lokRef = this.database.list<Lok>('migrasi/lokasi');
public masterRef =
this.database.list<Master>('migrasi/master');
public statRef =
this.database.list<Stat>('migrasi/status');
// public variRef =
// public variRef =
varis: any;
asbits: any;
klmpks: any;
lokasis: any;
listRef$: AngularFireList<Bibit>;
akunRef$: AngularFireList<Akun>;
variRef$: AngularFireList<Vari>;
asbitRef$: AngularFireList<Vari>;
klmpkRef$: AngularFireList<Vari>;
lokRef$: AngularFireList<Lok>;
masRef$: AngularFireList<Master>;
statRef$: AngularFireList<Stat>;
item_list: Observable<Bibit[]>;
cnta_list: any;
last_list: AngularFireList<Bibit[]>;
max_list: any;
item_stat: Observable<Stat[]>;
cnta_stat: any;
last_stat: AngularFireList<Stat[]>;
max_stat: any;
item_lok: Observable<Bibit[]>;
cnta_lok: any;
last_lok: AngularFireList<Bibit[]>;
max_lok: any;
public logged: boolean = false;

public fst = 0;
public uname: string;

public passw: string;
public nama: string;
public nohp: string;
public lokbit: string;
100
//input
public i_idgroup: any;
public i_lokasi: any;
public i_tgl: any;
public i_jmlh: any;
public i_serbuk: any;
public i_vari: any;

public i_klmpk: any;
public i_asbit: any;
public i_id: any;
public scannedData: any = new Array();

public scanType: any = 'DEFAULT';
scanLok: any;
scanKet: any;
scanLoktuj: any;
scanNoker: any;
scanNosur: any;
scanSupir: any;
scanKawal: any;
constructor(
// public firestore: AngularFirestore,
public database: AngularFireDatabase) {
this.listRef$ = this.database.list('bibit');
this.akunRef$ = this.database.list('migrasi/user');
this.variRef$ = this.database.list('migrasi/varietas');
this.asbitRef$ = this.database.list('migrasi/asalbit');
this.klmpkRef$ = this.database.list('migrasi/klmpk');
this.lokRef$ = this.database.list('migrasi/lokasi');
this.masRef$ = this.database.list('migrasi/master');
this.statRef$ = this.database.list('migrasi/status');
// this.akunLogin.map(x => {
// x.nama = "Lukman";
// })
this.func1();
// this.getBibitList().valueChanges().subscribe(i =>{
// this.last_list = i;
// });
101
console.log(this.last_list);
}
getBibitList() {
return this.dbRef;
}
func1(){
let y = this.database.list('/bibit').valueChanges();
let x = this.database.list('/bibit').snapshotChanges();
x.subscribe(i =>{
this.max_list = Object.keys(i).length;
this.cnta_list = 0;
});
}
ambilAkun(){
let akun =
this.database.list('/migrasi/user').snapshotChanges();
akun.subscribe(a => {
})
}
ambilLok(){
let lok =
this.database.list('/migrasi/lokasi').snapshotChanges();
lok.subscribe(l => {
})
}
public generateUUID(): any {

var uuid =
'ptpn5-xxxxxlu-kxxxx-xxxxma-nyxxx'.replace(/[xy]/g, function
(c) {
});
return uuid;
}
public generateUUID2(): any {

102
var uuid =
'master-xxxxxxxxxxxxxxxxxxyxxx'.replace(/[xy]/g, function
(c) {
});
return uuid;
}
public generateStatUUID(): any {

var uuid = '-stat-xxyxxxx'.replace(/[xy]/g, function (c)
{
});
return uuid;
}
inputData(
v_lokasi: any,
v_tgl: any,
v_serbuk: any,
v_vari: any,
v_klmpk: any,
v_asal: any,
v_group: any
){
let v_id = this.generateUUID();
this.inputStatus(v_id, 'Bibit baru diinput ke database',
v_lokasi, v_lokasi, 'AKTIF');
return this.database.list('/migrasi/master').set(v_id,{
asal: v_asal,
id: v_id,
klmpk: v_klmpk,
lokasi: v_lokasi,
serbuk: v_serbuk,
tgl: v_tgl,
varietas: v_vari,
idgroup: v_group
});
}
inputStatus(
s_idbibit: any,
s_ket: any,
s_lokakhir: any,
s_lokawal: any,
s_stat: any
103
) {
let maxt = 9999999999999999;
let s_date = new Date().getTime();
let mint = maxt - s_date;
let s_id = mint+this.generateStatUUID();
return this.database.list('/migrasi/status').set(s_id,{
id: s_id,
id_bibit: s_idbibit,
ket: s_ket,
lokasi_akhir: s_lokakhir,
lokasi_awal: s_lokawal,
stat: s_stat,
waktu: s_date
});
}
}
5. Konfigurasi Offline Database

import { Platform } from '@ionic/angular';
import { SQLitePorter } from '@ionic-native/sqlite-
porter/ngx';
import { HttpClient } from '@angular/common/http';
import { SQLite, SQLiteObject } from '@ionic-
native/sqlite/ngx';
import { BehaviorSubject, Observable } from 'rxjs';
export interface Dev {

id: number,
name: string,
skills: any[],
img: string
}
// CREATE TABLE IF NOT EXISTS buat_baru(

// id INTEGER PRIMARY KEY AUTOINCREMENT,
// asal TEXT,
// idgroup TEXT,
// klmpk TEXT,
// lokasi TEXT,
// serbuk TEXT,
// tgl DATE,
// varietas TEXT,
// jumlah TEXT
// );
export interface Createnew {

asal: string,
104
idgroup: string,
klmpk: string,
lokasi: string,
serbuk: string,
tgl: string,
varietas: string,
jumlah: string
}
export interface Changestat {

id_bibit: string,
ket: string,
lokasi_awal: string,
lokasi_akhir: string,
stat: string,
waktu: string
}
export interface KirimOff {

id_bibit: string,
id_kirim: string,
tgl: string,
lokasi_asal: string,
lokasi_tujuan: string,
no_surat: string,
nama_supir: string,
nama_kawal: string,
ket: string
}
export interface AkunOff {

uname: string,
passw: string,
lokbit: string,
nama: string,
nohp: string
}
@Injectable({
providedIn: 'root'
})
export class LokalService {
private database: SQLiteObject;

private dbReady: BehaviorSubject<boolean> = new
BehaviorSubject(false);
developers = new BehaviorSubject([]);

products = new BehaviorSubject([]);
create_new = new BehaviorSubject([]);

105
change_stat = new BehaviorSubject([]);

kirim_off = new BehaviorSubject([]);
akun_off = new BehaviorSubject([]);
ubah_now: any;
akunlogin: any;
constructor(private plt: Platform, private sqlitePorter:

SQLitePorter, private sqlite: SQLite, private http:
HttpClient){
this.plt.ready().then(() => {
this.sqlite.create({
name: 'seed.db',
location: 'default'
})
.then((db: SQLiteObject) => {
this.database = db;
this.seedDatabase();
});
});
}
seedDatabase() {
this.http.get('assets/sql/seed.sql', { responseType:
'text'})
.subscribe(sql => {
this.sqlitePorter.importSqlToDb(this.database, sql)
.then(_ => {
this.loadCreatenew();
this.loadAkunOff();
this.loadChangestat();
this.dbReady.next(true);
})
.catch(e => console.error(e));
});
}
getDatabaseState() {
return this.dbReady.asObservable();
}
/**
*
* edited code
*
*/
getChangestats(): Observable<Changestat[]>{
return this.change_stat.asObservable();
}
106
getCreatenews(): Observable<Createnew[]>{
return this.create_new.asObservable();
}
getKirimOffs(): Observable<KirimOff[]>{
return this.kirim_off.asObservable();
}
getAkunOffs(): Observable<AkunOff[]>{
return this.akun_off.asObservable();
}
// end
// getDevs(): Observable<Dev[]> {
// return this.developers.asObservable();
// }
// getProducts(): Observable<any[]> {
// return this.products.asObservable();
// }
/**
*
* edited code
*
*
*
*/
loadChangestat(){
return this.database.executeSql('SELECT * FROM
change_stat', []).then(data => {
let changestat: Changestat[] = [];
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
// let val = [];
// if (data.rows.item(i).skills != '') {
// val = JSON.parse(data.rows.item(i).skills);
// }
changestat.push({
id_bibit: data.rows.item(i).id_bibit,
ket: data.rows.item(i).ket,
lokasi_akhir: data.rows.item(i).lokasi_awal,
lokasi_awal: data.rows.item(i).lokasi_akhir,
stat: data.rows.item(i).stat,
waktu: data.rows.item(i).waktu
});
}
}
this.change_stat.next(changestat);
107
});
}
addChangestat(id_bibit, ket, lokasi_akhir, lokasi_awal,

stat, waktu) {
let data = [id_bibit, ket, lokasi_akhir, lokasi_awal,
stat, waktu];
return this.database.executeSql('INSERT INTO change_stat
VALUES (?, ?, ?, ?, ?, ?)', data).then(data => {
});
}
getChangestat(waktu): Promise<Changestat> {
change_stat WHERE waktu = ?', [waktu]).then(data => {
// let skills = [];
// if (data.rows.item(0).skills != '') {
// skills = JSON.parse(data.rows.item(0).skills);
// }
let i = 0;
return {
ket: data.rows.item(i).ket,
lokasi_akhir: data.rows.item(i).lokasi_akhir,
lokasi_awal: data.rows.item(i).lokasi_awal,
stat: data.rows.item(i).stat,
waktu: data.rows.item(i).waktu
}
});
}
deleteChangestat(waktu) {
return this.database.executeSql('DELETE FROM change_stat
WHERE waktu = ?', [waktu]).then(_ => {
// this.loadProducts();
});
}
updateChangestat(cn: Changestat) {
let data = [cn.id_bibit, cn.ket, cn.lokasi_akhir,
cn.lokasi_awal, cn.stat, cn.waktu];
return this.database.executeSql(
ÙPDATE buat_baru
SET
ket = ?,
lokasi_akhir = ?,
lokasi_awal = ? ,
stat = ? ,
waktu = ?
108
WHERE id_bibit = ${cn.id_bibit}`, data)

.then(data => {
})
}
// Create New
loadCreatenew(){
buat_baru', []).then(data => {
let createnew: Createnew[] = [];
// let val = [];
// }
createnew.push({
asal: data.rows.item(i).asal,
idgroup: data.rows.item(i).idgroup,
jumlah: data.rows.item(i).jumlah,
klmpk: data.rows.item(i).klmpk,
lokasi: data.rows.item(i).lokasi,
serbuk: data.rows.item(i).serbuk,
tgl: data.rows.item(i).tgl,
varietas: data.rows.item(i).varietas
});
}
}
this.create_new.next(createnew);
});
}
addCreatenew(asal, idgroup, klmpk, lokasi, serbuk, tgl,

varietas, jumlah) {
let data = [asal.toString(), idgroup.toString(),
jumlah.toString(), klmpk.toString(), lokasi.toString(),
serbuk.toString(), tgl.toString(), varietas.toString()];
// this.database.executeSql('INSERT INTO buat_baru
VALUES (?, ?, ?, ?, ?, ?, ?, ?)', data);
// return this.database.executeSql('INSERT INTO

buat_baru
VALUES'+asal+','+idgroup+','+klmpk+','+lokasi+','+serbuk+','
+tgl+','+varietas+','+jumlah)
// .then(data => {
// this.loadCreatenew();
// });
109
// asal TEXT,
// idgroup TEXT,
// jumlah TEXT,
// klmpk TEXT,
// lokasi TEXT,
// serbuk TEXT,
// tgl TEXT,
// varietas TEXT
return this.database.executeSql('INSERT INTO buat_baru

(asal,idgroup,jumlah,klmpk,lokasi,serbuk,tgl,varietas)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)', data).then(data => {
});
}
getCreatenew(idgroup): Promise<Createnew> {
return this.database.executeSql('SELECT * FROM buat_baru
WHERE idgroup = ?', [idgroup]).then(data => {
// let skills = [];
// }
let i = 0;
return {
asal: data.rows.item(i).asal,
idgroup: data.rows.item(i).idgroup,
jumlah: data.rows.item(i).jumlah,
klmpk: data.rows.item(i).klmpk,
lokasi: data.rows.item(i).lokasi,
serbuk: data.rows.item(i).serbuk,
varietas: data.rows.item(i).varietas
}
});
}
deleteCreatenew(idgroup) {
return this.database.executeSql('DELETE FROM buat_baru
WHERE idgroup = ?', [idgroup]).then(_ => {
});
}
updateCreatenew(cn: Createnew) {
let data = [cn.asal, cn.idgroup, cn.jumlah, cn.klmpk,
cn.lokasi, cn.serbuk, cn.tgl, cn.varietas];
110
ÙPDATE buat_baru
(asal,jumlah,klmpk,lokasi,serbuk,tgl,varietas)
SET
asal = ?,
jumlah = ?,
klmpk = ? ,
lokasi = ? ,
serbuk = ? ,
tgl = ? ,
varietas = ?
WHERE idgroup = ${cn.idgroup}`, data)
.then(data => {
})
}
/**
*
*
id_bibit TEXT PRIMARY KEY,
id_kirim TEXT,
tgl TEXT,
lokasi_asal TEXT,
lokasi_tujuan TEXT,
no_surat TEXT,
nama_supir TEXT,
nama_kawal TEXT,
ket TEXT
*
*/
loadKirimOff(){
offline_kirim', []).then(data => {
let kirimoff: KirimOff[] = [];
// let val = [];
// }
kirimoff.push({
id_kirim: data.rows.item(i).id_kirim,
lokasi_asal: data.rows.item(i).lokasi_asal,
lokasi_tujuan: data.rows.item(i).lokasi_tujuan,
no_surat: data.rows.item(i).no_surat,
nama_supir: data.rows.item(i).nama_supir,
111
nama_kawal: data.rows.item(i).nama_kawal,
ket: data.rows.item(i).ket
});
}
}
this.kirim_off.next(kirimoff);
});
}
getKirimOff(id_bibit): Promise<KirimOff> {
offline_kirim WHERE id_bibit = ?', [id_bibit]).then(data =>
{
// let skills = [];
// }
let i = 0;
return {
id_kirim: data.rows.item(i).id_kirim,
lokasi_asal: data.rows.item(i).lokasi_asal,
lokasi_tujuan: data.rows.item(i).lokasi_tujuan,
no_surat: data.rows.item(i).no_surat,
nama_supir: data.rows.item(i).nama_supir,
nama_kawal: data.rows.item(i).nama_kawal,
ket: data.rows.item(i).ket
}
});
}
updateKirimOff(kof: KirimOff) {
let data =
[kof.id_bibit,kof.id_kirim,kof.tgl,kof.lokasi_asal,kof.lokas
i_tujuan,kof.no_surat,kof.nama_supir,kof.nama_kawal,kof.ket]
;
ÙPDATE offline_kirim
(id_bibit,id_kirim,tgl,lokasi_asal,lokasi_tujuan,no_surat,na
ma_supir,nama_kawal,ket)
SET
id_bibit = ?,
id_kirim = ?,
tgl = ?,
lokasi_asal = ?,
lokasi_tujuan = ?,
no_surat = ?,
nama_supir = ?,
nama_kawal = ?,
112
ket = ?
WHERE id_bibit = ${kof.id_bibit}`, data)
.then(data => {
this.loadKirimOff();
})
}
addKirimOff(id_bibit, id_kirim, tgl, lokasi_asal,

lokasi_tujuan, no_surat, nama_supir, nama_kawal, ket) {
let data =
[id_bibit.toString(),id_kirim.toString(),tgl.toString(),loka
si_asal.toString(),lokasi_tujuan.toString(),no_surat.toStrin
g(),nama_supir.toString(),nama_kawal.toString(),ket.toString
()];
return this.database.executeSql('INSERT INTO

offline_kirim (id_bibit, id_kirim, tgl, lokasi_asal,
lokasi_tujuan, no_surat, nama_supir, nama_kawal, ket) VALUES
(?, ?, ?, ?, ?, ?, ?, ?,?)', data).then(data => {
});
}
deleteKirimOff(id_bibit) {
return this.database.executeSql('DELETE FROM
offline_kirim WHERE id_bibit = ?', [id_bibit]).then(_ => {
});
}
// End
//
//
addAkunOff(lokbit, nama, nohp, passw, uname) {

let data = [uname.toString(), passw.toString(),
lokbit.toString(), nama.toString(), nohp.toString()];
return this.database.executeSql('INSERT INTO
offline_akun (uname, passw, lokbit, nama, nohp) VALUES
(?, ?, ?, ?, ?)', data).then(data => {
this.loadAkunOff();
});
}
deleteAkunOff() {
return this.database.executeSql('DELETE FROM
offline_akun WHERE 1').then(_ => {
this.loadAkunOff();
});
113
loadAkunOff() {
offline_akun', []).then(data => {
let akunoff: AkunOff[] = [];
// let val = [];
// }
akunoff.push({
uname: data.rows.item(i).uname,
passw: data.rows.item(i).passw,
lokbit: data.rows.item(i).lokbit,
nama: data.rows.item(i).nama,
nohp: data.rows.item(i).nohp
});
}
}
this.akun_off.next(akunoff);
});
}
}

SIDANG - 1507115719 - LUKMANNIL HAKIM (31-Maret)

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

SIDANG - 1507115719 - LUKMANNIL HAKIM (31-Maret)

Diunggah oleh

Hak Cipta:

Format Tersedia

SKRIPSI

RANCANG BANGUN APLIKASI TRACKING BIBIT

PROGRAM STUDI TEKNIK INFORMATIKA

Pekanbaru, 3 Desember 2019

1.1 Latar Belakang..........................................................................................1

1.2 Rumusan Masalah.....................................................................................3

1.3 Tujuan Penelitian.......................................................................................3

1.4. Batasan Masalah........................................................................................4

1.5 Sistematika Penulisan................................................................................4

BAB II LANDASAN TEORI................................................................................6

2.1 Teori yang Relevan...................................................................................6

2.1.1 Aplikasi Mobile..................................................................................6

2.1.2 Database Management System (DBMS)...........................................7

2.1.3 Hypertext Markup Language (HTML)..............................................7

2.1.5 Syntactically Awesome Style Sheets (Sass)........................................8

2.1.6 JavaScript Object Notation (JSON)...................................................9

2.1.7 Structured Query Language (SQL)...................................................9

2.1.8 Web Browser....................................................................................10

2.1.10 Ionic Framework..............................................................................10

2.1.11 Apache Cordova...............................................................................11

2.1.12 Mobile Hybrid Application..............................................................11

2.1.13 Tracking System...............................................................................12

2.1.14 Black Box Testing............................................................................13

2.2 Penelitian Terdahulu...............................................................................14

BAB III METODOLOGI PENELITIAN..........................................................19

3.1 Tempat Penelitian....................................................................................19

3.2 Metode Pengumpulan Data.....................................................................19

3.2.1 Metode Wawancara.........................................................................19

3.2.2 Metode Observasi............................................................................19

3.3 Metode Pengembangan Sistem...............................................................19

3.4 Analisis Kebutuhan Sistem.....................................................................20

3.4.1 Analisis Kebutuhan Input................................................................21

3.4.2 Analisis Kebutuhan Output..............................................................21

3.4.3 Analisis Kebutuhan Proses..............................................................21

3.4.4 Analisis Kebutuhan Perangkat Lunak..............................................22

3.4.5 Analisis Kebutuhan Perangkat Keras...............................................22

3.5 Perancangan Sistem.................................................................................23

3.5.1 Use Case Diagram...........................................................................23

3.5.3 Perancangan Database.....................................................................34

3.8 Analisa Hasil Pengujian..........................................................................41

Gambar 3.1 Tahapan pengerjaan sistem...............................................................20

1.1 Latar Belakang

melakukan penelitian di Dinas Perpustakaan dan Arsip Kota Pekanbaru berjudul

1.2 Rumusan Masalah

1.3 Tujuan Penelitian

1.4. Batasan Masalah

1. Penulis hanya mengembangkan aplikasi mobile untuk akun pengguna,

1.5 Sistematika Penulisan

BAB II TINJAUAN PUSTAKA

Tinjauan pustaka berisi tentang penelitian terkait dan teori-teori yang

BAB III METODOLOGI PENELITIAN

Metodologi penelitian berisi tentang langkah-langkah perancangan dan

BAB IV HASIL DAN PEMBAHASAN

Hasil dan pembahasan berisi tentang laporan realisasi dan penerapan

BAB V KESIMPULAN DAN SARAN

2.1 Teori yang Relevan

2.1.2 Database Management System (DBMS)

2.1.3 Hypertext Markup Language (HTML)

2.1.5 Syntactically Awesome Style Sheets (Sass)

2.1.6 JavaScript Object Notation (JSON)

2.1.7 Structured Query Language (SQL)

objek-objek didalamnya. Berbeda dengan DDL, DML berfungsi untuk

2.1.8 Web Browser

2.1.10 Ionic Framework