System Informasi SMA dengan ExtJs dan jsp [part 1]

Gambar 0

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.

     

  1. 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 1

    Gambar pilihan untuk menampilkan tahun ajaran.

    Setelah muncul pilihan tahun barulah kita akan menampilkan data sesuai dengan tahun ajaran yang di pilih.

    Gambar 2

    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 3

Gambar form Add data

  • Perbaiki.

    Gambar 4

Gambar Edit data

  • Hapus data.

    Gambar 5

Gambar hapus data

  • Print

    Gambar 6

  • Gambar desain report siswa baru

    Gambar 7

  • Gambar hasil report yang sudah di generate oleh jasper report

    Untuk cara penggunaan Ireport akan saya bahas pada tulisan yang selanjutnya.

  • Refresh

    Gambar 8

Gambar refresh data

  • Find

    Gambar 9

Gambar Pencarian data

    Langkah – langkah untuk membuat program di atas adalah sebagai berikut :

    Berikut adalah format folder pada server tomcat :

    Gambar 11

     

     

    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+=",'

    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&param=tahun&isiparam=' + offset + '&rpt=siswabaru.jrxml';

    }

    },'-',{

    text:'',

    tooltip:'Export MS Excel',

    iconCls:'excel',

    handler:function(){

    window.location ='../koneksi/viewReport.jsp?type=xls&param=tahun&isiparam=' + offset + '&rpt=siswabaru.jrxml';

    }

    },'-',{

    text:'',

    tooltip:'Export PDF',

    iconCls:'pdf',

    handler:function(){

    window.location ='../koneksi/viewReport.jsp?type=pdf&param=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