Tutorial Penggunaan Grid Sederhana di ExtJs Dengan PHP dan JSP

ExtJs adalah library yang digunakan untuk membangun aplikasi web interaktif menggunakan teknik seperti Ajax, DHMTL dan DOM scripting, yang basis utamanya menggunakan Javascript scripting. Dalam membutuhkan librari ExtJS, dimana kita harus meng-include-kan file javascript dari ExtJS yaitu ext-base.js dan ext-all.js (untuk production) atau ext-base-debug.js dan ext-all-debug.js(saat development), serta file css ext-all.css. Tampilan GUI menggunakan framework ExtJs sangat manis dan dinamis. Di dukung dengan banyak fitur yang sangat membantu dengan menggunakan arsitektur MVC yaitu Model View Controller. Di artikel kali ini saya akan membagikan tutorial penggunaan grid sederhana di ExtJs dengan PHP dan JSP. Langsung ikuti saja langkah-langkah di bawah ini.

Pertama-tama download ExtJs 3 di sini. Kamu bisa lihat-lihat contohnya dahulu contoh-contoh aplikasi dengan menggunakan ExtJs. Lalu buat satu folder di xampp dan apache dengan nama misalkan : contohExtjs. Silahkan download file pendukung lib untuk apache di sini. Lib ini berguna agar penggunaan Extjs dapat berjalan di JSP. Lalu pastikan terdapat file-file yang bergaris merah pada gambar di folder contohExtjs

Untuk isi-isinya silahkan copy file-file nya yang sudah kamu download di sini. Lalu untuk isi folder lib pada gambar di atas silahkan download di sini. File-file tersebut wajib kudu ada di setiap aplikasi web desktop yang kita bangun menggunakan ExtJs. Lalu copy kan source code di bawah ini ke aplikasi editor kamu dan save ke folder contohExtjs

index.jsp

Coba Grid




  

select.jsp (query select table)

<%@ page import = "java.sql.*" import ="java.security.MessageDigest" %><%@ page language="java" import="net.sf.json.*" %><%@ include file="conn.jsp" %><% JSONArray array = new JSONArray(); JSONObject obj = new JSONObject(); String returnJson=""; int total = 0; ResultSet rs=null; Statement st=null; String sql=""; sql="SELECT * FROM user"; try { st = dbconn.createStatement(); rs = st.executeQuery(sql); while(rs.next()){ obj.put("first",rs.getString("first")); obj.put("middle",rs.getString("middle")); obj.put("last",rs.getString("last")); obj.put("note",rs.getString("note")); array.add(obj); } dbconn.close(); st.close(); rs.close(); } catch (SQLException ss) { out.println(ss); } returnJson = "{total:"+total+",results:"+array+"}"; out.print(returnJson); %>

conn.jsp (koneksi database)

 <%@ page import="java.sql.*"%><% try{ //Class.forName("org.gjt.mm.mysql.Driver").newInstance(); Class.forName("org.gjt.mm.mysql.Driver"); }catch (Exception ex){ out.println(ex.toString()); } String DB_HOST = "localhost"; String DB_PORT = "3306"; String DB_NAME = "cobaextjs"; String DB_USR = "root"; String DB_PWD = ""; String xDb_Conn_Str = "jdbc:mysql://" + DB_HOST + ":"+ DB_PORT +"/" + DB_NAME; Connection dbconn = null; try{ dbconn = DriverManager.getConnection(xDb_Conn_Str,DB_USR,DB_PWD); //out.println("berhasil"); }catch (SQLException ex){ out.println(ex.toString()); } %>

Jika semua berhasil maka tampilan nya akan seperti pada gambar ini.




Isi dari database akan tampil pada grid sederhana menggunakan ExtJs. Untuk lebih jelasnya silahkan download source code lengkap di sini khusus JSP.

Nah untuk penggunaan grid sederhana menggunakan PHP, pada file index cukup menghilangkan kode berikut


[jsp] <%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>[/jsp]

Lalu save as dengan nama index.jsp. Buat folder baru di XAMPP. Lalu untuk query dan koneksi database nya silahkan copy pada source code di bawah ini.


select.php

 <?php include "conn.php"; $query = "SELECT * FROM user "; $result = mysql_query($query); $nbrows = mysql_num_rows($result); $result2 = mysql_query($query); if($nbrows>0){ while($rec = mysql_fetch_array($result2)){ $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; } else { echo '({"total":"0", "results":""})'; } // Encodes a SQL array into a JSON formated string function JEncode($arr){ if (version_compare(PHP_VERSION,"5.2","<")) { require_once("./JSON.php"); //if php<5.2 need JSON class $json = new Services_JSON();//instantiate new json object $data=$json->encode($arr); //encode the data in json format } else { $data = json_encode($arr); //encode the data in json format } return $data; } ?> 

conn.php (koneksi database di php)

 <?php $connected = mysql_connect('localhost', 'root', ''); if( !$connected ) { die ("Koneksi ke MySQL Server gagal"); } $retval = mysql_select_db("cobaextjs", $connected); if( !$retval ) { die ("Database tidak dapat diakses"); } ?>

Jika berhasil maka grid sederhana menggunakan ExtJs akan tampil sempurna pada gambar di atas


Semoga membantu teman-teman yang sedang belajar ExtJs, jika ada yang ditanyakan jangan segan-segan untuk meninggalkan komentar atau email atau ym saya, terima  kasih

Share On:

Categories: Programming