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 situsnya. Ada 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).
    heru@madukara:~$ mysql -u root -pEnter password:

    Welcome to the MySQL monitor. Commands end with ; or \g.

    Your MySQL connection id is 111

    Server version: 5.0.75-0ubuntu10.3 (Ubuntu)

    Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the buffer.

    mysql> create database griddemo;

    Query OK, 1 row affected (0.00 sec)

  5. Jalankan script database.sql
    mysql>use griddemo;Database changed

    mysql>source database.sql;

    Query OK, 0 rows affected (0.06 sec)

    Query OK, 3 rows affected (0.01 sec)

    Records: 3 Duplicates: 0 Warnings: 0

    Query OK, 0 rows affected (0.03 sec)

    Query OK, 13 rows affected (0.00 sec)

    Records: 13 Duplicates: 0 Warnings: 0

    Query OK, 0 rows affected (0.04 sec)

    Query OK, 26 rows affected (0.00 sec)

    Records: 26 Duplicates: 0 Warnings: 0

    Query OK, 0 rows affected (0.03 sec)

    Query OK, 13 rows affected (0.03 sec)

    Records: 13 Duplicates: 0 Warnings: 0

    Sekarang tabel pada database griddemo sudah terisi data.

  6. Langkah selanjutnya adalah konfigurasi koneksi php ke database, buka file dbconfig.phpSesuaikan 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.

  7. 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.
  8. Buka kembali url http://localhost/jqrid/jqgrid.html, seharusnya tampilannya seperti initampilan jqgrid demo

6 thoughts on “Install JqGrid demo di komputer lokal

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s