Iso Web Id Tutorial Komputer
System Informasi SMA dengan ExtJs dan jsp [part 1]
Persiapan :
-
Install database SQL Server
-
Install apache tomcat
-
Download driver JDBC untuk SQL-Server
-
Create database denga nama SMA
-
Download Jasper Repot [Ireport] yang akan kita gunakan untuk membuat report sesuai dengan keinginan kita.
-
Penerimaan Siswa Baru.
Sebelum kita mulai mari kita buat tablenya dulu :
CREATE TABLE [tbl_calonsiswa] (
[No_Pendaftaran] [char] (4) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL ,
[tahun_ajaran] [varchar] (9) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[tgl_pendaftaran] [datetime] NULL ,
[Nama_calon_siswa] [varchar] (30) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Jenis_kelamin] [char] (1) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Tempat_lahir] [varchar] (30) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Tanggal_lahir] [smalldatetime] NULL ,
[Alamat] [varchar] (30) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Jumlah_nilai] [float] NULL ,
[Asal_sekolah] [varchar] (30) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Asal_daerah] [varchar] (30) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
CONSTRAINT [PK_tbl_calon_siswa] PRIMARY KEY CLUSTERED
(
[No_Pendaftaran]
) ON [PRIMARY]
) ON [PRIMARY]
GO
Karena pada setiap tahun pasti ada Pendaftaran siswa baru maka pada tampilan program harus kita sorting hanya berdasarkan tahun ajaran saja, tujuannya agar data tidak terlalu banyak yang di tempilkan.
Gambar pilihan untuk menampilkan tahun ajaran.
Setelah muncul pilihan tahun barulah kita akan menampilkan data sesuai dengan tahun ajaran yang di pilih.
Gambar tampilan data penerimaan siswa baru
Terlihat pada menu pada form diatas ada Tambah data, Perbaiki data, Hapus data, Cetak Berupa MS Word, Cetak Berupa Ms Excel, Cetak Berupa pdf, Refresh dan Pencarian data.
-
Tambah data.
Gambar form Add data
-
Perbaiki.
Gambar Edit data
-
Hapus data.
Gambar hapus data
-
Print
-
Gambar desain report siswa baru
-
Gambar hasil report yang sudah di generate oleh jasper report
Untuk cara penggunaan Ireport akan saya bahas pada tulisan yang selanjutnya.
-
Refresh
Gambar refresh data
-
Find
Gambar Pencarian data
Langkah – langkah untuk membuat program di atas adalah sebagai berikut :
Berikut adalah format folder pada server tomcat :
Buat file berikut :
dsCalonSiswa.jsp [pada folder display] kopikan source berikut :
<%@ include file="../koneksi/koneksi.jsp" %>
<%@ page import="java.util.Enumeration" %>
<%
//kuki
String[] koneksi=new clsKoneksi().strKoneksi;
classDB kelasDB=new classDB(koneksi);
String jns=request.getParameter("txt_jenis");
String model=request.getParameter("model");
String offset=request.getParameter("offset");
int total=0;
String terbesar="";
try{
//model=model.trim();
Object[][] data=kelasDB.getObjectRS("select max(no_pendaftaran) from tbl_calonsiswa");
//total=Integer.parseInt(data[0][0].toString());
terbesar=data[0][0].toString();
}catch(Exception x){}
String kepala="";
Enumeration reqheaders = request.getHeaderNames();
while (reqheaders.hasMoreElements()){
String reqheader = (String)reqheaders.nextElement();
if(reqheader.equals("referer")){
kepala=request.getHeader(reqheader);
}
}
String[] nilai=kepala.split("/");
kepala=nilai[nilai.length-1];
String tujuan="";
if(kepala.equals("main.jsp")){
tujuan="";
}else{
tujuan="";
}
%>
<%=tujuan%>
<%
//out.println("var terbesar=" + terbesar + ";");
out.println("var offset=" + offset + ";");
out.println("var batas=" + kelasDB.limit + ";");
out.println("var total=" + total + ";");
%>
var rectmp,store,grid, thn, tmptitip, terbesar="";
Master Barang
2006/20072007/20082008/20092009/20102010/20112011/2012
dsCalonSiswaFn.jsp [pada folder display] kopikan source di bawah:
<%@ include file="../koneksi/koneksi.jsp" %>
<%
String[] koneksi=new clsKoneksi().strKoneksi;
classDB kelasDB=new classDB(koneksi);
String kondisi=request.getParameter("kondisi");
String del=request.getParameter("del");
String tahun_ajaran=request.getParameter("tahun_ajaran");
String sql="";
//out.println(kondisi);
if(kondisi!=null){
sql="select * from tbl_calonsiswa where upper(No_Pendaftaran + Nama_calon_siswa + Alamat) ";
sql+="like upper(‘%" + kondisi + "%’) and tahun_ajaran=’" + tahun_ajaran + "’ order by jumlah_nilaidesc" ;
}else{
sql="select * from tbl_calonsiswa where tahun_ajaran=’" + tahun_ajaran + "’ order by jumlah_nilai desc" ;
}
if(del!=null){
kelasDB.ExecSQL("delete from tbl_calonsiswa where No_Pendaftaran=’" + del + "’");
}
//out.println(sql);
Object[][] isi=kelasDB.getObjectRS(sql);
String js="["; //"totalCount":"403",
int rw=0,clm=0;
while(rw
if(rw>0){
js+=",";
}
js+="[";
clm=0;
while(clm
if(clm>0){
js+=",";
}
js+="’"+ isi[rw][clm].toString().trim() + "’";
clm++;
}
js+="")>
Delete‘";
js+="]";
rw++;
}
js+="]";
out.print(js);
%>
dsCalonSiswa.js [pada folder display] kopikan source berikut :
Ext.onReady(function(){
Ext.QuickTips.init();
var win_add, win_find;
//Membuat Windows untuk tambah data
//Membuat combo
var dataThn=[[‘2006/2007’],[‘2007/2008’],[‘2008/2009’],[‘2009/2010’],[‘2010/2011’],[‘2011/2012’]];
var dataCboThn = new Ext.data.SimpleStore({
fields: [{name:’K’}]
});
dataCboThn.loadData(dataThn);
var cboThn = new Ext.form.ComboBox({
displayField:’K’,
fieldLabel: ‘Tahun Ajaran’,
name: ‘thncari’,
store: dataCboThn,
typeAhead: true,
mode: ‘local’,
triggerAction: ‘all’,
emptyText:’Tahun Ajaran’,
selectOnFocus:true
});
var dataA=[[‘L’],[‘P’]];
var dataCBO = new Ext.data.SimpleStore({
fields: [{name:’K’}]
});
dataCBO.loadData(dataA);
var MyCombo = new Ext.form.ComboBox({
displayField:’K’,
fieldLabel: ‘Jenis Kelamin’,
name: ‘Jenis_kelamin’,
store: dataCBO,
typeAhead: true,
mode: ‘local’,
triggerAction: ‘all’,
emptyText:’Kelamin’,
selectOnFocus:true
});
//Membuat Form
var frm_add = new Ext.form.FormPanel({
id:’frm_add’,
baseCls: ‘x-plain’,
bodyStyle: ‘background:#f9f9f9 none; color:#222; padding:5px 35px;’,
defaults: {
width: 50
},
defaultType: ‘textfield’,
height: 70,
items: [{
fieldLabel: ‘No Pendaftaran’, //1
name: "No_Pendaftaran",
id : "No_Pendaftaran",
maxLength:4,
el :"txt"
//value: terbesar
},{
//xtype: ‘ComboBox’,
fieldLabel: "Tahun Ajaran", //2
name: "tahun_ajaran",
id: "tahun_ajaran",
//transform:’tahun_ajaran’,
el:’tahun_ajaran’,
maxLength:9,
width:100
},{
width: 150,
xtype: ‘datefield’,
format:’m-d-Y’,
fieldLabel: ‘Tgl Pendaftaran’,
name : ‘tgl_pendaftaran’ //6
},{
width: 200,
fieldLabel: ‘Nama’, //3
name : ‘Nama_calon_siswa’
},MyCombo,{ //4
width: 260,
fieldLabel: ‘Tempat Lahir’,
name : ‘Tempat_lahir’ //5
},{
width: 150,
xtype: ‘datefield’,
format:’m-d-Y’,
fieldLabel: ‘Tgl Lahir’,
name : ‘Tanggal_lahir’ //6
},{
width: 260,
fieldLabel: ‘Alamat’,
name : ‘Alamat’ //7
},{
xtype:"numberfield",
fieldLabel: ‘Jumlah Nilai’,
name : ‘Jumlah_nilai’ //8
},{
width: 260,
fieldLabel: ‘Asal Sekolah’,
name : ‘Asal_sekolah’ //9
},{
width: 260,
fieldLabel: ‘Asal daerah’,
name : ‘Asal_daerah’ //10
}
],
labelWidth:100,
region: ‘center’,
url: ‘../add/dsCalonSiswa.jsp’
});
form = frm_add.getForm();
//=======================Edit form
function fn_edit(){
if(terbesar=="")
terbesar = document.getElementById("txt").value ;
if(!win_add){
//Ext.getCmp("frm_add").getForm().loadRecord(rectmp);
win_add = new Ext.Window({
//el:induk,
layout:’fit’,
width:450,
height:360,
closeAction:’hide’,
//plain: true,
modal:true,
resizable :false,
title:’Add data’,
items:[
frm_add
],
buttons: [{
text:’Ok’,
disabled:false,
handler: function(){
form.submit({
url: ‘../add/dsCalonSiswa.jsp’,
waitMsg:’Please Wait…’,
reset:true,
success:function(){
win_add.hide();
store.load({params:{tahun_ajaran:offset}});
},
failure:function() {
Ext.MessageBox.alert(‘Status’,’User atau Password salah’);
}
});
}
},{
text: ‘Cancel’,
handler: function(){
win_add.hide();
}
}]
});
}
win_add.show();
}
//================================
function fn_add(){
//alert(tmptitip);
if(!win_add){
//Ext.getCmp("frm_add").getForm().loadRecord(rectmp);
win_add = new Ext.Window({
//el:induk,
layout:’fit’,
width:450,
height:360,
closeAction:’hide’,
//plain: true,
modal:true,
resizable :false,
title:’Add data’,
items:[
frm_add
],
buttons: [{
text:’Ok’,
disabled:false,
handler: function(){
form.submit({
url: ‘../add/dsCalonSiswa.jsp’,
waitMsg:’Please Wait…’,
reset:true,
success:function(){
win_add.hide();
store.load({params:{tahun_ajaran:offset}});
terbesar = document.getElementById("txt").value ;
},
failure:function() {
Ext.MessageBox.alert(‘Status’,’Ada kesalahan pada data n cek ualng data’);
}
});
}
},{
text: ‘Cancel’,
handler: function(){
win_add.hide();
}
}]
});
}
Ext.getCmp("frm_add").getForm().reset();
if(terbesar!="")
document.getElementById("txt").value = terbesar ;
else
terbesar = document.getElementById("txt").value ;
setSelectListToValue(offset,"tahun_ajaran");
win_add.show();
}
//****************************************************
//—————————————————–
//*****************************************************
var frm_find = new Ext.form.FormPanel({
id: ‘frm_find’,
baseCls: ‘x-plain’,
bodyStyle: ‘background:#f9f9f9 none; color:#222; padding:5px 35px;’,
defaults: {
width: 200
},
defaultType: ‘textfield’,
//frame: true,
height: 70,
selectOnFocus: true,
items: [{
fieldLabel: ‘Find Data’,
name: ‘txt_find’,
id:’txt_find’,
value: ”
}],
labelWidth:70,
region: ‘center’//,
//url: ‘cekLogin.jsp’
});
fn_find=function(){
if(!win_find){
win_find = new Ext.Window({
//el:induk,
layout:’fit’,
width:450,
height:100,
closeAction:’hide’,
//plain: true,
modal:true,
resizable :false,
title:’Find data’,
items:[
frm_find
],
buttons: [{
text:’Ok’,
disabled:false,
handler: function(){
var t=document.getElementById(‘txt_find’).value;
store.load({params:{tahun_ajaran:offset,kondisi:t}});
win_find.hide();
}
},{
text: ‘Cancel’,
handler: function(){
win_find.hide();
}
}]
});
}
win_find.show();
}
//——————————————————
// create the Data Store
store = new Ext.data.Store({
// load using HTTP
url: ‘dsCalonSiswaFn.jsp’,
//totalProperty: ‘403’
reader: new Ext.data.ArrayReader({
id:0
}, [
{name: ‘No_Pendaftaran’}, //1
{name: ‘tahun_ajaran’}, //2
{name: ‘tgl_pendaftaran’}, //3
{name: ‘Nama_calon_siswa’}, //4
{name: ‘Jenis_kelamin’}, //5
{name: ‘Tempat_lahir’}, //6
{name: ‘Tanggal_lahir’}, //7
{name: ‘Alamat’}, //8
{name: ‘Jumlah_nilai’}, //9
{name: ‘Asal_sekolah’}, //10
{name: ‘Asal_daerah’}, //11
{name: ‘delete’} //12
]
)
// turn on remote sorting
//remoteSort: true
//baseParams: {offset: offset}
});
//store.setDefaultSort(‘kodebarang’, ‘desc’);
//Membuat text untuk pencarian data
grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
columns: [new Ext.grid.RowNumberer() ,
{header: "No Pendaftaran", width: 80, dataIndex: ‘No_Pendaftaran’, sortable: true},
{header: "Tahun Ajaran", width: 80, dataIndex: ‘tahun_ajaran’, sortable: true},
{header: "Tgl Pendaftaran", width: 80, dataIndex: ‘tgl_pendaftaran’, sortable: true},
{header: "Nama Calon Siswa", width: 180, dataIndex: ‘Nama_calon_siswa’, sortable: true},
{header: "Kelamin", width: 70, dataIndex: ‘Jenis_kelamin’, sortable: true},
{header: "Tempat lahir", width: 100, dataIndex: ‘Tempat_lahir’, sortable: true},
{header: "Tanggal lahir", width: 100, dataIndex: ‘Tanggal_lahir’, sortable: true},
{header: "Alamat", width: 200, dataIndex: ‘Alamat’, sortable: true},
{header: "Nilai", width: 70, dataIndex: ‘Jumlah_nilai’, sortable: true},
{header: "Asal Sekolah", width: 200, dataIndex: ‘Asal_sekolah’, sortable: true},
{header: "Asal Daerah", width:200, dataIndex: ‘Asal_daerah’, sortable: true},
{header: "Delete", width: 100, dataIndex: ‘delete’, sortable: true}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
rectmp=rec;
Ext.getCmp("frm_add").getForm().loadRecord(rec);
}
}
}),
viewConfig: {
forceFit:false //auto width
},
// inline toolbars
tbar:[{
text:’Tambah’,
tooltip:’Tambah data baru’,
iconCls:’add’,
handler:fn_add
}, ‘-‘, {
text:’Perbaiki’,
tooltip:’Edit Data’,
iconCls:’Edit’,
handler: fn_edit
},’-‘,{
text:’Hapus’,
tooltip:’Delete Data’,
iconCls:’remove’,
handler: function (){
var m = grid.getSelections();
//alert(m[0].get("kodebarang"));
setDelete((m[0].get("No_Pendaftaran")));
}
},’-‘,{
text:”,
tooltip:’Export MS. Word’,
iconCls:’word’,
handler:function(){
window.location =’../koneksi/viewReport.jsp?type=rtf¶m=tahun&isiparam=’ + offset + ‘&rpt=siswabaru.jrxml’;
}
},’-‘,{
text:”,
tooltip:’Export MS Excel’,
iconCls:’excel’,
handler:function(){
window.location =’../koneksi/viewReport.jsp?type=xls¶m=tahun&isiparam=’ + offset + ‘&rpt=siswabaru.jrxml’;
}
},’-‘,{
text:”,
tooltip:’Export PDF’,
iconCls:’pdf’,
handler:function(){
window.location =’../koneksi/viewReport.jsp?type=pdf¶m=tahun&isiparam=’ + offset + ‘&rpt=siswabaru.jrxml’;
}
},’-‘,{
text:”,
tooltip:’Refresh’,
iconCls:’refresh’,
handler:function(){
store.load({params:{tahun_ajaran:offset}});
}
},’-‘,{
text:’Find’,
tooltip:’Find Data’,
iconCls:’find’,
handler:fn_find
}],
/*bbar: new Ext.PagingToolbar({
pageSize: 100,
store: store,
displayInfo: true,
displayMsg: ‘Displaying topics {0} – {1} of {2}’ ,
emptyMsg: "No topics to display"
}),*/
baseCls: ‘x-plain’,
region: ‘center’
});
grid.on(‘rowdblclick’,(
function(sm, row, rec) {
rectmp=rec;
//alert(rectmp[0]);
//Ext.getCmp("frm_add").getForm().loadRecord(rec);
},
fn_edit
)
);
var win = new Ext.Window({
closable: false,
draggable: true,
height: 400,
layout: ‘border’,
minHeight:400,
minWidth: 630,
plain: false,
resizable: false,
closable:true,
maximizable:true,
minimizable:true,
items: [
grid
],
title: ‘Pendaftaran siswa’,
width: 630
});
//Tampilkan window pertama
//Membuat form tampilan pertama
var frm_pilihan= new Ext.form.FormPanel({
id :’frm_pilihan’,
baseCls: ‘x-plain’,
bodyStyle: ‘background:#f9f9f9 none; color:#222; padding:5px 5px;’,
defaults: {
width: 100
},
defaultType: ‘textfield’,
height: 100,
items:[cboThn
/*{
fieldLabel: ‘Tahun Ajaran’,
name: ‘tahuncari’,
id:’tahuncari’,
maxLength:9,
value: ”
}*/
],
labelWidth:100,
region: ‘center’
});
var win_pilihan = new Ext.Window({
//el:induk,
layout:’fit’,
width:250,
height:100,
closeAction:’hide’,
//plain: true,
modal:true,
resizable :false,
title:’Pilih tahun ajaran’,
items:[
frm_pilihan
],
buttons: [{
text:’Ok’,
disabled:false,
handler: function(){
var t = document.getElementById(‘thncari’).value;
offset=t;
win_pilihan.hide();
win.show();
store.load( {params:{tahun_ajaran:t}} );
}
}]
});
//win.show();
//store.load({params:{tahun_ajaran:offset}});
win_pilihan.show();
});
//Fungsi untuk menghapus data
function setDelete(kode){
var a=Ext.MessageBox.confirm(‘Delete’, ‘Benar anda ingin menghapus data’,
function(btn){
if (btn == ‘yes’) {
store.load({params:{tahun_ajaran:offset,del:kode}});
}
}
);
}
function setSelectListToValue(value, selectId){
var i, si, v, args=setSelectListToValue.arguments;
if ((obj=document.getElementById(args[1])) != null){
v = args[0];
for(i=0; i
if(obj.options[i].value == v){
si = i;
}
}
obj.selectedIndex = si;
}
}
Masukkan dsCalonSiswa.jsp [Pada folder add] :
<%@ include file="../koneksi/koneksi.jsp" %>
<%
String[] koneksi=new clsKoneksi().strKoneksi;
classDB kelasDB=new classDB(koneksi);
String No_Pendaftaran=request.getParameter("txt"); //1
String tahun_ajaran=request.getParameter("tahun_ajaran"); //1
String tgl_pendaftaran=request.getParameter("tgl_pendaftaran"); //1
String Nama_calon_siswa=request.getParameter("Nama_calon_siswa"); //2
String Jenis_kelamin=request.getParameter("Jenis_kelamin"); //3
String Tempat_lahir=request.getParameter("Tempat_lahir"); //4
String Tanggal_lahir=request.getParameter("Tanggal_lahir"); //5
String Alamat=request.getParameter("Alamat"); //6
String Jumlah_nilai=request.getParameter("Jumlah_nilai"); //7
String Asal_sekolah=request.getParameter("Asal_sekolah"); //8
String Asal_daerah=request.getParameter("Asal_daerah"); //9
Object[][] isi=kelasDB.getObjectRS("select count(*) from tbl_calonsiswa where No_Pendaftaran=’" + No_Pendaftaran + "’");
String sql="";
if(Integer.parseInt(isi[0][0].toString())==0){
sql="insert into tbl_calonsiswa values(‘" + No_Pendaftaran + "’,’" + tahun_ajaran + "’,’" ;
sql+=tgl_pendaftaran + "’,’" + Nama_calon_siswa + "’,’" + Jenis_kelamin + "’,’" + Tempat_lahir ;
sql+="’,’" + Tanggal_lahir + "’,’" + Alamat + "’,’" + Jumlah_nilai ;
sql+="’,’" + Asal_sekolah + "’,’" + Asal_daerah + "’)" ;
}else{
sql="update tbl_calonsiswa set No_Pendaftaran=’" + No_Pendaftaran + "’,tahun_ajaran=’" + tahun_ajaran + "’,";
sql+="Nama_calon_siswa=’" + Nama_calon_siswa + "’,Jenis_kelamin=’" + Jenis_kelamin ;
sql+="’,Tempat_lahir=’" + Tempat_lahir + "’,Tanggal_lahir=’" + Tanggal_lahir ;
sql+="’,Alamat=’" + Alamat + "’,Jumlah_nilai=’" + Jumlah_nilai + "’, tgl_pendaftaran=’" + tgl_pendaftaran ;
sql+="’,Asal_sekolah=’" + Asal_sekolah + "’,Asal_daerah=’" + Asal_daerah + "’" ;
sql+=" where No_Pendaftaran=’" + No_Pendaftaran + "’";
}
try{
System.out.println("Isi query = " + sql) ;
kelasDB.ExecSQL(sql);
out.println("{success:true}");
}catch(Exception e){
out.println("{success:false}");
}
%>
Bersambung …
Untuk Detail source anda dapat download di sini
Sumber : mbahsomo
