Aplikasi CRUD Sederhana Menggunakan Intel XDK dan Database MySQL

Sebelumnya Intel XDK sudah pernah dijelaskan cara pakai dan kegunaannya. Bagi temen-temen yang ingin membuat aplikasi berbasis android atau platform mobile lainnya, yang hanya mengerti bahasa pemrograman web, software ini sangat cocok untuk temen-temen coba. Pada tutorial kali ini kita akan coba membuat CRUD (Create, Read, Update, Delete) menggunakan database MySql dalam Intel XDK. Pasti temen-temen yang sudah mencoba software ini pernah kesulitan dalam membuat CRUD pada Intel XDK apalagi menggunakan PHP ditambah tutorial yang sedikit di internet. Dalam Intel XDK tidak support pengetikan dengan format PHP itu yang mempersulit pembuatan CRUD, tapi masih ada jalan lain yaitu menggunakan javascript dan jquery sebagai penghubung untuk bisa menggunakan script PHP. Oke, langsung saja simak.

Peralatan yang dibutuhkan

1. Intel XDK versi 3491 atau diatasnya. Jika belum punya bisa download disini.
2. Database Mysql, biar tidak menggunakan koneksi internet kita gunakan XAMPP dengan versi PHP minimal versi 5. Kalau belum punya bisa download disini.
3. Jquery-2.1.4 download disini.

Setelah semua sudah didownload dan diinstall selanjutnya buatlah database pada MySql. Buat database bernama xdk, kemudian buat tabel dengan nama mhs didalamnya buat kolom id, nama, dan hp. Seperti contoh gambar dibawah ini. Atau kalau mau yang instan bisa download disini.

Membuat Script PHP

1. Buat koneksi.php

1. Buat input.php

1. Buat get.php

1. Buat edit.php

1. Buat delete.php

1. Setelah semua dibuat simpan pada satu folder beri nama folder tersebut dengan nama crudxdk. Kemudian copy atau pindahkan folder crudxdk kedalam htdocs (didalam XAMPP).

Membuat layout

1. Buat project baru, karena saya menggunakan framework/css Material Design Lite, jadi Use App Designer tidak perlu di centang karena material design lite tidak tersedia pada App Designer. Kemudian continue.
2. Setelah lembar coding muncul, masuk ke menu Project, pilih menu Bower Managed Libraries kemudian pilih Add Bower Packages.
3. Setelah masuk, ketikan pada pencarian material-design-lite kemudian pilih dan install. Jika muncul peringatan pilih OK.
4. Kembali ke menu DEVELOP, jika sudah terinstall maka dalam folder www akan muncul folder bower_components.
5. Include kan css dan js nya. Include kan juga jquery-2.1.4.min.js yang telah didownload (masukkan pada folder www/js/jquery-2.1.4.min.js). biar lebih mudah ketikan semua yang ada dibawah ini.
6. Masukkan Source Code berikut kedalam body.
7. Kemudia kita liat hasilnya, pada menu SIMULATE klik tombol PLAY. Maka tampilannya akan seperti ini. Jika Icon tidak muncul, pastikan pc / laptop terkoneksi dengan internet.
8. Kita sudah punya 2 tab pada index.html, input dan list. Dimana input nanti berfungsi untuk menginputkan data dan list untuk menampilkan data dari database. Jadi jangan heran ketika anda masuk ke tab list isinya kosong, nanti akan terisi sendiri ketika kita membuat fungsinya.
9. Untuk membuat layout material design lite lainnya temen – temen bisa liat di getmdl.io

Membuat Fungsi CRUD

1. Tambahkan Source Code berikut
2. Masuk ke SIMULATE, coba inputkan data jika berhasil hasilnya akan seperti ini. Jangan lupa, XAMPP harus dalam keadaan berjalan.Dan pada list akan muncul data nama yang telah di inputkan.
3. Kita sudah membuat layout dan fungsi untuk Create dan Read, berarti kita juga harus membuat untuk Update dan Delete nya.
4. Kita buat html baru, pilih file kemudian pilih new.
5. Nanti lembar coding akan kosong. Biar gx cape copy kan semua coding yang ada di index.html ke lembar kosong tersebut. Kemudian save, simpan pada folder www, beri nama edit.html.
6. Pada edit.html pada bagian body, replace atau ganti semua source code, dengan source code berikut.
7. Tambahkan juga fungsi javascript berikut untuk bisa UPDATE dan DELETE.
8. Kemudian coba pada SIMULATE, klik nama pada tab list. Nanti halaman akan berpindah ke edit html. Dan coba untuk mengedit dan menghapus. Jika bisa berarti kamu berhasil.

Penutup

Sekian tutorial dari saya pada kali ini, semoga membantu. Tunggu tutorial tentang intelxdk lainnya. Terima Kasih... Untuk Full Projectnya bisa didownload disini.