1 MODUL PELATIHAN INTEL XDK Disusun oleh : Yosef Murya Kusuma Ardhana, ST., M.Kom SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM YOGYAKARTA ...
Disusun oleh : Yosef Murya Kusuma Ardhana, ST., M.Kom
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM YOGYAKARTA 2016
Modul Pelatihan Intel XDK
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Kasih buku modul pelatihan intel XDK telah selesai dibuat. Pelatihan intel XDK ini menggunakan development kit yang dibuat oleh Intel untuk membuat aplikasi native untuk perangkat mobile, Bahasa pemrograman yang digunakan adalah HTML5, CSS dan Java Script. Intel XDK adalah aplikasi cross-platform yang tersedia untuk sistem operasi Windows, Linux dan OSX. Mengingat pentingnya menguasai pemahaman pemrograman intel XDK, maka dalam modul pelatihan ini menggunakan pendekatan contoh-contoh dan praktek langkah-demilangkah secara praktis agar mudah untuk dipahami. Setelah mempelajari dan mempraktikkan pemrograman intel XDK diharapkan mampu melakukan development seperti koding, testing, debugging, hingga membuat program sederhana CRUD (Create, Read, Update dan Delete) menggunakan database MySQL. Semoga modul ini memberikan mafaat dan kemudahan bagi para peserta dalam mempelajari dan mengimplementasikan pembuatan aplikasi mobile menggunakan intel XDK.
Teori Singkat Intel XDK Intel XDK merupakan development kit yang dibuat oleh Intel untuk membuat aplikasi native untuk perangkat mobile menggunakan teknologi web seperti HTML5, CSS dan JavaScript. Intel XDK dapat disebut sebagai aplikasi cross-platform yang tersedia untuk sistem operasi Windows, Linux dan OSX. Developer dapat membuat satu aplikasi yang dapat berjalan di banyak platform mobile hanya dengan menggunakan satu basis kode saja. Intel XDK dapat didownload secara gratis melalui https://software.intel.com/en-us/intel-xdk (perusahaan microsoft) yang berfungsi sebagai tools untuk membuat aplikasi ataupun software yang berbasis HTML5. Pada Intel XDK dilengkapi menu Debug yang berfungsi untuk melihat kesalahan ataupun error pada aplikasi yang di buat. Namun perlu diketahui bahwa intel XDK membutuhkan koneksi internet untuk merancang aplikasi. Intel XDK ini hampir sama dengan Dreamweaver yang dapat digunakan untuk merancang ataupun mendesign aplikasinya dengan mudah tanpa membutuhkan keahlian coding, anda dapat mendesign suatu aplikasi hanya dengan melakukan DRAG dan DROP dengan menggunakan tools yang telah disediakan di menu control. Dengan Intel XDK, developer dapat mengompilasi aplikasinya secara online sehingga tidak perlu menginstal berbagai tools seperti Cordova, SDK dan lain sebagainya di komputer sendiri. Dan yang lebih menarik lagi, Intel XDK tidak hanya menyediakan online compiling, tapi juga segala kebutuhan fase development seperti koding, testing, debugging, hingga publishing ke online mobile store seperti App Store dan Play Store.
Install Intel XDK 1. Sebelum melakukan instalasi Intel XDK, anda dapat mendowload software intel XDK versi terbaru pada web resminya yaitu https://software.intel.com/en-us/intel-xdk.
5. Pilih direktori atau folder untuk meletakkan file XDK yang akan diinstal, secara default akan berada pada direktori C:\Users\whospike\AppData\Intel|XDK. Klik tombol Next untuk menuju proses selanjutnya.
6. Setelah memilih direktori atau folder untuk meletakkan file penginstallan intel XDK, langkah selanjutnya klik tombol Next.
7. Jendela Intel XDK Summary akan muncul, pada jendela ini akan terlihat letak destination folder atau tempat penginstalan intel XDK nantinya, klik tombol Install untuk
melakukan
penginstalan
intel
XDK
pada
direktori
C:\Users\whospike\AppData\Intel|XDK sesuai dengan informasi destination folder.
8. Proses penginstallan akan terlihat pada indikator bar berwarna hijau yang berjalan kearah kanan. Tunggulah beberapa saat sampai proses penginstallan intel XDK selesai.
9. Setelah proses penginstallan intel XDK selesai, anda dapat langsung menjalankan program intel XDK dengan memberi tanda centang pada Launch Intel XDK. Jika anda ingin melihat tutorial video dapat memberi tanda centang pada bagian Launch Getting Started Video, atau anda dapat memeri tanda centang juga pada bagian Launch Getting Started Tutorial untuk melihat tutorial dari intel XDK. Klik tombol Finish untuk menutup jendela informasi Intel DK Installation.
10. Setelah menutup jendela Intel DK Installation, maka secara otomatis akan muncul jendela initializing Intel XDK. Tunggulah beberapa saat sampai proses initializing selesai. 7
11. Setelah proses initializing selesai maka akan muncul jendela Welcome to the Intel XDK!, ada 3 pilihan yang dapat anda pilih yaitu Sign Up, Later dan Login. Sebaiknya anda memilih Login karena anda dapat dengan bebas membuat aplikasi tanpa ada durasi waktu (trial), jika anda belum memiliki account di intel.com maka sebaiknya mendaftar terlebih dahulu. Untuk melakukan pendaftaran account baru di intel.com, anda dapat menekan tombol Sign Up, dalam praktikum ini akan saya anggap anda telah atau sudah mendaftar di intel.com, sehinggal anda dapat langsung meng-klik pada bagian Login.
12. Isikan username dan password anda, kemudian klik tombol Sign in untuk masuk kedalam account intel.com
13. Jika anda berhasil dalam melakukan login, maka anda akan melihat jendela Welcome nama anda (yosefmurya), selanjutnya beri tanda centang pada bagian Term and conditions dan pada bagian Please sign in up for… Kemudian klik tombol Submit.
INSTALL XAMPP XAMPP merupakan sebuah perangkat lunak yang bersifat free sehingga bebas digunakan. XAMPP berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri dari Apache HTTP Server, MySQL database dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. XAMPP dikembangkan oleh perusahan apache friends yang memiliki kelebihan untuk bisa berperan sebagai server web Apache untuk simulasi pengembangan website. Tool pengembangan web ini mendukung teknologi web populer seperti PHP, MySQL, dan Perl. Dengan menggunakan perangkat lunak XAMPP, programmer web dapat menguji aplikasi web yang dikembangkan dan mempresentasikannya ke pihak lain secara langsung dari komputer, tanpa perlu terkoneksi ke internet. XAMPP juga dilengkapi fitur manajemen database PHPMyAdmin seperti pada server hosting sungguhan, sehingga pengembang web dapat mengembangkan aplikasi web berbasis database secara mudah. Berikut langkah-langkah menginstall server local atau local host XAMPP : 1. Buka pada folder dengan nama Program Pendukung kemudian klik 2x pada aplikasi xampp-win32-1.8.0-VC9-installer.exe
2. Maka akan terlihat jendela Installer Language seperti terlihat pada gambar dibawah ini. Pastikan tetap dalam pilihan bahasa English, agar nantinya dapat mempermudah dalam proses pembelajaran. Selanjutnya klik tombol OK untuk melanjutkan proses selanjutnya.
3. Jendela XAMPP 1.8.0 win32 akan muncul dengan beberapa informasi berupa kalimat Welcome to the XAMPP 1.8.0 Setup Wizard. Langkah selanjutnya klik tombol Next >
4. Kemudian anda akan diperlihatkan secara default (c:\xampp) direktori atau tempat untuk menginstal XAMPP.
5. Dikarenakan pengalaman penulis maka direktori penginstallan XAMPP diubah kedalam direktori D sehingga pada Destination folder menjadi d:\xampp. Hal ini dikarenakan jika terjadi sesuatu pada komputer atau laptop yang diharuskan untuk menginstal ulang maka program-program project website anda tidak akan hilang karena ditempatkan diluar direktori dari sistem. Ok selanjutnya klik tombol Next > untuk menuju proses selanjutnya.
6. Setelah muncul jendela XAMPP Options, pastikan pada bagian Service Section untuk Install Apache as service dan Install MySQL as service tercentang keduanya, kemudian klik tombol Install.
7. Tunggu beberapa saat karena proses penginstallan XAMPP sedang berjalan.
8. Setelah proses penginstallan selesai maka akan muncul jendela konfigurasi XAMPP, anda diminta untuk menunggu sampai proses configurasi selesai dilakukan (secara otomatis).
9. Proses penginstallan dan configurasi telah selesai dilakukan, hal ini ditunjukkan dengan munculnya jendela dengan informasi yang berisi Completing the XAMPP 1.8.0 Setup Wizard. Langkah selanjutnya klik tombol Finish.
10. Pada saat tombol finish dilakukan maka akan muncul sebuah jendela dimana XAMPP melakukan checking port dan disini anda diminta untuk menunggu beberapa saat sampai proses pengecekan port selesai. Diharapkan untuk tidak menekan tombol x atau close.
11. Selanjutnya XAMPP akan melakukan pengecekan dan installasi Apache yang dalam hal ini nantinya akan digunakan sebagai server dalam membuat sebuah website. Tunggu beberapa saat sampai Apache service memberikan informasi bahwa Apache is starting.
12. Jika pada komputer atau laptop anda muncul jendela informasi Windows Security Alert maka anda dapat langsung menekan tombol Allow access.
13. Selanjutnya akan muncul jedela dengan informasi Service installation finished! Hint: Use also the XAMPP Control Panel to manage service. Untuk menuju proses selanjutnya klik tombol OK.
14. Kemudian klik tombol Yes, jika muncul jendela Congratulations! The installation was successful! Start the XAMPP Control Panel Now?
15. Selanjutnya klik bendera English sebagai bentuk dalam memilih bahasa yang digunakan dalam menggunakan program XAMPP, kemudian klik tombol OK.
16. Nah disini akan terlihat jendela XAMPP Control Panel v3.0.12 dengan tanda centang berwarna hijau pada Apache dan MySQL, hal ini menandakan bahwa kedua sistem tersebut telah aktif.
Membuat CRUD dengan Intel XDK Membuat aplikasi mobile dengan intel XDK dengan metode CRUD dapat menggunakan database MySQL sebagai penampung data. Jika sebelumnya telah melakukan penginstallan XAMPP sebagai server local maka untuk membuat CRUD dengan intel XDK secara sederhana dapat anda ikuti langkah-langkah berikut : 1. Buka web browser Mozilla Firefox kemudian buatlah sebuah database dengan nama dbcrudxdk melalui halaman localhost/phpmyadmin. Setelah halaman phpmyadmin muncul dilayar monitor, klik pada bagian menu tab Databases.
2. Isikan dbcrudxdk dibagian Create database, kemudian klik tombol Create.
3. Setelah database dengan nama dbcrudxdk berhasil dibuat, langkah selanjutnya buatlah tabel dengan nama siswa. Ketikkan nama tabel siswa pada bagian Name kemudian isikan jumlah fieldnya sebanyak 5, selanjutnya klik tombol Go.
4. Langkah selanjutnya, isikan field-field kedalam tabel siswa. Field-field tersebut yaitu id_siswa (int 5) dengan AI (auto increment), nim (varchar 10), nama (varchar 30), alamat (varchar 100) dan telp (varchar 15), kemudian klik tombol Save untuk menyimpannya.
5. Hasilnya akan terlihat sebuah tabel dengan nama siswa telah berhasil dibuat seperti terlihat pada gambar dibawah ini.
6. Setelah membuat database dengan nama dbcrudxdk dengan tabel siswa didalamnya, langkah selanjutnya buatlah folder dengan nama crudxdk di direktori D:\xampp\htdocs . Folder crudxdk ini nantinya untuk menampung file-file PHP.
7. Setelah membuat folder dengan nama crudxdk, selanjutnya bukalah text editor pada komputer atau laptop anda. Pada pelatihan kali ini pemandu menggunakan NotePad++ untuk menuliskan program atau script. Buka NotePad++ kemudian ketikkan script dibawah ini kemudian simpan dengan nama koneksi.php kedalam direktori D:\xampp\htdocs\crudxdk atau folder crudxdk 8. Selanjutnya buatlah halaman baru melalui NotePad++, kemudian ketikkan script untuk menyimpan data dibawah ini dan simpan dengan nama simpan.php kedalam folder crudxdk.
= = = =
11. Selanjutnya klik pada tanda + dibagian Templates, kemudian klik pada bagian Blank dan lalu pilih HTML5+Cordova, lalu klik tombol Continue.
12. Jendela New Project Name and Location akan muncul dilayar monitor komputer atau laptop anda, silahkan anda pilih lokasi atau tempat untuk menyimpan project dengan cara meng-klik pada bagian icon bergambar folder atau dibagian Project Directory, kemudian beri nama project dengan mengisi crudxdk dibagian Project Name, selanjutnya klik tombol Create. 21
13. Tunggulah beberapa saat, karena proses Download dan creating project sedang berlangsung.
14. Pembuatan project baru dengan nama crudxdk berhasil dibuat dengan munculnya jendela Success “Congratulations! Your project has been created successfully. Klik tombol OK untuk menuju proses selanjutnya.
15. Secara otomatis anda akan masuk kedalam halaman editor text yang fungsinya untuk menuliskan script atau program, seperti terlihat pada gambar dibawah ini.
16. Langkah selanjutnya, klik pada bagian Project yang berada disisi kiri atas.
19. Setelah masuk kedalam jendela Bower Packages Explorer, klik pada bagian Bower Registry yang terletak dibawah Top Packages.
20. Setelah berada aktif pada bagian Bower Registry, ketikkan material-design-lite dibagian search dibagian kanan atas, kemudian tekan Enter. Secara otomatis maka akan melakukan searching, tunggulah beberapa saat sampai material-design-lite muncul dibagian packages.
23. Jika proses installing material-design-lite telah selesai, maka akan muncul jendela Bower package installed successfully, langkah selanjutnya klik tombol OK.
24. Hasilnya akan terlihat pada jendela PROJECT dibagian Production telah terinstal material-design-lite 1.2.1, seperti terlihat pada gambar dibawah ini. Selanjutnya klik pada menu tab DEVELOP.
25. Setelah halaman DEVELOP aktif, klik pada bagian antara crudxdk dan WEB SERVICES, setelah muncul tanda anak panah keatas dan kebawah lakukan klik pada bagian mouse (tahan) kemudian geser kearah bawah.
26. Maka hasilnya akan terlihat folder-folder komponen yang ada pada project crudxdk seperti plugins, www, bower_components termasuk material-design-lite.
28. Maka hasilnya file jquery-2.1.4.min.js berada pada di folder js atau C:\Users\whospike\Documents\crudxdk\www\js seperti terlihat pada gambar dibawah ini.
29. Buka kembali program intel XDK anda, kemudian tambahkan script dibawah ini kedalam file index.html. Untuk letak script berada didalam tag … <style) a{ text-decoration: none; }
<script src="bower_components/material-designlite/material.min.js"> <script src="js/jquery-2.1.4.min.js"> Sehingga akan terlihat seperti pada gambar dibawah ini.
32. Untuk melihat hasil dari pembuatan form klik pada menu tab SIMULATE.
33. Pada jendela SIMULATE, pilih emulator smartphone yang akan digunakan untuk menampilkan form yang dibuat. Klik pada anak panah maka akan muncul beberapa tipe smartphone virtual antara lain Samsung Galaxy Tab 2.7.0, HTC Droid Incredible, Lenovo K900, Google Nexus 4 dan Google Nexus 7. Pilihlah emulator HTC Droid Incredible, kemudian klik icon play.
34. Emulator akan muncul secara otomatis seperti pada gambar dibawah ini. Hasil dari pembuatan form siswa berhasil ditampilkan.
35. Buka kembali halaman DEVELOP, kemudian tambahkan script dibawah ini didalam tag dan <script> $(document).ready(function(){ // alert('ini jquery'); $("#SIMPAN").on("click", function(){ var data = $("#SIMPAN2").serialize(); $.post("http://127.0.0.1/crudxdk/simpan.php", data, function(data){ if(data.status == "sukses"){ alert('Input Berhasil'); window.location='index.html'; } 35
38. Untuk memastikan bahwa data siswa yang diinputkan sebelumnya telah tersimpan kedalam database maka bukalah web browser Mozilla Firefox kemudian melalui localhost/phpmyadmin masuk ke dalam database dbcrudxdk kemudian pilih tabel siswa. Maka akan terlihat data siswa yang telah anda masukkan melalui emulator intel XDK telah tersimpan seperti terlihat pada gambar dibawah ini.
39. Kembali ke bagian DEVELOP intel XDK, kemudian tambahkan script dibawah ini kedalam tag dan atau dibawah script simpan data <script> $(document).ready(function(){ $.post("http://127.0.0.1/crudxdk/get.php",function(respon se){ // alert(JSON.stringify(response)); var arr = $.parseJSON(response); var trHTML = ''; 37
' }); $('#datane').append(trHTML).listview("refresh"); }); }); $(document).on('click','.edit',function(){ var idne = $(this).attr('id_siswa'); window.location="edit.html?id_siswa="+idne; return false; }); 40. Selanjutnya buka kembali emulator intel XDK, kemudian klik pada bagian LIST. Maka akan terlihat list data siswa berdasarkan nama.
41. Setelah anda selesai membuat program intel XDK untuk menginput data dan menampilkan data, maka anda tinggal membuat untuk mengedit dan menghapus data siswa. Buatlah file baru dengan nama edit.html dengan cara klik pada bagian File New atau dengan menekan CTRL+N melalui keyboard komputer atau laptop anda.
<script src="js/app.js"> <script src="xdk/init-dev.js"> <style) a{ text-decoration: none; } <script src="bower_components/material-designlite/material.min.js"> <script src="js/jquery-2.1.4.min.js"> 43. Langkah selanjutnya lakukan penyimpanan dengan cara klik File Save atau dengan menekan CTRL+S pada papan keyboard komputer atau laptop anda.
44. Direktori penyimpanan yaitu di www atau C:\Users\whospike\Documents\crudxdk\www . Pada jendela Save As, pilih direktori www kemudian klik tombol Open.
45. Isikan File name dengan nama edit.html kemudian klik tombol Save.
49. Langkah selanjutnya buatlah script JavaScript untuk melakukan edit data siswa seperti terlihat dibawah ini. Perlu diingat bahwa peletakan script dibawah ini berada diantara <script> dan $(document).ready(function(){ var id_siswa1 = parse("id_siswa"); $.post("http://127.0.0.1/crudxdk/edit.php?id_siswa1="+id_ siswa1, function(data){ var note = $.parseJSON(data); $('#nis').val(note.nis); $('#nama').val(note.nama); $('#alamat').val(note.alamat); $('#telp').val(note.telp); }); /***************************/ $("#edit").on('click',function(){ var edit = $("#simpan").serialize(); $.post("http://127.0.0.1/crudxdk/edit.php?id_siswa2="+id_ siswa1, edit, function(data){ if(data.status == "sukses"){ alert('Input Berhasil'); window.location='index.html'; } else if(data.status == 'gagal'){ alert("Error on query!"); } }); 45
}); //end edit data });//document ready 50. Langkah berikutnya yaitu menambahkan fungsi untuk mengambil parameter dari link agar ketika data yang diedit dapat dipanggil sesuai dengan id siswa yang dipilih. Script fungsi untuk pemanggil parameter diletakkan dibawah fungsi edit data. <script> /* fungsi mengambil parameter dari link*/ function parse(val) { var result = "Not found", tmp = []; location.search //.replace ( "?", "" ) // this is better, there might be a question mark inside .substr(1) .split("&") .forEach(function (item) { tmp = item.split("="); if (tmp[0] === val) result = decodeURIComponent(tmp[1]); }); return result; } 51. Sekarang coba jalankan kembali emulator intel XDK kemudian tampilkan pada bagian LIST, lalu klik pada bagian nama siswa Yosef Murya.
52. Hasilnya akan terlihat data siswa Yosef Murya dengan NIM : 201601001, Nama : Yosef Murya, Alamat : Jl. Kaliurang km 10, dan Telp : 08562555665.
53. Untuk melakukan edit data siswa, klik pada bagian Nama kemudian ubahlah dengan nama anda, sebagai contoh pada modul pelatihan ini akan penulis ganti dengan Yosef Murya Kusuma, kemudian klik tombol SIMPAN.
54. Jika data berhasil diupdate maka akan muncul alert atau jendela dengan informasi “Input Berhasil”.
55. Jika dilihat dibagian LIST maka nama siswa yang sebelumnya Yosef Murya berubah menjadi Yosef Murya Kusuma.
56. Selanjutnya yaitu membuat fungsi hapus dengan JavaScript. Tambahkan script JavaScript dibawah ini kedalam $(document).ready(function(){ … }); $("#delete").on('click',function(){ var hapus = $("#simpan").serialize(); $.post("http://127.0.0.1/crudxdk/hapus.php?id_siswa1="+id _siswa1, hapus, function(data){ if(data.status == "sukses"){ 48
alert('Delete Berhasil'); window.location='index.html'; } else if(data.status == 'gagal'){ alert("Error on query!"); } }); }); // hapus data Sehingga penambahan fungsi hapus data akan terlihat seperti pada gambar dibawah ini.
57. Buka kembali emulator intel XDK, kemudian klik pada bagian menu tab LIST. Selanjutnya klik pada data user dengan nama Yosef Murya Kusuma.
58. Setelah muncul data Yosef Murya Kusuma, klik tombol HAPUS untuk melakukan penghapusan data siswa.
59. Jika data berhasil dihapus maka akan muncul Alert dengan informasi “Delete Berhasil”. Klik tombol OK untuk menutup atau menghilangkan jendela alert. 50
60. Untuk memastikan bahwa data siswa dengan nama Yosef Murya Kusuma telah terhapus dapat anda lihat pada bagian halaman menu tab LIST, hasinya data siswa Yosef Murya Kusuma sudah tidak ada atau sudah dihapus.
