Membangun Prototipe Aplikasi Todo dengan IGNSDK

1. Selayang Pandang tentang IGNSDK

IGN SDK merupakan kependekan dari IGOS Nusantara Software Development Kit. Sebuahperangkat yang membantu Anda membangun aplikasi desktop berbasis web. Tentunya teknologiweb yang dapat digunakan di IGN SDK antara lain HTML, CSS, Javascript, HTML5, CSS3, danAJAX. Teknologi web lainnya seperti Jquery dan Twitter Bootstrap dapat digunakan di IGN SDKunuk membangun aplikasi desktop yang Anda idamkan yang mengandalkan kemampuan webprogramming yang dimiliki.

IGN SDK versi 1.1.5 yang akan dibahas ditutorial ini dikembangkan menggunakan Qt Frameworkversi 5. Dengan bantuan QtWebkit, Anda dapat menggunakan developer tools yang terdapat dibrowser yang berbasis Webkit seperti Google Chrome dan Safari. Sehingga ketika mengembangkanaplikasi dengan IGN SDK, selain dengan bantuan console konvensional yang ada di sistem operasiAnda, dapat juga menggunakan developer tools yang dapat digunakan ketika Anda menjalankanaplikasi IGN SDK.

IGN SDK ini dikembangkan oleh Ibnu Yahya a.k.a Eka Tresna Irawan bersama Surya HandikaPutratama, Dwiyan Galuh Wajatmaka, Andi Sugandi, dan Arief Eko Pratono. Mereka tergabung kedalam sebuah tim yang bertujuan untuk melakukan inovasi di IGOS Nusantara. IGOS Nusantarasendiri adalah sebuah distro Linux yang dikembangkan oleh Pak Nana Suryana dari LIPI Indonesia.

Lalu kenapa membangun aplikasi desktop dengan IGN SDK? Selain mempermudah Anda denganmenggunakan teknologi web sebagai basisnya. IGN SDK memiliki beberapa fitur berikut untukmendukung 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, Andasudah dapat memulai membuat aplikasi hybrid di sistem operasi Anda. Saat ini IGN SDK hanyamendukung untuk Linux. Jadi bagi Anda yang tertarik silahkan coba install Linux terlebih dahulu diLaptop Anda. Mungkin Anda dapat membuatnya dual boot atau single boot.

2. Instalasi IGNSDK

Instalasi IGNSDK ini bergantung kepada dua metode. Jika Anda menggunakan package manageryang ada di sebuah distro Linux maka simaklah cara berikut:

• Instalasi di IGOS Nusantara: buka terminal terlebih dahulu. Untuk memasang peluncuraplikasi 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 diUbuntu dengan perintah: sudo apt-add-repository ppa:ubunteroz/ppa. Kemudian lakukanpembaharuan indeks repositori Ubuntu Anda dengan perintah: sudo apt-get update. Setelahproses pembaharuan selesai install peluncur IGNSDK dengan perintah: sudo apt-get installignsdk. Untuk memasang alat bantu pembuat dan pemaket aplikasi IGNSDK lakukandengan perintah: sudo apt-get install ignsdk-devtools. Tentunya Anda dapat memasangpula 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 aplikasiIGNSDK tersebut. Misalnya kita akan mencoba menjalankan aplikasi Calculator yang dibangunmenggunakan IGNSDK. Anda dapat menjalankannya dengan perintah berikut: ignsdk -p/usr/share/ign-sdk/test/calculator.ign

Dimana calculator.ign adalah direktori yang berisisource code dari aplikasi yang kita bangunmenggunakan IGNSDK. Untuk IGOS Nusantara,contoh aplikasi sudah disertakan di paket “ignsdk”.

Setelah instalasi, di direktori/home/username_kamu/ akan terdapat sebuahdirektori yang bernama IGN-SDK-APP dimanadirektori tersebut akan digunakan untuk tempatAnda menyimpan aplikasi IGNSDK yang dibangunoleh Anda.

