SIM SMA PART 2
Sma 1
        Pada bab yang kemarin telah kita bahas untuk menampilkan windows denngan ExtJs. Sebelum kita lanjutkan mari kita sedikit membahas tentang kebiasaan user pengguna pada program. Sebagai seorang programmer kita harus memfikirkan bagaimana kita memanjakan user dengan program – program yang kita buat. Trus pertanyaanya gimana kita tau user itu user itu suka atau tidak atau mungkin puas atau tidak. Bedasarkan pengalaman, user akan suka dengan tampilan yang bagus, mudah di mengerti. Dulu saat kuliah saya pernah di ajari oleh seorang dosen yang mengatakan bahsa sedikit tombol dan banyak menggunakan keyboard akan lebih baik.
        Tahukah anda setelah saya terjun kedunia yang serba penuh dengan tulisan – tulisan yang buat saya sangat menarik ini [coding/source code]. Pendapat dosen saya itu kurang tepat [maaf ya Pak F], karena tidak semua user itu pandai alias pinter. Malah terkadang user itu tidak ngerti sama sekali. Dari permasalahan tersebut untuk membuat sebuah produk yang mudah dipakai, ada sebuah slogan yang sedikit pelajari “Standar adalah produk, produk adalah standar”.
        Jadi pada program ini semua saya buat standar mulai dari penaman file dan tampilannya. Jadi jangan terkejut jika pada aplikasi SIM SMA ini semua tampilan pasti hamper sama alias mirip. Jadi memudahkan kita untuk melakukan penelusuran dan edit source jika ada kesalahan [alias copy paste].

        Pada bagian ini kita akan membahas tentang proses penerimaan siswa baru setelah siswa melakukan pendaftaran dan ujian yang telah diadakan oleh sekolah. Untuk alurnya dapat kita lihat pada gambar di bawah
sma 2
Gambar 1

        Dari diagram di atas dapat kita lihat proses pendaftaran dampai dengan ujian telah kita bahas pada part 1. Yang kita bahas kali ini adalah pada proses penerimaan siswabaru menjadi siswa yang diterima.
        Pada proses ini untuk dapat menerima siswa dilihat dari nilai ujian siswa yang telah dimasukkan pada saat setelah ujian, pada menu pendaftaran siswa [edit nilai]. Untuk melakukan proses akan kita bebankan pada database kita, jadi kita akan menggunakan store procedure yang ada pada SQL-Server jadi kita nanti tinggal mengeskeskusi procedure tersebut dengan mengirimkan parameter – parameter tertentu.
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
sma 3
gambar 2

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 :

2006/20072007/20082008/20092009/20102010/20112011/2012


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&param=&isiparam=&rpt=siswabaru.jrxml';
}
},'-',{
text:'',
tooltip:'Export MS Excel',
iconCls:'excel',
handler:function(){
window.location ='../koneksi/viewReport.jsp?type=xls&param=&isiparam=&rpt=siswabaru.jrxml';
}
},'-',{
text:'',
tooltip:'Export PDF',
iconCls:'pdf',
handler:function(){
window.location ='../koneksi/viewReport.jsp?type=pdf&param=&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.
gambar 4

Gambar 3

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 [email protected];
set @lp=0;

declare @tmp integer;
--Pembuatan cursor
DECLARE calon_siswa CURSOR FOR
SELECT no_pendaftaran from tbl_calonsiswa where [email protected] 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 @[email protected]+1;
--Pembuatan no induk yang dimanis
set @max_noinduk=(select ISNULL(max(no_induk),'000') as maxnoinduk from tbl_siswa where [email protected]);
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 [email protected]_pendaftaran;

--Jika kebutuhan siswa sudah cukup maka proses looping selesai
if @[email protected]_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

gambar 5
Gambar 4 Seleksi siswa

gambar6

Gambar 5 Siswa yang diterima

Download file pdf
Download