utamiresti: 2015-05-24

Kamis, 28 Mei 2015

Input Data Dengan JSP dan Oracle XE

Dear All,,,

Install terlebih dahulu, Netbeans (Versi berapa aja), klo saya pakai Versi 7.2.1

Install juga Oracale XE nya, pakai yang 10G aja, setting dan buat tableuser sendiri yah, atau menggunakan Defaultnya 'System'.

Instaal juga Apache Tomcat nya, saya pakai versi 7.0.27.0

Siapkan juga ojdbc14.jar, untuk import ke libraries di project nanti.

Jangan lupa juga install JDK nya yah, saya pakai JDK versi 1.7.

Jangan lupa juga buat tabel nya yah teman-teman.

Yuuu mulai...

1. Buat Project baru

Ikuti aja langkahnya tekan Next, beri nama Project teman-teman, tekan Next lagi, pilih server yang digunakan, baik pakai Glassfish atau Tomcat.

Berikut gambar file yang sudah kita buat.

klik kanan folder libraries, pilih add library

Jika jdbc sudah di buat, temen-temen tinggal pilih aja file jdbc nya, tapi jika belum, klik 'create', akan muncul tampilan dialog seperti di bawah, isi library name nya, kemudian tekan OK

klik AddJARFolder, dimana teman-teman menyimpan file ojdbc nya, ikuti perintah tekan OK

2. Buat file FORM

Save file di bawah ini dengan nama 'form.jsp'

Klik kanan folder form yang kita buat, pilih New --> JSP

isi File Name nya

Copy Paste source code di bawah ini :

<%--

Document : form

Created on : May 26, 2015, 9:10:16 AM

Author : IT03

--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<script>

function focusNext(form, elemName, evt) {

evt = (evt) ? evt : event;

var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);

if (charCode == 13) {

form.elements[elemName].focus();

return false;

}

return true;

}

function validateForm()

{

if(document.frm.NIK.value=="") {

alert("NIK tidak boleh kosong, Silahkan diisi");

document.frm.NIK.focus(); return false; }

if(document.frm.NIK.value.trim().length <6) {

alert("NIK kurang ari 6 digit, Silahkan dikoreksi");

document.frm.NIK.focus(); return false; }

if(document.frm.NAMA.value=="") {

alert("Nama tidak boleh kosong, Silahkan diisi");

document.frm.NAMA.focus(); return false; }

if(document.frm.ALAMAT.value=="") {

alert("Alamat tidak boleh kosong, Silahkan diisi");

document.frm.ALAMAT.focus(); return false; }

if(document.frm.DESA.value=="") {

alert("Nama Desa tidak boleh kosong, Silahkan diisi");

document.frm.DESA.focus(); return false; }

if(document.frm.KECAMATAN.value=="") {

alert("Nama Kecamatan tidak boleh kosong, Silahkan diisi");

document.frm.KECAMATAN.focus(); return false; }

if(document.frm.KABUPATEN.value=="") {

alert("Nama Kabupaten tidak boleh kosong, Silahkan diisi");

document.frm.KABUPATEN.focus(); return false; }

if(document.frm.ePro.value=="") {

alert("Nama Provinsi tidak boleh kosong, Silahkan diisi");

document.frm.ePro.focus(); return false; }

}

</script>

</head>

<body style="background-color:#b8eccd; margin-top:0.2em; font-family:Arial;

font-size:8pt">

<form name="frm" method="post" action="form_save.jsp">

<table>

<tr><td>NIK</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="NIK" type="text" size="06" maxlength="06"

onkeypress="return focusNext(this.form, 'NAMA', event)"/></td>

</tr>

<tr><td>Nama</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="NAMA" type="text" size="50" maxlength="40"

onkeypress="return focusNext(this.form, 'ALAMAT', event)"/></td>

</tr>

<tr><td>Alamat</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="ALAMAT" type="text" size="50" maxlength="40"

onkeypress="return focusNext(this.form, 'DESA', event)"/></td>

</tr>

<tr><td>Desa</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="DESA" type="text" size="36" maxlength="30"

onkeypress="return focusNext(this.form, 'KECAMATAN', event)"/></td>

</tr>

<tr><td>Kecamatan</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="KECAMATAN" type="text" size="36" maxlength="30"

onkeypress="return focusNext(this.form, 'KABUPATEN', event)"/></td>

</tr>

<tr><td>Kabupaten</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="KABUPATEN" type="text" size="36" maxlength="30"

onkeypress="return focusNext(this.form, 'PROVINSI', event)"/></td>

</tr>

