Membuat Aplikasi Todo dengan IGNSDK

Membangun Prototipe Aplikasi Todo dengan IGNSDK
1. Selayang Pandang tentang IGNSDK
IGN SDK merupakan kependekan dari IGOS Nusantara Software Development Kit. Sebuah
perangkat yang membantu Anda membangun aplikasi desktop berbasis web. Tentunya teknologi
web yang dapat digunakan di IGN SDK antara lain HTML, CSS, Javascript, HTML5, CSS3, dan
AJAX. Teknologi web lainnya seperti Jquery dan Twitter Bootstrap dapat digunakan di IGN SDK
unuk membangun aplikasi desktop yang Anda idamkan yang mengandalkan kemampuan web
programming yang dimiliki.
IGN SDK versi 1.1.5 yang akan dibahas ditutorial ini dikembangkan menggunakan Qt Framework
versi 5. Dengan bantuan QtWebkit, Anda dapat menggunakan developer tools yang terdapat di
browser yang berbasis Webkit seperti Google Chrome dan Safari. Sehingga ketika mengembangkan
aplikasi dengan IGN SDK, selain dengan bantuan console konvensional yang ada di sistem operasi
Anda, dapat juga menggunakan developer tools yang dapat digunakan ketika Anda menjalankan
aplikasi IGN SDK.
IGN SDK ini dikembangkan oleh Ibnu Yahya a.k.a Eka Tresna Irawan bersama Surya Handika
Putratama, Dwiyan Galuh Wajatmaka, Andi Sugandi, dan Arief Eko Pratono. Mereka tergabung ke
dalam sebuah tim yang bertujuan untuk melakukan inovasi di IGOS Nusantara. IGOS Nusantara
sendiri adalah sebuah distro Linux yang dikembangkan oleh Pak Nana Suryana dari LIPI Indonesia.
Lalu kenapa membangun aplikasi desktop dengan IGN SDK? Selain mempermudah Anda dengan
menggunakan teknologi web sebagai basisnya. IGN SDK memiliki beberapa fitur berikut untuk
mendukung pembuatan aplikasi hybrid di Linux:
- File System
- Database
- System
- Window Function
- Debugging
- Load Binary
- Trigger
- IGN SDK App Creator
Menarik kan? Dengan menggunakan teknologi web seperti HTML + CSS + Javascript saja, Anda
sudah dapat memulai membuat aplikasi hybrid di sistem operasi Anda. Saat ini IGN SDK hanya
mendukung untuk Linux. Jadi bagi Anda yang tertarik silahkan coba install Linux terlebih dahulu di
Laptop Anda. Mungkin Anda dapat membuatnya dual boot atau single boot.
2. Instalasi IGNSDK
Instalasi IGNSDK ini bergantung kepada dua metode. Jika Anda menggunakan package manager
yang ada di sebuah distro Linux maka simaklah cara berikut:
• Instalasi di IGOS Nusantara: buka terminal terlebih dahulu. Untuk memasang peluncur
aplikasi IGNSDK gunakan perintah: sudo yum install ignsdk. Untuk memasang alat bantu
1