Selanjutnya di NyanProject kali ini, kita akanmenggunakan Ubuntu sebagai lingkungan untukmelakukan percobaan kita membangun aplikasitodo dengan IGNSDK. Jadi siapkanlah Ubuntu dimesinmu :D.

3. Konsep Aplikasi yangAkan Dibangun

Sebelum mulai membasahi jari kitadengan keringat karena menulis kodeprogram, mari kita pahami konsepaplikasi yang akan dibangun:

1. Terdapat halaman utama yangmenampilkan daftar todo yangtelah 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 utama3. Pengguna dapat menghapus todo ketika berada di halaman utama4. Pengguna dapat menyunting todo ketika berada di halaman utama5. Terdapat halaman about yang akan memperlihatkan informasi pengembang aplikasi

IGNSDK

Anda akan membutuhkan asset yang digunakan di NyanProject ini. Asset tersebut berupa fileJquery, Jquery UI, dan CSS dari Jquery UI. Anda dapat menggunakannya dari source code yangdisertakan dengan majalah ini.

4. Rancangan Database yang Akan Dibangun

Kita akan menggunakan SQLite3 sebagai RDBMS yang digunakan untuk mengelola todo diaplikasi yang akan kita bangun. Di dalam pembangunan aplikasi todo ini akan digunakan skemaseperti 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.dbSQLite 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 Browserdi 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

Kemudian bukalah file database ignsdk_todo.db dengan SQLite Database Browser. Maka akanterlihat seperti pada gambar berikut ini:

5

Illustration 4: Memilih aplikasi SQLite Browser

Illustration 5: SQLite Browser sudah terinstall

Dengan menggunakan SQLite Database Browser, Anda dapat melihat struktur tabel, memodifikasitabel, 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 yangberisi informasi pengembang dari aplikasi IGNSDK. Hal ini didahulukan karena kita akanmengenal cara kerja yang paling sederhana dari IGNSDK dalam menjalankan aplikasi yang berjalandiatasnya.

Karena kita belum membuat projek dengan IGNSDK, kita akan menginisiasi terlebih dahuluaplikasi todo yang akan kita bangun dengan membuat projek IGNSDK baru. Pastikan Anda beradadi dalam direktori /home/username_kamu/IGNSDK-APP kemudian ketik perintah berikut diterminal:

username@username:~/IGNSDK-APP$ ignsdk-app-creator -p ignsdk-todo

Sesaat setelah mengeksekusi perintah pembuatan projek IGNSDK diatas, kita akan disajikan opsiuntuk menentukan termasuk kedalam kategori apakah aplikasi IGNSDK kita seperti ini:

6

Illustration 6: Database ignsdk-todo.db dibuka di SQLite Browser

Illustration 7: Masuk ke direktori IGNSDK-APP

Ketika aplikasi ignsdk dihasilkan oleh ignsdk-app-creator akan terdapat struktur folder dan file didalam folder aplikasi tersebut. Berikut penjelasan dari masing – masing folder dan file di dalamfolder 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 8: Membuat proyek IGNSDK baru dengan ignsdk-app-creator dan menentukan nama serta kategori aplikasi

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 sudahdisertakan oleh majalah nyankod edisi ke – 18 ini ke dalam folder proyek. Kemudian fileignsdk_todo.db yang telah dibuat di direktori /home/username_kamu/Documents pindahkanlahke direktori proyek IGNSDK yang baru saja dibuat. Setelah melihat penjelasan diatas, sekarangmari 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 UI2. 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 untukmempermudah 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 adabeberapa antarmuka yang menggunakan Jquery UI

