Kebanyakan artikel yg membahas jquery easyUI mungkin menggunakan PHP di sisi server scripting, akan tetapi pada artikel ini saya membuat sedikit berbeda, yaitu akan membahas bagaimana menggunakan Jquery easyUI datagrid dengan menggunakan JSP/Java di sisi server scriping.
Karyawan.java
Beberapa hal yg harus di siap kan sebelum mempraktekan artikel ini adalah :
1. IDE, saya menggunakan netbean sebagai IDE, jika belum ada silahkan download
2. Silahkan Download Jquery EasyUI Library.
Langkah 1. Siapkan Database dan table
Buat database dengan nama demo, di dalam nya buat 1 table dengan nama karyawan
CREATE TABLE `karyawan` (
`nik` VARCHAR(7) NOT NULL,
`nama` VARCHAR(50) NULL DEFAULT NULL,
`Jabatan` VARCHAR(20) NULL DEFAULT NULL,
PRIMARY KEY (`nik`)
)
INSERT INTO karyawan values ('0000001','Cecilia Eva','Staf HRD');
INSERT INTO karyawan values ('0000002','Hassan Muhammad','Manajer HRD');
INSERT INTO karyawan values ('0000003','Aulia Andara','Staf MIS');
INSERT INTO karyawan values ('0000004','Khunsnul Khotimah','Staf MIS');
INSERT INTO karyawan values ('0000005','Anto','Staf HRD');
INSERT INTO karyawan values ('0000006','Dikdik Iman','Staf HRD');
INSERT INTO karyawan values ('0000007','Sidiq','Staf HRD');
Langkah 2. Buat Project di netbean dengan tipe project Java Web,WebApplication.
Saat Muncul dialog Framework saya tidak memilih framewrok apapun, klik finish saya.
Langkah 3: Tambah kan library MySQL JDBC dan json-simple (dowload) pada netbeans
Langkah 4: Copy library Jquery EasyUI ke folder project.
Langkah 5: Modifikasi file Index.jsp
Seperti ini :
1: <%--
2: Document : index
3: Created on : Mar 5, 2014, 11:25:57 AM
4: Author : kurnia_syukur
5: --%>
6: <html>
7: <head>
8: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9: <meta name="keywords" content="jquery,ui,easy,easyui,web">
10: <meta name="description" content="easyui help you build your web page easily!">
11: <title>jQuery EasyUI Demo</title>
12: <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css">
13: <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css">
14: <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
15: <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
16: </head>
17: <body>
18: <h1>DataGrid</h1>
19: <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
20: url="bridge.jsp"
21: title="Load Data" iconCls="icon-save"
22: rownumbers="true" pagination="true">
23: <thead>
24: <tr>
25: <th field="nik" width="80">Item ID</th>
26: <th field="nama" width="80">Product ID</th>
27: <th field="jabatan" width="80" align="right">List Price</th>
28: </tr>
29: </thead>
30: </table>
31: </body>
32: </html>
Langkah 6: Buat file java
Buat package dbcontroller di dalam "Source Package" , buat 2 file java di dalam package tersebut yaitu :
- DBConnection.java
- Karyawan.java
DBConnection.java
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package dbcontroller;
import java.sql.*;
/**
* file name : DBConnection.java
* @author kurnia_syukur
*/
public class DBConnection
{
protected Connection conn;
protected String url = "jdbc:mysql://localhost:3306/demo";
protected String pwd = "";
protected String usr = "root";
protected String errMsg = "";
protected Statement st;
protected PreparedStatement prepSt = null;
public DBConnection()
{
setConn();
}
protected void setConn()
{
try
{
Class.forName("com.mysql.jdbc.Driver");
}
catch (ClassNotFoundException e)
{
this.errMsg = ("Class : com.mysql.jdbc.Driver, Tidak di temukan. (" + e.getMessage() + ")");
this.conn = null;
setErrMsg(e.getMessage());
}
try
{
this.conn = DriverManager.getConnection(this.url, this.usr, this.pwd);
setErrMsg("");
}
catch (SQLException e)
{
setErrMsg(e.getMessage());
}
}
public Connection getConn()
{
return this.conn;
}
public String getErrMsg()
{
return this.errMsg;
}
public void setErrMsg(String errMsg)
{
this.errMsg = errMsg;
}
}
Karyawan.java
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package dbcontroller;
import java.sql.*;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
/**
* file name : Karyawan.java
* @author kurnia_syukur
*/
public class Karyawan {
protected Connection conn;
protected String url = "jdbc:mysql://localhost:3306/demo";
protected String pwd = "";
protected String usr = "root";
protected String errMsg = "";
protected Statement st;
public Karyawan() {
setConn();
System.out.println(getData());
}
protected void setConn() {
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
this.errMsg = ("Class : com.mysql.jdbc.Driver, Tidak di temukan. (" + e.getMessage() + ")");
this.conn = null;
System.out.println(e.getMessage());
}
try {
this.conn = DriverManager.getConnection(this.url, this.usr, this.pwd);
} catch (SQLException e) {
System.out.println(e.getMessage());
}
}
public Connection getConn() {
return this.conn;
}
public String getData() {
String result = "";
String sql = "SELECT * FROM karyawan";
try {
st = getConn().createStatement();
ResultSet rs = st.executeQuery(sql);
int rowCount = rs.last() ? rs.getRow() : 0;
rs.beforeFirst();
JSONObject mainObj = new JSONObject();
mainObj.put("total", String.valueOf(rowCount));
JSONArray rowsArray = new JSONArray();
while(rs.next()){
JSONObject rowObj = new JSONObject();
rowObj.put("nik", rs.getString("nik"));
rowObj.put("nama", rs.getString("nama"));
rowObj.put("jabatan", rs.getString("jabatan"));
rowsArray.add(rowObj);
}
mainObj.put("rows", rowsArray);
result = mainObj.toJSONString();
} catch (SQLException e) {
System.out.println(e.getMessage());
}
return result;
}
}
Langkah 7: Buat file bidge.jsp, simpan file tersebut satu direktori dengan index.jsp
1: <%@page import="dbcontroller.Karyawan" %>
2: <%
3: Karyawan k = new Karyawan();
4: out.print(k.getData());
5: %>
Coba Running Project nya, jika sudah benar makan akan tampil seperti ini :
Ga bisa
ReplyDelete