dan pemaket aplikasi IGNSDK gunakan perintah berikut: sudo yum install ignsdk-devtools.
Kemudian keluarlah dari terminal dengan perintah: exit
• Instalasi di Ubuntu: buka terminal terlebih dahulu. Tambahkan repositori IGNSDK di
Ubuntu dengan perintah: sudo apt-add-repository ppa:ubunteroz/ppa. Kemudian lakukan
pembaharuan indeks repositori Ubuntu Anda dengan perintah: sudo apt-get update. Setelah
proses pembaharuan selesai install peluncur IGNSDK dengan perintah: sudo apt-get install
ignsdk. Untuk memasang alat bantu pembuat dan pemaket aplikasi IGNSDK lakukan
dengan perintah: sudo apt-get install ignsdk-devtools. Tentunya Anda dapat memasang
pula contoh aplikasi IGNSDK dengan perintah: sudo apt-get install ignsdk-examples.
Kemudian keluarlah dari terminal dengan perintah: exit
• Untuk instalasi distro Linux lain, Anda dapat menyimaknya disini:
https://github.com/anak10thn/ignsdk-qt
Jika Anda memasang ignsdk-examples di Ubuntu. Anda dapat menjalankan contoh aplikasi
IGNSDK tersebut. Misalnya kita akan mencoba menjalankan aplikasi Calculator yang dibangun
menggunakan IGNSDK. Anda dapat menjalankannya dengan perintah berikut: ignsdk -p
/usr/share/ign-sdk/test/calculator.ign
Dimana calculator.ign adalah direktori yang berisi
source code dari aplikasi yang kita bangun
menggunakan IGNSDK. Untuk IGOS Nusantara,
contoh aplikasi sudah disertakan di paket “ignsdk”.
Setelah instalasi, di direktori
/home/username_kamu/ akan terdapat sebuah
direktori yang bernama IGN-SDK-APP dimana
direktori tersebut akan digunakan untuk tempat
Anda menyimpan aplikasi IGNSDK yang dibangun
oleh Anda.
Selanjutnya di NyanProject kali ini, kita akan
menggunakan Ubuntu sebagai lingkungan untuk
melakukan percobaan kita membangun aplikasi
todo dengan IGNSDK. Jadi siapkanlah Ubuntu di
mesinmu :D.
3. Konsep Aplikasi yang
Akan Dibangun
Sebelum mulai membasahi jari kita
dengan keringat karena menulis kode
program, mari kita pahami konsep
aplikasi yang akan dibangun:
1. Terdapat halaman utama yang
menampilkan daftar todo yang
telah ditulis
2. Terdapat fitur tambah todo
2
Illustration 1: ignsdk calculator
Illustration 2: ignsdk kuma

dengan menekan tombol tambah todo yang terdapat di bagian atas halaman utama
3. Pengguna dapat menghapus todo ketika berada di halaman utama
4. Pengguna dapat menyunting todo ketika berada di halaman utama
5. Terdapat halaman about yang akan memperlihatkan informasi pengembang aplikasi
IGNSDK
Anda akan membutuhkan asset yang digunakan di NyanProject ini. Asset tersebut berupa file
Jquery, Jquery UI, dan CSS dari Jquery UI. Anda dapat menggunakannya dari source code yang
disertakan dengan majalah ini.
4. Rancangan Database yang Akan Dibangun
Kita akan menggunakan SQLite3 sebagai RDBMS yang digunakan untuk mengelola todo di
aplikasi yang akan kita bangun. Di dalam pembangunan aplikasi todo ini akan digunakan skema
seperti berikut:
CREATE TABLE task (
id INTEGER PRIMARY KEY,
name VARCHAR(200) NOT NULL,
priority INTEGER,
date_reminder DATE);
Kita install terlebih dahulu SQLite3 dengan perintah berikut di terminal:
# sudo su
# apt-get install sqlite3
Lalu kita buat terlebih dahulu database SQLite3 yang akan digunakan dengan perintah berikut:
# cd /home/username_kamu/Documents
# sqlite3 ignsdk_todo.db
Anda akan memasuki konsol sqlite3 seperti berikut:
# sqlite3 ignsdk_todo.db
SQLite version 3.8.2 2013-12-06 14:53:30
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>
Lalu masukkan query untuk membuat tabel task diatas ke dalam konsol yang baru saja dibuka. :
sqlite> CREATE TABLE task (
...> id INTEGER PRIMARY KEY,
...> name VARCHAR(200) NOT NULL,
...> priority INTEGER,
...> date_reminder DATE);
sqlite>
sqlite> .tables
task
3

sqlite> .schema task
CREATE TABLE task (
id INTEGER PRIMARY KEY,
name VARCHAR(200) NOT NULL,
priority INTEGER,
date_reminder DATE);
sqlite>
Untuk melihat isi database ignsdk_todo.db, Anda dapat menggunakan SQLite Database Browser
di Ubuntu. Install SQLite Browser dengan cara berikut:
• Buka Ubuntu Software Center
• Ketik “sqlite browser”
• Pilih aplikasi yang bernama SQLite database browser
• Kemudian tekan tombol install yang terletak di bagian kanan halaman detail aplikasi
• Pastikan koneksi internet Anda tersedia karena proses instalasi memerlukan koneksi internet
4
Illustration 3: Ubuntu Software Center

