Senin, 11 Maret 2013

Install JqGrid demo di komputer lokal

JqGrid adalah salah satu plugin jquery yang populer. Dalam setiap release terbaru selalu disertakan versi demo yang bisa diinstal di komputer lokal. Sebenarnya di dalam file demo sudah disertakan petunjuk cara instalasi (file: readme.txt) yang sudah cukup jelas. Bagi anda yang tetap merasa kesulitan instalasinya, berikut ini adalah langkah-langkah instalasi:
  1. Unduh file demo jqgrid (untuk contoh disini saya menggunakan demo jqgrid versi 3.6 yang bisa didownload di situsnyaAda sedikit kesalahan script di file jqgrid.html yang menyebabkan grid tidak bisa ditampilkan. Perbaikannya lihat langkah no 7.
  2. Extrak file demo tersebut di www-root webserver yang support php, akan ada folder jqgrid_demo36. Jika tidak sreg dengan nama foldernya, silahkan dirubah nama foldernya sesuai dengan keinginan anda. Supaya tidak terlalu panjang saya ubah menjadi jqgrid saja.
  3. Dengan menggunakan shell (linux/unix) atau command prompt (windows varian) masuk kedirectory tersebut.heru@madukara:~$ cd htdocs/jqgrid/
  4. Buatlah database baru di mysql dengan nama griddemo atau apa saja (dalam contoh ini nama databasenya tetap).

  5. Jalankan script database.sql  pada PHPMYADMIN -> SQL

  6. Langkah selanjutnya adalah konfigurasi koneksi php ke database, buka file dbconfig.php
  7. Sesuaikan dengan setting database yang baru kita buat
    $dbhost = ‘localhost’;
    $dbuser = ‘root’;
    $dbpassword = ”;
    $database = ‘griddemo’;

    Jika nama database yang dibuat tadi griddemo maka anda tinggal mengubah$dbpassword sesuai dengan password root mysql.
  8. Buka browser pada url http://localhost/jqrid/jqgrid.html. Ada kesalahan script pada jqgrid.html yang menyebabkan panel kiri tidak menampilkan apa-apa, silahkan buka file jqgrid.html dengan editor kesayangan anda. Lihat pada baris no. 41 yang berisi potongan kode <script src=”js/jquery-ui-1.7.2.custom.min.js” type=”text/javascript”></script>. Kalau anda lihat pada folder js tidak menyertakan jquery ui versi 1.7.2 namun versi 1.7.1. Ubah jquery-ui-1.7.2.custom.min.js menjadi jquery-ui.1.7.1.custom.min.js.  Bisa juga jika anda ingin menggunakan jquery-ui yang versi 1.7.2 silahkan unduh di rilis jquery-ui-1.7.2, copy file jquery-ui-1.7.2.custom.min.js ke folder jqgrid/js.
  9. Buka kembali url http://localhost/jqrid/jqgrid.html, seharusnya tampilannya seperti initampilan jqgrid demo

Tidak ada komentar:

Posting Komentar