<tr><td>Provinsi</td>

<td><input style="font-size:8pt;text-transform: uppercase;"

name="PROVINSI" type="text" size="36" maxlength="30"

onkeypress="return focusNext(this.form, 'bspn', event)"/></td>

</tr>

</table>

<input type="submit" name="bspn" value="Simpan" onclick="return validateForm()" style="font-size:7pt;">

<script>

document.frm.NIK.focus();

</script>

</form>

</body>

</html>

<br><br>

<a href="form_view.jsp" target="DesktopFrame">View</a>

3. File Save

Buat file seperti langkah No.2

Save File di bawah ini dengan nama 'form_save.jsp'

<%--

Document : form_save

Created on : May 28, 2015, 8:38:27 AM

Author : IT03

--%>

<html>

<head>

<title>Save Form</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" text="#000000">

<%@ page import="javax.servlet.*" %>

<%@ page import="javax.servlet.http.*" %>

<%@ page import="java.sql.*" %>

<%

Connection con = null;

String NIK = request.getParameter("NIK");

String NAMA = request.getParameter("NAMA");

String ALAMAT = request.getParameter("ALAMAT");

String DESA = request.getParameter("DESA");

String KECAMATAN = request.getParameter("KECAMATAN");

String KABUPATEN = request.getParameter("KABUPATEN");

String PROVINSI = request.getParameter("PROVINSI");

String queryText = "insert into BIO001 (\"NIK\", \"NAMA\", \"ALAMAT\", \"DESA\", \"KECAMATAN\",\"KABUPATEN\",\"PROVINSI\") values('"+NIK+"','"+NAMA+"','"+ALAMAT+"','"+ DESA+"','"+KECAMATAN+"','"+KABUPATEN+"','"+PROVINSI+"')";

try {

Class.forName("oracle.jdbc.driver.OracleDriver").newInstance ();

con =

DriverManager.getConnection("jdbc:oracle:thin:@localhost:XE","ganti", "ganti");

Statement stat = con.createStatement();

ResultSet rst = stat.executeQuery(queryText);

rst.close();

stat.close();

con.close();

} catch (Exception e) { }

response.sendRedirect("form_view.jsp");

%>

</body>

</html>

4. File View

Buat file seperti langkah No.2

File di bawah ini save dengan nama 'form_view.jsp'

<%--
Document : form_view
Created on : May 28, 2015, 9:09:15 AM
Author : IT03
--%>

<%@ page language="java" import="java.sql.*" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data Karyawan</title>
<link href="table.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>
<h2>Data Karyawan</h2>

<%
String exportToExcel = request.getParameter("exportToExcel");
if (exportToExcel != null && exportToExcel.toString().equalsIgnoreCase("YES")) {
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-Disposition", "inline; filename="+ "excel.xls");
}
%>
<%
if (exportToExcel == null) {
%>
<a href="form_view.jsp?exportToExcel=YES">Export to Excel</a>
<%
}
%>
<table BORDER="1">
<TR><TD>
<div style="overflow: auto; height:550px;width:900px;">


<table border="0" cellspacing="1" cellpadding="0" bgcolor="#99CCFF">
<%
Connection conn = null;
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:XE","ganti", "ganti");
ResultSetMetaData rsmd;
ResultSet rs1 =null;
ResultSet rsnew=null;
PreparedStatement ps1=null;
String st="SELECT * from BIO001 ORDER BY NAMA ASC";
try{%>
<tr><%
ps1=conn.prepareStatement(st);
rsnew=ps1.executeQuery();
rs1=rsnew;
rsmd=rs1.getMetaData();
int cou=rsmd.getColumnCount();
for(int i=1;i<=cou;i++){
%>

<td><b>
<%=rsmd.getColumnName(i)%>
<%
}
%> </td></b></tr>

<%
while(rs1.next())
{
%>
<tr><td><%=rs1.getString(1)%></td><td><%=rs1.getString(2)%></td><td><%=rs1.getString(3)%></td>
<td><%=rs1.getString(4)%></td>
<td><%=rs1.getString(5)%></td>
<td><%=rs1.getString(6)%></td>
<td><%=rs1.getString(7)%></td>

</div>
</tr>
<%
}
}
catch(Exception e)
{
out.println(e);
}
%>
</table> </div></div>

</div>
</body>
</html>

Nah kurang lebih hasilnya seperti gambar diatas yah teman-teman.

>>SEKIAN SEMOGA BERMANFAAT<<

Continue Reading...

Langganan: Postingan (Atom)

Designed By Templateism | Seo Blogger Templates