Illustration 4: Memilih aplikasi SQLite Browser
Illustration 5: SQLite Browser sudah terinstall
Kemudian bukalah file database ignsdk_todo.db dengan SQLite Database Browser. Maka akan
terlihat seperti pada gambar berikut ini:
5

Illustration 6: Database ignsdk-todo.db dibuka di SQLite Browser
Dengan menggunakan SQLite Database Browser, Anda dapat melihat struktur tabel, memodifikasi
tabel, membuat tabel, menghapus tabel, dan menambahkan data baru pada tabel.
5. Membuat Halaman dengan IGNSDK
Ok, kita akan membangun hal yang paling dasar dulu yaitu menampilkan sebuah teks statis yang
berisi informasi pengembang dari aplikasi IGNSDK. Hal ini didahulukan karena kita akan
mengenal cara kerja yang paling sederhana dari IGNSDK dalam menjalankan aplikasi yang berjalan
diatasnya.
Karena kita belum membuat projek dengan IGNSDK, kita akan menginisiasi terlebih dahulu
aplikasi todo yang akan kita bangun dengan membuat projek IGNSDK baru. Pastikan Anda berada
di dalam direktori /home/username_kamu/IGNSDK-APP kemudian ketik perintah berikut di
terminal:
username@username:~/IGNSDK-APP$ ignsdk-app-creator -p ignsdk-todo
Sesaat setelah mengeksekusi perintah pembuatan projek IGNSDK diatas, kita akan disajikan opsi
untuk menentukan termasuk kedalam kategori apakah aplikasi IGNSDK kita seperti ini:
6
Illustration 7: Masuk ke direktori IGNSDK-APP

Illustration 8: Membuat proyek IGNSDK baru dengan ignsdk-app-creator dan menentukan nama
serta kategori aplikasi
Ketika aplikasi ignsdk dihasilkan oleh ignsdk-app-creator akan terdapat struktur folder dan file di
dalam folder aplikasi tersebut. Berikut penjelasan dari masing – masing folder dan file di dalam
folder ignsdk-todo.ign:
• debian, di dalam direktori ini terdapat informasi seperti changelog, hak cipta, dokumentasi,
README dari aplikasi IGNSDK yang kita bangun
• icons, di dalam direktori ini terdapat icon yang dapat digunakan oleh aplikasi IGNSDK
• menu, berisi file yang digunakan untuk konfigurasi aplikasi IGNSDK ke desktop
environment yang dijadikan target aplikasi IGNSDK
• app.spec, file yang berisi konfigurasi yang dihasilkan ketika aplikasi IGNSDK di-generate
oleh ignsdk-app-creator
• ignsdk.json, berisi konfigurasi aplikasi IGNSDK seperti transparasi jendela aplikasi, ukuran
layar, mengaktifkan debugging, dan mengaktifkan fitur keamanan
7
Illustration 9: Pembuatan aplikasi IGNSDK baru