4. Karena IGNSDK hampir sebagian besar menggunakan Javascript dan HTML5. Logikaaplikasi akan disimpan di dalam file Javascript terpisah, atau dapat disimpan di halamanHTML yang akan digunakan di setiap state aplikasi. Di dalam tag <script></script>, kitamembuat tiga buah variabel yang ketiganya akan selalu digunakan di aplikasi yang kitabangun. Kita membuat variabel sys yang menyimpan objek system IGNSDK, variabel sqlyang menyimpan objek untuk manipulasi database dengan SQL, dan variabel driver yangakan 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 kembalidengan menggunakan efek fadeIn()

6. Di dalam tag <body><body> terdapat dua div yaitu #menu-bar untuk menyimpan daftarmenu dan #display-area untuk menampilkan konten sesuai dengan menu yang diminta. Didalam #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 -pignsdk-todo.ign

8. Setelah muncul sebuah window dari IGNSDK, silahkan klik tombol #about-button danlihat hasilnya

9. Dan sekarang Anda sudah mengetahui alur dasar untuk membangun aplikasi IGNSDK. Ayomelangkah ke tahap selanjutnya :D

9

Illustration 10: Halaman about di IGNSDK Todo

6. Koneksi ke SQLite3

Modifikasilah file index.html, dengan mengikuti perubahan berikut. Jika Anda melihat tanda … didalam suatu fungsi itu berarti ada sebuah source code didalam fungsi tersebut.

<!doctype html><html>

<head>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<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() { 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 />"; } $('#form-update-task').hide(); $('#display-area').hide(); $('#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 jugamemanggil show_all_task() saat tombol #browse-data-button diklik. Tapi dimanakahfunction show_all_task() berada?

2. Di luar $(document).ready(), kita membuat sebuah function yang bernamashow_all_task(). Di dalam function tersebut kita membuat sebuah variabel bernama queryyang berfungsi untuk menerima hasil query yang dieksekusi oleh sql.query(). Kitamelakukan query dengan perintah: select * from task

3. Kemudian kita mengiterasi hasil query dan menampungnya di variabel result karena akanditampilkan di #display-area

4. Di setiap iterasi kita membubuhkan link untuk update dan hapus task5. kita sembunyikan elemen #display-area terlebih dahulu kemudian ditampilkan lagi dengan

efek fadeIn()

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> // 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() {

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

$('#new-task-button').click(function(){ $('#form-update-task').hide();

11

Illustration 11: Halaman daftar tugas IGNSDK Todo setelah terkoneksi ke SQLite3

$('#display-area').hide(); var form_add = 'views/form-add.html'; $('#display-area').load(form_add).fadeIn('fast'); }); });

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

</body></html>

Di dalam function tersebut akan terjadi proses untuk menampilkan form tambah task danmenyembunyikan daftar task yang ada di halaman utama. Pada fungsi diatas, akan dipanggil sebuahfile HTML lain yang berisi form tambah task, yaitu form_add.html yang tersimpan di folder views.Oleh karena itu buatlah terlebih dahulu folder views di dalam proyek ignsdk-todo.ign kemudianbuatlah file dengan nama form_add.html di dalam folder views.

Salinlah source code berikut ke file form_add.html:

<script type="text/javascript"> // membuat slider untuk prioritas setiap task $( "#priority-slider" ).slider({ orientation: "horizontal", range: "min", min: 0, max: 3, value: 2, slide: function( event, ui ) { $( "#priority-rates" ).val( ui.value ); } }); $( "#priority-rates" ).val( $( "#priority-slider" ).slider( "value" ) ); // membuat datepicker untuk menentukan date_reminder $( "#date-reminder" ).datepicker({dateFormat: 'yy-mm-dd'}); // proses penambahan task dilakukan ketika form-add-task di submit $("#form-add-task").submit(function(){ var sql = ign.sql(); var driver = sql.driver("sqlite", "ignsdk_todo.db"); var task_name = $('#task-name').val(); var priority_rates = $('#priority-rates').val(); var date_reminder = $('#date-reminder').val(); var query = sql.query("insert into task values (null, '"+task_name+"', "+priority_rates+", '"+date_reminder+"')"); console.log("query ketika submit form : "+ query.status); console.log("isi query ketika submit form : " + query.content); return false; }); </script><form id="form-add-task"> <fieldset> <p> <label for="task-name">Task Name:</label>

