Sebelumnya mari kita buat sebuah table untuk menyimpan data, berikut adalah format table :
Code :
CREATE TABLE [tbl_siswa_diterima] (
[tahun_ajaran] [varchar] (9) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL ,
[jumlah] [int] NULL ,
[tgl_ujian] [datetime] NULL ,
CONSTRAINT [PK_tbl_siswa_diterima] PRIMARY KEY CLUSTERED
(
[tahun_ajaran]) ON [PRIMARY]
) ON [PRIMARY]GO
Kopikan soure tersebut ke QUERY ANALIZER pada SQl-Server sehingga akan tercipta sebuah table seperti pada gambar
Untuk menampilkan data table tersebut pada browser maka kita akan membuat 5 buah file
1. dsSeleksi.jsp yang terletak pada folder display.
Pada file ini digunakan untuk saat browser memanggil atau mengeksekusinya.
Kopikan sourece berikut dan beri nama dsSeleksi.jsp
Code :
<%@ include file="../koneksi/koneksi.jsp" %>
<%@ page import="java.util.Enumeration" %>
<%
String[] koneksi=new clsKoneksi().strKoneksi;
classDB kelasDB=new classDB(koneksi);
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%>
Master Barang
<%@ include file="../transaksi/combo.html" %>
akhir code
Penjelasan :
<%@ include file="../koneksi/koneksi.jsp" %>
Perintah ini sama dengan perintah dip hp untuk include file, maksudnya adalah menggunakan file koneksi.jsp yang berada pada folder koneksi.
<%@ page import="java.util.Enumeration" %>
Perintah di atas digunakan agar kita dapat melihat dari mana file tadi di panggil, atau mengambil header dari file.
String[] koneksi=new clsKoneksi().strKoneksi;
membuat object koneksi seperti clsKoneksi yang berada pada file koneksi.jsp dan kemudian di isi oleh strKoneksi yang menghasilkan array String.
classDB kelasDB=new classDB(koneksi);
membuat Object baru bernama kelasDB seperti pada file koneksi.jsp.
String kepala="";
Membuat variable dengan nama kepala bertype String
Enumeration reqheaders = request.getHeaderNames();
while (reqheaders.hasMoreElements()){
String reqheader = (String)reqheaders.nextElement();
if(reqheader.equals("referer")){
kepala=request.getHeader(reqheader);
}
}
Memngambil nilai dari Header file
String[] nilai=kepala.split("/");
kepala=nilai[nilai.length-1];
String tujuan="";
if(kepala.equals("main.jsp")){
tujuan="";
}else{
tujuan="";
}
Melakukan Pengecekan apakah file tadi berasal dari main.jsp atau tidak, jika tidak maka akan di kembalikan ke indek.jsp.
<%=tujuan%>
Mencetak isi dari variable tujuan.
<%@ include file="../transaksi/combo.html" %>
Menggunakan file combo.html yang berada pada folder transaksi.
Digunakan untuk memanggil library dari ExtJs
Berikut adalah source pada combo.html
Code :
2. dsSeleksi.js yang terletak pada folder display.
Pada file dsSeleksi.js digunakan untuk mengesksekusi ExtJs sehingga kita dapat melihat tampilannya yang cantik
Code :
// JavaScript Document
//varibel untuk penyimpanan record
var store,grid;
Ext.onReady(function(){
Ext.QuickTips.init();
var win_add, win_find;
//Membuat Windows untuk tambah data
//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: 100
},
defaultType: ‘textfield’,
height: 70,
items: [{
fieldLabel: ‘Tahun Ajaran’, //1
name: ‘tahun_ajaran’,
el : ‘thnajaran’,
value: ”
},{
fieldLabel: ‘Total Siswa yang diterima’,
name: ‘jumlah’,
value: ”
},{
xtype:"datefield",
fieldLabel:"Tgl Ujian",
name:"tgl",
width:100,
format:"m-d-Y"
}
],
labelWidth:150,
region: ‘center’,
url: ‘../add/dsSeleksi.jsp’
});
form = frm_add.getForm();
//=======================Edit form
function fn_edit(){
if(!win_add){
win_add = new Ext.Window({
//el:induk,
layout:’fit’,
width:350,
height:200,
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/dsSeleksi.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(){
if(!win_add){
win_add = new Ext.Window({
//el:induk,
layout:’fit’,
width:350,
height:200,
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/dsSeleksi.jsp’,
waitMsg:’Please Wait…’,
reset:true,
success:function(){
win_add.hide();
store.load({params:{tahun_ajaran:offset}});
},
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();
//document.getElementById(‘tahun_ajaran’).value = ‘2008’;
win_add.show();
}
//****************************************************
//—————————————————–
//*****************************************************
//Membuat form untuk pencarian data
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’
});
//Menampilkan Windows Find
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;
//Melakukan refresh setelah melakukan pencarian 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
//fungsi untuk menampilkan array data atau json
url: ‘dsSeleksiFn.jsp’,
//totalProperty: ‘403’
reader: new Ext.data.ArrayReader({
id:0
}, [
{name: ‘thnajaran’},
{name: ‘jumlah’},
{name: ‘tgl’},
{name: ‘proses’}
])
});
//Grid data
grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
columns: [new Ext.grid.RowNumberer() ,
{header: "Tahun Ajaran", width: 80, dataIndex: ‘thnajaran’, sortable: true},
{header: "Jml Diterima", width: 80, dataIndex: ‘jumlah’, sortable: true},
{header: "Tgl Ujian", width: 80, dataIndex: ‘tgl’, sortable: true},
{header: "Proses", width: 80, dataIndex: ‘proses’, sortable: true}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("frm_add").getForm().loadRecord(rec);
}
}
}),
viewConfig: {
forceFit:false //auto width
},
// Membuat Toolbar pada windows
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("thnajaran")));
}
},’-‘,{
text:”,
tooltip:’Export MS. Word’,
iconCls:’word’,
handler:function(){
window.location =’../koneksi/viewReport.jsp?type=rtf¶m=&isiparam=&rpt=siswabaru.jrxml’;
}
},’-‘,{
text:”,
tooltip:’Export MS Excel’,
iconCls:’excel’,
handler:function(){
window.location =’../koneksi/viewReport.jsp?type=xls¶m=&isiparam=&rpt=siswabaru.jrxml’;
}
},’-‘,{
text:”,
tooltip:’Export PDF’,
iconCls:’pdf’,
handler:function(){
window.location =’../koneksi/viewReport.jsp?type=pdf¶m=&isiparam=&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
}],
baseCls: ‘x-plain’,
region: ‘center’
});
//Event pada saat grid di double klik
grid.on(‘rowdblclick’,(
function(sm, row, rec) {
rectmp=rec;
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: ‘Seleksi Siswa’,
width: 630
});
//Tampilkan window pertama
store.load();
win.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}});
}
}
);
}
//Inilah fungsi yang di gunakan untuk melakukan proses pengamgilan nilai
//Untuk dapat di masuk menjadi siswa baru
function proses(tahun,nilai){
var a=Ext.MessageBox.confirm(‘Proses’, ‘Benar anda ingin melakukan proses
Proses yang anda lakukan akan menghapus data yang sudah ada’,
function(btn){
if (btn == ‘yes’) {
store.load({params:{proses:tahun,nilai:nilai}});
Ext.MessageBox.alert("Status","Proses selesai … !");
}
}
);
}
Akhir code
Penjelasan dari sourece di atas dapat anda lihat pada source yang bertanda //
3. dsSeleksiFn.jsp yang terletak pada folder display.
Pada file ini digunakan untuk menampilkan data dan melakukan proses penerimaan siswa baru
Code :
<%@ 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 sql="";
if(kondisi!=null){
sql="select * from tbl_siswa_diterima where upper(cast(tahun_ajaran as varchar)+ cast(jumlah as varchar)) ";
sql+="like upper(‘%" + kondisi + "%’) " ;
}else{
if(request.getParameter("proses")!=null){
String proses = request.getParameter("proses");
String nilai = request.getParameter("nilai");
kelasDB.ExecSQL("exec pr_pilihsiswa ‘" + proses + "’,’" + nilai + "’");
}
sql="select * from tbl_siswa_diterima" ;
}
if(del!=null){
kelasDB.ExecSQL("delete from tbl_siswa_diterima where tahun_ajaran=’" + del + "’");
}
Object[][] isi=kelasDB.getObjectRS(sql);
String js="[";
int rw=0,clm=0;
while(rwif(rw>0){
js+=",";
}
js+="[";
clm=0;
while(clmif(clm>0){
js+=",";
}
js+="’"+ isi[rw][clm].toString().trim() + "’";
clm++;
}
js+=",’js+="")>Proses‘";
js+="]";
rw++;
}
js+="]";
out.print(js);
%>
Akhir code
Penjelasan :
String kondisi=request.getParameter("kondisi");
String del=request.getParameter("del");
Mengambil request yang diterima
if(kondisi!=null){
sql="select * from tbl_siswa_diterima where upper(cast(tahun_ajaran as varchar)+ cast(jumlah as varchar)) ";
sql+="like upper(‘%" + kondisi + "%’) " ;
}else{
if(request.getParameter("proses")!=null){
String proses = request.getParameter("proses");
String nilai = request.getParameter("nilai");
kelasDB.ExecSQL("exec pr_pilihsiswa ‘" + proses + "’,’" + nilai + "’");
}
sql="select * from tbl_siswa_diterima" ;
}
Variabel kondisi akan terisi jika kita melakukan proses pencarian data, jika kondisi kosong dan proses tidak kosong maka akan menjalankan store procedure dalam SQL SERVER.
if(del!=null){
kelasDB.ExecSQL("delete from tbl_siswa_diterima where tahun_ajaran=’" + del + "’");
}
Digunakan jika kita menekan tombol delete.
Object[][] isi=kelasDB.getObjectRS(sql);
String js="[";
int rw=0,clm=0;
while(rwif(rw>0){
js+=",";
}
js+="[";
clm=0;
while(clmif(clm>0){
js+=",";
}
js+="’"+ isi[rw][clm].toString().trim() + "’";
clm++;
}
js+=",’js+="")>Proses‘";
js+="]";
rw++;
}
js+="]";
out.print(js);
Digunakan untuk looping mencetak array data atau json yang kemudian akan di tampilkan oleh ExtJs.
4. dsSeleksi.jsp yang terletak pada folder add.
Digunakan utuk melakukan proses Insert dan Update data
Code :
<%@ include file="../koneksi/koneksi.jsp" %>
<%
String[] koneksi=new clsKoneksi().strKoneksi;
classDB kelasDB=new classDB(koneksi);
String tahun_ajaran=request.getParameter("thnajaran");
String jumlah=request.getParameter("jumlah");
String tgl=request.getParameter("tgl");
Object[][] isi=kelasDB.getObjectRS("select count(*) from tbl_siswa_diterima where tahun_ajaran=’" + tahun_ajaran + "’");
String sql="";
if(Integer.parseInt(isi[0][0].toString())==0){
sql="insert into tbl_siswa_diterima values(‘" + tahun_ajaran + "’,’" + jumlah + "’,’" + tgl + "’)" ;
}else{
sql="update tbl_siswa_diterima set jumlah=’" + jumlah + "’,tgl_ujian=’" + tgl + "’" ;
sql+=" where tahun_ajaran=’" + tahun_ajaran + "’";
}
try{
System.out.println("Isi query = " + sql) ;
kelasDB.ExecSQL(sql);
out.println("{success:true}");
}catch(Exception e){
out.println("{success:false}");
}
%>
Akhir code
Penjelasan :
Pada source di atas program akan melakukan proses pengecekan jika data ada maka akan di edit jika tidak maka akan di edit.
5. Pr_pilihsiswa
Adalah store procedure yang digunakan untuk melakukan proses penerimaan siswa baru.
Code :
–declare @tahun int;
–declare @total_terima int;
CREATE procedure pr_pilihsiswa(@tahun varchar(9),@total_terima int)
AS
declare @no_pendaftaran char(4);
declare @max_noinduk varchar(4);
declare @noinduk varchar(4);
declare @lp int;
–jika proses di lakukan dan data masih ada
–maka data akan di hapus terlebih dahulu
delete from tbl_siswa where tahun_masuk=@tahun;
set @lp=0;
declare @tmp integer;
–Pembuatan cursor
DECLARE calon_siswa CURSOR FOR
SELECT no_pendaftaran from tbl_calonsiswa where tahun_ajaran=@tahun order by jumlah_nilai DESC;
–Buka cursor
OPEN calon_siswa;
FETCH NEXT FROM calon_siswa
INTO @no_pendaftaran;
–looping
WHILE @@FETCH_STATUS = 0
BEGIN
set @max_noinduk=”;
set @lp=@lp+1;
–Pembuatan no induk yang dimanis
set @max_noinduk=(select ISNULL(max(no_induk),’000′) as maxnoinduk from tbl_siswa where tahun_masuk=@tahun);
set @tmp=cast(right(@max_noinduk,3) as integer) +1;
set @noinduk=(select * from to_char (@tmp));
set @max_noinduk=(right(@tahun ,1)+ @noinduk);
–Melakukan penambahan pada table tbl_siswa
insert into tbl_siswa(no_induk, nama_siswa, alamat, jenis_kelamin, tempat_lahir, tgl_lahir, tahun_masuk,aktif)
select @max_noinduk , nama_calon_siswa, alamat, jenis_kelamin, tempat_lahir,
tanggal_lahir, @tahun,’A’ from tbl_calonsiswa where No_Pendaftaran=@no_pendaftaran;
–Jika kebutuhan siswa sudah cukup maka proses looping selesai
if @lp=@total_terima
BREAK
FETCH NEXT FROM calon_siswa
INTO @no_pendaftaran;
END
–tutup cursor
CLOSE calon_siswa;
DEALLOCATE calon_siswa;
GO
Akhir code.
Penjelasan :
Untuk penjelasan lihat source dan tanda – merupakan awal dari penjelasan.
Bersambung pada tulisan selanjutnya ….
Dan pada akhirnya berikutlah tampilan program kita