• index.html, file bawaan IGNSDK yang sudah berisi contoh source code HTML +
Javascript. Disinilah Anda dapat memulai mengerjakan aplikasi IGNSDK
Sebelum memulai pengerjaan, silahkan pindahkan terlebih dahulu folder asset yang sudah
disertakan oleh majalah nyankod edisi ke – 18 ini ke dalam folder proyek. Kemudian file
ignsdk_todo.db yang telah dibuat di direktori /home/username_kamu/Documents pindahkanlah
ke direktori proyek IGNSDK yang baru saja dibuat. Setelah melihat penjelasan diatas, sekarang
mari kita modifikasi file index.html dengan source code dibawah ini:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="asset/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="qrc:///js/jquery.js"></script>
<script type="text/javascript" src="qrc:///js/ign.js"></script>
<script src="asset/ui/jquery.ui.core.js"></script>
<script src="asset/ui/jquery.ui.widget.js"></script>
<script src="asset/ui/jquery.ui.mouse.js"></script>
<script src="asset/ui/jquery.ui.slider.js"></script>
<script src="asset/ui/jquery.ui.datepicker.js"></script>
<script>
// menggunakan System dan Database API IGNSDK
var sys = ign.sys();
var sql = ign.sql();
var driver = sql.driver("sqlite", "ignsdk_todo.db");
$(document).ready(function() {
$('#about-button').click(function(){
$('#form-update-task').hide();
$('#display-area').hide();
var about = '<h1>Created by Nyankod ;(), copyright 2014.</h1>';
$('#display-area').fadeIn('slow').html(about);
});
});
</script>
</head>
<body>
<div id="menu-bar">
<ul style="list-style-type:none; margin:10px 20px 20px 20px ; padding:20px;">
<li style="display: inline;"><a id="browse-data-button" href="javascript:void(0)">Browse Data</a></li>
<li style="display: inline;"><a id="new-task-button" href="javascript:void(0)">New Task</a></li>
<li style="display: inline;"><a id="about-button" href="javascript:void(0)">About</a></li>
</ul>
</div>
<div id="display-area">
</div>
</body>
</html>
Mari kita perhatikan beberapa hal dari source code diatas.
1. Di bagian link kita memuat file CSS untuk Jquery UI
2. Di bagian script kita memuat jquery.js dan ign.js dari sistem IGNSDK. Hal tersebut
ditandai dengan adanya awalan path qrc:/. File jquery.js akan digunakan untuk
mempermudah pembuatan kode Javascript, sedangkan ign.js berisi API yang merupakan
8

kegunaan spesifik dari IGNSDK.
3. Selanjutnya kita memuat modul Javascript yaitu jquery.ui.core.js, jquery.ui.widget.js,
jquery.ui.mouse.js, jquery.ui.slider.js, dan jquery.ui.datepicker.js karena akan ada
beberapa antarmuka yang menggunakan Jquery UI
4. Karena IGNSDK hampir sebagian besar menggunakan Javascript dan HTML5. Logika
aplikasi akan disimpan di dalam file Javascript terpisah, atau dapat disimpan di halaman
HTML yang akan digunakan di setiap state aplikasi. Di dalam tag <script></script>, kita
membuat tiga buah variabel yang ketiganya akan selalu digunakan di aplikasi yang kita
bangun. Kita membuat variabel sys yang menyimpan objek system IGNSDK, variabel sql
yang menyimpan objek untuk manipulasi database dengan SQL, dan variabel driver yang
akan menyimpan objek untuk mengakses database.
5. Masih di dalam tag <script></script>, kita membuat event handler untuk tombol #about-button
saat diklik. Ketika diklik, #display-area akan disembunyikan terlebih dahulu,
kemudian diisin dengan informasi pengembang aplikasi todo, dan ditampilkan kembali
dengan menggunakan efek fadeIn()
6. Di dalam tag <body><body> terdapat dua div yaitu #menu-bar untuk menyimpan daftar
menu dan #display-area untuk menampilkan konten sesuai dengan menu yang diminta. Di
dalam #menu-bar terdapat tiga buah tombol yaitu #browse-data-button, #new-task-button,
dan #about-button
7. Nah selesai menyalin kode diatas, kita jalankan aplikasi todo ini dengan perintah: ignsdk -p
ignsdk-todo.ign
8. Setelah muncul sebuah window dari IGNSDK, silahkan klik tombol #about-button dan
lihat hasilnya
9. Dan sekarang Anda sudah mengetahui alur dasar untuk membangun aplikasi IGNSDK. Ayo
melangkah ke tahap selanjutnya :D
Illustration 10: Halaman about di IGNSDK Todo
9