12

<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 formtambah task seperti slider dan datepicker.

2. Kita membuat slider dengan nama #priority-slider yang memiliki bentuk horisontaldengan nilai minimal 0 dan nilai maksimal 3. Saat pertama kali dimuat, slider akan diaturdi 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 tanggaldengan 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 reminder6. Ketika tombol submit ditekan, maka #form-add-task akan memacu event submit(). Saat

itulah terbentuk objek SQL dari IGNSDK7. Kemudian kita menghubungkan lagi aplikasi dengan ignsdk_todo.db8. Nilai dari setiap field di #form-add-task diambil kemudian disimpan di variabel sementara9. Lalu kita melakukan proses penambahan data dengan query insert ke tabel task

13

Illustration 12: Form tambah task di IGNSDK Todo

8. Membangun Fitur Sunting Todo

Modifikasilah file index.html dengan perubahan berikut. Tambahkan function updateTask() yangakan dieksekusi ketika tombol edit pada daftar task ditekan. Ada juga proses yang akan dieksekusiketika form update di-submit oleh user. Berikut adalah perubahan source code untuk membuat fitursunting task:

<!doctype html><html>

<head> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<script> // menggunakan System dan Database API IGNSDK var sys = ign.sys();

14

Illustration 13: Membuat task baru di IGNSDK Todo

Illustration 14: Tugas baru telah terbuat di IGNSDK Todo

var sql = ign.sql(); var driver = sql.driver("sqlite", "ignsdk_todo.db"); $(document).ready(function() { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // 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); console.log(query.status); console.log(query.content); 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 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 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 dandatepicker yang akan digunakan di form update

2. slider kita atur dengan rentang dari 0 hingga 3 dan nilai awal 23. datepicker kita atur dengan format yy-mm-dd4. 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 queryupdate terhadap tabel task, kemudian kita menghilangkan form update setelah proses update

16

selesai5. 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 yangdipilih. Lalu hasil query kita ambil nilainya per kolom, kemudian memberikan nilainyakepada field di form update yang bersesuaian dengan kolom di tabel task. Terakhir denganmenggunakan .fadeIn() kita memunculkan form update kepada user yang telah diisi datadari task yang dipilih

7. Di bagian terakhir perubahan di index.html, kita menambahkan form update yang hampirserupa dengan form tambah task. Hanya saja, form ini dihilangkan ketika ditampilkanpertama 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() yangakan dieksekusi ketika tombol delete ditekan.

<!doctype html><html>

<head> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<script> // menggunakan System dan Database API IGNSDK var sys = ign.sys(); var sql = ign.sql(); var driver = sql.driver("sqlite", "ignsdk_todo.db"); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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); console.log(query.status); console.log(query.content); } }

</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> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

</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 dihapus3. Sebelum penghapusan, user akan menerima sebuah confirm dialog untuk meyakinkan

apakah task tersebut dihapus atau tidak4. terdapat query delete from task untuk menghapus suatu item

18

19

Illustration 17: Menghapus salah satu task di IGNSDK Todo

Illustration 18: Task yang dipilih telah terhapus

10.Kesimpulan dan Saran

Setelah kita merampungkan NyanProject ini, dapat ditarik beberapa kesimpulan berikut ini:

• Anda dapat membangun aplikasi dekstop dengan menggunakan HTML + CSS sebagaipresentasinya, Javascript sebagai logikanya, dan IGNSDK sebagai API untuk mengaksessistem 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 yangdioptimasi untuk aplikasi desktop

• Perdalam tentang cara kerja WebKit, karena engine tersebut merupakan pijakan dariIGNSDK

20

Illustration 19: Log aplikasi IGNSDK yang sedang running

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