6. Koneksi ke SQLite3
Modifikasilah file index.html, dengan mengikuti perubahan berikut. Jika Anda melihat tanda … di
dalam suatu fungsi itu berarti ada sebuah source code didalam fungsi tersebut.
<!doctype html>
<html>
<head>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<script>
show_all_task();
$('#browse-data-button').click(function(){
show_all_task();
});
$('#about-button').click(function(){ ... });
});
// fungsi untuk menampilkan semua task
function show_all_task(){
var query = sql.query("select * from task");
console.log(query.status);
console.log(query.content);
var result ="";
for (var obj in query.content){
console.log(query.content[obj]);
console.log(query.content[obj].name);
result += query.content[obj].name + ", " + query.content[obj].priority + ", " +
query.content[obj].date_reminder
+" | <a onclick='updateTask(this);' id='delete-button-"+query.content[obj].id+"' data-id='"+
query.content[obj].id+"' href='javascript:void(0)'>Edit</a>"
+" | <a onclick='deleteTask(this);' id='delete-button-"+query.content[obj].id+"' data-id='"+
query.content[obj].id+"' href='javascript:void(0)'>Delete</a><br />";
}
$('#display-area').html(result).fadeIn('fast');
};
</script>
</head>
<body>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</body>
</html>
10

Mari kita perhatikan beberapa hal dari source code diatas:
1. Dengan memodifikasi pekerjaan sebelumnya, kita menambahkan sesuatu yang baru disini.
Kita memanggil function show_all_task() saat document sudah ready(), kemudian kita juga
memanggil show_all_task() saat tombol #browse-data-button diklik. Tapi dimanakah
function show_all_task() berada?
2. Di luar $(document).ready(), kita membuat sebuah function yang bernama
show_all_task(). Di dalam function tersebut kita membuat sebuah variabel bernama query
yang berfungsi untuk menerima hasil query yang dieksekusi oleh sql.query(). Kita
melakukan query dengan perintah: select * from task
3. Kemudian kita mengiterasi hasil query dan menampungnya di variabel result karena akan
ditampilkan di #display-area
4. Di setiap iterasi kita membubuhkan link untuk update dan hapus task
5. kita sembunyikan elemen #display-area terlebih dahulu kemudian ditampilkan lagi dengan
efek fadeIn()
Illustration 11: Halaman daftar tugas IGNSDK Todo
setelah terkoneksi ke SQLite3
7. Membangun Fitur Tambah Todo
Modifikasilah file index.html dengan perubahan berikut. Tambahkan $('#new-task-button').
click(); tepat dibawah $('#about-button').click();.
<!doctype html>
<html>
<head>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<script>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$('#new-task-button').click(function(){
11

<input type="text" id="task-name" name="task-name" size="90"/>
</p>
<p>
<label for="priority-rates">Priority:</label>
<input type="text" id="priority-rates" name="priority-rates" style="border:0; color:#f6931f; font-weight:
bold;" />
</p>
<div id="priority-slider" style="height:10px;"></div>
<p>
<label for="date-reminder">Date Reminder:</label>
<input type="text" id="date-reminder" name="date-reminder" size="30" />
</p>
<p>
<input type="submit" value="Save It" />
</p>
</fieldset>
</form>
Mari kita perhatikan beberapa hal dari source code diatas:
1. Kita membuat dan mengatur beberapa widget Jquery UI yang akan digunakan di form
tambah task seperti slider dan datepicker.
2. Kita membuat slider dengan nama #priority-slider yang memiliki bentuk horisontal
dengan nilai minimal 0 dan nilai maksimal 3. Saat pertama kali dimuat, slider akan diatur
di nilai 2. Kemudiain di event slide, slider akan menampilkan nilai yang digeser oleh user
3. Kita membuat datepicker dengan nama #date-reminder yang akan mengambil tanggal
dengan format dddd-mm-yy
4. Kita membuat form dengan id #form-add-task yang dihubungkan dengan event submit()
5. Di dalam #form-add-task terdapat field untuk nama task, priority task, dan date reminder
6. Ketika tombol submit ditekan, maka #form-add-task akan memacu event submit(). Saat
itulah terbentuk objek SQL dari IGNSDK
7. Kemudian kita menghubungkan lagi aplikasi dengan ignsdk_todo.db
8. Nilai dari setiap field di #form-add-task diambil kemudian disimpan di variabel sementara
9. Lalu kita melakukan proses penambahan data dengan query insert ke tabel task
Illustration 12: Form tambah task di IGNSDK Todo
13

Illustration 13: Membuat task baru di IGNSDK Todo
Illustration 14: Tugas baru telah terbuat di IGNSDK Todo
8. Membangun Fitur Sunting Todo
Modifikasilah file index.html dengan perubahan berikut. Tambahkan function updateTask() yang
akan dieksekusi ketika tombol edit pada daftar task ditekan. Ada juga proses yang akan dieksekusi
ketika form update di-submit oleh user. Berikut adalah perubahan source code untuk membuat fitur
sunting task:
<!doctype html>
<html>
<head>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<script>
14

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// membuat slider untuk prioritas setiap task
$( "#priority-update-slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 3,
value: 2,
slide: function( event, ui ) {
$( "#priority-update-rates" ).val( ui.value );
}
});
$( "#priority-update-rates" ).val( $( "#priority-update-slider" ).slider( "value" ) );
// membuat datepicker untuk menentukan date_reminder
$( "#date-update-reminder" ).datepicker({dateFormat: 'yy-mm-dd'});
// proses pengubahan task dilakukan ketika form-add-task di submit
$("#form-update-task").submit(function(){
var task_name = $('#task-update-name').val();
var priority_rates = $('#priority-update-rates').val();
var date_reminder = $('#date-update-reminder').val();
var id = $('#id-task-hidden').val();
var query = sql.query("update task set name='"+task_name+"', priority="+priority_rates+",
date_reminder='"+date_reminder+"' where id="+id);
console.log("query ketika submit form : "+ query.status);
console.log("isi query ketika submit form : " + query.content);
return false;
$(this).fadeOut();
});
$('#cancel-update-button').click(function(){
$("#form-update-task").fadeOut();
});
});
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function updateTask(task){
var id = $(task).attr('data-id');
var query = sql.query("select * from task where id="+id);
var obj;
for (item in query.content){
console.log(query.content[item].id+" "+query.content[item].name);
$('#task-update-name').val(query.content[item].name);
$('#date-update-reminder').val(query.content[item].date_reminder);
$('#priority-update-rates').val(query.content[item].priority);
$('#priority-update-slider').slider("value", query.content[item].priority);
$('#id-task-hidden').val(query.content[item].id);
}
15

$('#form-update-task').fadeIn("fast");
console.log('task yang akan diupdate adalah : ' + id);
}
</script>
</head>
<body>
<div id="menu-bar">
</ul>
</div>
<div style="margin-bottom:30px;">
<form id="form-update-task" style="display:none;">
<fieldset>
<p>
<label for="task-update-name">Task Name:</label>
<input type="text" id="task-update-name" name="task-name" size="90"/>
</p>
<p>
<label for="priority-update-rates">Priority:</label>
<input type="text" id="priority-update-rates" name="priority-update-rates" style="border:0;
color:#f6931f; font-weight:bold;" />
</p>
<div id="priority-update-slider" style="height:10px;"></div>
<p>
<label for="date-update-reminder">Date Reminder:</label>
<input type="text" id="date-update-reminder" name="date-reminder" size="30" />
</p>
<p>
<input type="hidden" id="id-task-hidden" value="" />
<input type="submit" value="Modify It" /><input type="button" id="cancel-update-button"
value="Cancel" />
</p>
</fieldset>
</form>
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</body>
</html>
Mari kita perhatikan beberapa hal berikut dari source code diatas:
1. Hampir sama dengan source code tambah task, kita mengatur konfigurasi slider dan
datepicker yang akan digunakan di form update
2. slider kita atur dengan rentang dari 0 hingga 3 dan nilai awal 2
3. datepicker kita atur dengan format yy-mm-dd
4. Di dalam $('#form-update-task).submit() terdapat proses pengambilan nilai dari setiap
field di form update, melewatkan nilai yang telah diambil dari form update ke dalam query
update terhadap tabel task, kemudian kita menghilangkan form update setelah proses update
16

selesai
5. Jika user ingin mengurungkan niatnya untuk membatalkan proses update, dapat menekan
tombol cancel yang akan mengeksekusi source code $('#cancel-update-button').click()
yang akan membuat form update hilang
6. Di dalam function updateTask(), kita menangkap id dari task yang akan kita sunting.
Kemudian id tersebut dilewatkan ke dalam query pengambilan task berdasarkan id yang
dipilih. Lalu hasil query kita ambil nilainya per kolom, kemudian memberikan nilainya
kepada field di form update yang bersesuaian dengan kolom di tabel task. Terakhir dengan
menggunakan .fadeIn() kita memunculkan form update kepada user yang telah diisi data
dari task yang dipilih
7. Di bagian terakhir perubahan di index.html, kita menambahkan form update yang hampir
serupa dengan form tambah task. Hanya saja, form ini dihilangkan ketika ditampilkan
pertama kali
17
Illustration 15: Form edit task di IGNSDK
Illustration 16: Task yang dipilih berhasil diedit

9. Membangun Fitur Hapus Todo
Modifikasilah file index.html dengan perubahan berikut. Tambahkan function deleteTask() yang
akan dieksekusi ketika tombol delete ditekan.
<!doctype html>
<html>
<head>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<script>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function deleteTask (task){
var id = $(task).attr('data-id');
if (confirm('Are you sure to delete this task ?')){
var query = sql.query("delete from task where id="+id);
}
}
</script>
</head>
<body>
<div id="menu-bar">
</ul>
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</body>
</html>
Mari kita perhatikan beberapa hal berikut dari source code diatas:
1. Kita membuat sebuah function yang bernama deleteTask();
2. function tersebut mempunyai parameter task yang merupakan id dari task yang akan dihapus
3. Sebelum penghapusan, user akan menerima sebuah confirm dialog untuk meyakinkan
apakah task tersebut dihapus atau tidak
4. terdapat query delete from task untuk menghapus suatu item
18

Illustration 17: Menghapus salah satu task di IGNSDK Todo
Illustration 18: Task yang dipilih telah terhapus
19

10.Kesimpulan dan Saran
Setelah kita merampungkan NyanProject ini, dapat ditarik beberapa kesimpulan berikut ini:
• Anda dapat membangun aplikasi dekstop dengan menggunakan HTML + CSS sebagai
presentasinya, Javascript sebagai logikanya, dan IGNSDK sebagai API untuk mengakses
sistem operasi
• Anda sudah dapat membuat aplikasi CRUD dengan menggunakan IGNSDK
• Anda mengenal apa itu IGNSDK-APP
• Dengan bantuan SQLite3, aplikasi IGNSDK kita memiliki kemampuan untuk menyimpan
data secara persistent
Beberapa saran yang dapat penulis sampaikan antara lain:
• Perdalamlah mempelajari HTML, CSS, dan Javascript sebagai dasar untuk membuat
aplikasi desktop dengan IGNSDK-APP
• Anda dapat memperkaya aplikasi IGNSDK dengan menggunakan WebGL, HTML5, dan
CSS3 agar aplikasi IGNSDK menjadi lebih menawan
• Membangun aplikasi IGNSDK tidak sama dengan membangun aplikasi web yang memiliki
server side scripting. Karena IGNSDK merupakan aplikasi full client side scripting yang
dioptimasi untuk aplikasi desktop
• Perdalam tentang cara kerja WebKit, karena engine tersebut merupakan pijakan dari
IGNSDK
Illustration 19: Log aplikasi IGNSDK yang sedang running
20

11.Referensi
• IGNSDK Wiki: https://github.com/anak10thn/ignsdk-qt/wiki/
• Blog IGNSDK: http://blog.ignsdk.web.id/
• IGNSDK Website: http://ignsdk.web.id
• Kumpulan Contoh Aplikasi IGNSDK: https://github.com/anak10thn/ignsdk-example
• Kumpulan Contoh Aplikasi IGNSDK yang dibangun oleh penulis:
https://github.com/ridwanbejo/my-ignsdk-app
21

Membuat Aplikasi Todo dengan IGNSDK

Recommended

Recommended

More Related Content

Similar to Membuat Aplikasi Todo dengan IGNSDK

Similar to Membuat Aplikasi Todo dengan IGNSDK (20)

More from Ridwan Fadjar

More from Ridwan Fadjar (20)

Membuat Aplikasi Todo dengan IGNSDK