#2일차 ( jQuery(ajax) 와 JSP(java) 로 데이터베이스기록)
(전편과 이어지는 내용입니다. 아...내일은 네이티브 코드를 볼 수 있겟죠? 매일 켜놓는 넥서스7이 민망해집니다.)
전편에서 했던 모든 것들을 이어서 입력받은 화면을 (qt.html) 을 생성하고 해당 jsp(memoinsert.jsp) 를 이용해서 oracle Database 에 기록을 해봅시다.
필요한 파일은 WebContent 에 "qt.html" "memoinsert.jsp" 입니다 . 두 파일을 생성합니다.
이전 포스팅에 있던 TenHap 처럼 Java 코드는 별도의 클래스로 처리를 하도로 합니다.
패키지 네임은 "bit.study" 를 그대로 이용합니다.
클래스를 추가합니다.
MemoDAO.java : 실제 데이터베이스에 접속해서 데이터를 기록함
MemoDTO.java : 데이터베이스기록시에 전달한 파라미터구조체(클래스로 정의하지만 구조체같네요)
왼쪽사진과 같은 파일 구조가 되겠습니다.
그런데! lib 의 "ojdbc6.jar" 을 주목해주세요!
이파일이 있어야 실제로 데이터베이스를 쓸수 있으니까요.
JDBC 라는 Oracle Database 연결용 드라이버파일입니다.
이파일은 오라클DB를 설치하면 구할 수 있는데요(?)
Oracle Express 11g 기준으로 말씀드리면
"c:\oraclexe\app\oracle\product\11.2.0\server\jdb\lib"
에 있습니다. 해당 파일을 마우스로 쭉 ~ 끓어서 Lib 에 놓으면 뭘좀 물어보게되는데
내용인 즉! 복사해서 넣을래? 아님 그냥 링크해서 쓸래? 입니다.
전 그냥 복사해서 넣는걸로 했습니다.
JDBC 은 ODBC 와 이름이 비슷하지 않아요? ㅋㅋ
ODBC 는 오픈형태의 연결방식이니 당연히 JDBC는 비슷한 역할은 하는 자바 전용이겠죠?
뭐 이렇게 파일은 준비되었고 이제 내용을 채워봅시다.
예제) 사용자로부터 이름,메모를 입력받는 페이지를 구성합니다.(qt.html)
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//입력한 값을 가지고 xml 처리한다.
$("#btn2").click(function() {
var name = $("#name").val();
var memo = $("#memo").val();
if(name=="" || memo=="") {
alert("모두 입력하세요");
$("#name").focus();
return;
}
var postval = $("#frm").serialize();//폼내의 전송데이터를 생성함)
$.ajax({
type:"post",
url:"memoinsert.jsp",
data: postval,
success: function(data) {
alert(data);
},
error: function(xmlRequest){
alert("Error : " + xmlRequest.status+"\n\r"+xmlRequest.statusText+"\n\t"+xmlRequest.responseText);
}
});
});
});
</script>
</head>
<body>
<form name="frm" id="frm">
이름<input type="text" id="name" name="name"><br />
메모<input type="text" id="memo" name="memo"><br />
</form>
<input type="button" value="입력" id="btn2" />
</body>
</html>
이 페이지는 화면에 입력받는 화면을 보여주면서 동시에 ajax로 처리하고 결과를 alert 창을 이용해서 보여주는 소스입니다. <body></body> 태그 사이의 태그들이 화면에 보여지는 요소이며 파란색 글씨부분이 jQuery aJax코드입니다.
aJax가 데이터베이스에 기록하는 페이지를 호출하게됩니다.
페이지를 미리보기하면(Ctrl+F11) 왼쪽과 같은 페이지를 보실 수 있습니다.
간단히 이름과 메모칸에 무언가를 입력하고 "입력" 버튼을 클릭하면 해당 값을 Oracle Database에 기록할 것입니다.
일단 "입력" 버튼을 클릭시에 입력할 할것이므로 "Click Event"를 이용해서 기록하는 페이지파일(memoinsert.jsp)를 호출하도록 합니다.
페이지 전환없이 현재 페이지에서 작업할것이므로 jQuery, ajax를 이용합니다.
ajax 호출시에 데이터는 post방식으로 전송을 합니다.
post 방식으로 실제 이 데이터를 받게되는 memoinsert.jsp 파일은 post 변수에서 값을 가져와야합니다.
데이터를 보낼때에는 각 변수명,값 식으로 데이터를 보내야하는데 이것을 간편하게 하기위해서 serialzie 를 이용해서 form데이터를 그대로 변수화 하고 있습니다.
(어떤값이 생성되는지 궁금하시다면 alert(postval); 명령어로 확인해보시기 바랍니다.)
호출이 성공하면 해당 페이지에서 넘어오는 값을 화면에 표시를 할 것이고
실패하면 "Error :" 라는 메세지를 띄우라는 코드가 되겠습니다.
"memoinsert.jsp"
<%@page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@page import="bit.study.*" %>
<%
request.setCharacterEncoding("utf-8"); //한글깨짐방지(euc-kr 혹은 utf-8 중에 고르세요! ㅋㅋ)
String name=request.getParameter("name"); //파라미터값(이름입력칸)
String memo=request.getParameter("memo"); //파라미터값(메모입력칸)
MemoDTO dto = new MemoDTO(name,memo); //데이터전송개체(일종의 구조체 개념)
MemoDAO dao = new MemoDAO(); //데이터처리개체
String result = dao.insertMemo(dto);
out.print(result); //추가한 결과를 반환합니다.(오류발생시에는 오류메세지가 반환됩니다)
%>
ajax로 부터 실행되는 페이지 입니다. ajax로 넘어오는 name,memo 필드값을 가지고 자료를 처리할 것이며 실제 작업은 이곳이 아닌 별도로 생성하는 java class를 이용해서 처리할 것입니다.
흠!! 주석을 위에 달아놔서 별로 할말이 없군요!
붉은색부분은 이 파일이 아닌 다른 class에 있는 선언입니다. 그러니 이파일을 먼저 생성하면 일단 오류부터 날거에요
이후에 해당 class를 생성하셔도 무방합니다. 그리고 실제 데이터베이스에 넣는 명령은 "insertMemo" 로 해보았습니다.
(이름따위 맘대로 해도됩니다)
이 파일은 post 데이터로 넘어온 데이터를 가지고 javaclass(memodto, memodao)를 이용해서 데이터를 입력한후에 해당 결과를 반환하는 구조입니다 . 어찌보면 이것역시 껍데기죠? 진짜 중요한건 실제 작업을 수행하는 javaClass 파일입니다.
"MemoDTO.class"
package bit.study;
public class MemoDTO {
private String name; //이름
private String memo; //메모
//생성자(생성시에 두개의 파라미터를 받는다) ①번생성자
public MemoDTO(String _name,String _memo)
{
name = _name;
memo = _memo;
}
//인수가없는 생성자(기본값은 빈값) ②번생성자
public MemoDTO()
{
name = "";
memo ="";
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMemo() {
return memo;
}
public void setMemo(String memo) {
this.memo = memo;
}
}
두개의 문자열을 파라미터로 받아서 저장하고 반환하는 클래스입니다.
.Net 의 Structure 로 생각하면 딱이네요! 일단은 클래스이지만 ^^:
생성자는 두개를 만들어두었는데 생성시에 바로 이름과 메모를 입력받는 1번 생성자와 기본생성하는 2번생성자가 있습니다.
제경우에는 1번 생성자를 이용했습니다. (생성하면서 변수값을 바로 할당합니다)
.Net 의 속성(property)는 Setter 와 Getter 를 동시에 선언할 수 있는데.
java 에서는 별도로 생성해주셔야합니다 .get,Set 두개로 . 하지만 자동으로 생성해주니 생성자체는 편합니다.
근데 소스가 길어지네요.. Name 을 예를 들어서 .Net 으로 생성한다면
public property String Name()
{
get { return name; }
set { name =value; }
}
위와같이 되겠습니다.!!
좀 간결해 보이지 않나요? Name 을 변수에 할당하면 Get 이 Name = "1" 처럼 값을 할당하면 Set 이 자동으로 실행되게됩니다.
뭐 암튼 이걸로 전송하는 데이터 구조는 생성을 하였고! 대망의 마지막 파일! 저장을 하는 파일을 생성해봅시다.
사실 이파일은 수업시간에 처리한 파일보다 몇가지 오류메세지처리를 한 파일입니다.
(제가 제대로 결과가 나오지 않았는데 당췌 -_- 오류메세지가 나오지않아서 수정한것입니다. : 결과는 같아요)
"memoDAO.java"
package bit.study;
import java.sql.*;
//JDBC 데이터베이스 프로그램
public class MemoDAO {
private Connection conn; //연결개체 (=dataconnection)
private PreparedStatement ps; //sql 전송 개체 (=datacommand)
private MemoDTO dto; //기록하고자하는 데이터(이름과 메모가 들어있음)
///데이터베이스에 연결합니다. (연결실패할 경우 오류메세지를 반환합니다.)
public String getConnection()
{
try {
//오라클 접속 드라이버 로딩 (2-1 번 게시물의 jdbc 라이브러리가 있어야 오류가 안납니다)
Class.forName("oracle.jdbc.driver.OracleDriver");
//접속데이터베이스정보설정(ip,port,tns name)
String url = "jdbc:oracle:thin:@192.168.56.101:1521:XE"; //연결문자열 (룰을 따르세요)
//접속개체초기화(접속정보,oracle user id, oracle user password)
conn = DriverManager.getConnection(url,"system","1123"); //url, userid, userpassword
return ""; //접속에 문제가 없다면 빈 문자열을 반환하게 됩니다.
} catch (Exception e1) {
e1.printStackTrace();
return e1.toString(); //접속이 실패되었다면 실패 오류메세지를 반환합니다.
}
}
//메모를 입력합니다.(memoDTO 파라미터를 받습니다 = 기록한 데이터가 들어있는 구조클래스)
public String insertMemo(MemoDTO dto)
{
String conresult =getConnection(); //데이터베이스연결(실패하면 오류메세지가 반환됨)
if (conresult != "") { //오류메세지가 있다면?
return "Connection Error : " + conresult; //해당접속오류메세지를 반환합니다.
} else {
//접속에 문제가 없으므로 테이블에 기록하는 명령어를 실행합니다
String sql = "insert into memot(name,memo) values(?,?)"; //? 는 파라미터를 의미합니다.
try {
ps = conn.prepareStatement(sql); //명령어실행기 준비!
ps.setString(1,dto.getName()); //파라미터1(이름) 을 바인딩
ps.setString(2,dto.getMemo()); //파라미터2(메모) 을 바인딩
ps.executeUpdate(); //명령어를 실행합니다.
return "Save OK"; //완료했으므로! "Save OK"를 반환합니다.
} catch (Exception e) {
e.printStackTrace();
return "Save Error "+e.toString(); //에러났다! -_-;; 실패에러사유를 반환한다.
}
}
}
}
하앍 ...깁니다. -_- 전부타이핑하느라 힘드네요;
(이정도 하느라 힘든건 아니구요 매일매일 미친듯이 코딩하는데 추가로 야간에 이러고 있으니 더 힘든겁니다)
자 근데 뭔가 빠졌죠?
"데이터베이스 테이블"
ㅋㅋ 안만들었으니 에러나겠죠? 테이블을 만듭시다!
근데 만드는 방법은 오라클에 실행하는거에요! 따로 포스팅을 할것이지만 지금은 언급하지 않겠습니다.
다 아실거라 믿어요. (sqlplus 에 아래 쿼리를 넣고 실행해주세요)
"memot 테이블 생성 쿼리"
create table memot (
name varchar2(30),
memo varcha2(30),
);
자 ! 그럼 마지막에 "Save OK" 라는 메세지를 받으시길 기원합니다.
'Information > Android' 카테고리의 다른 글
| [Android] Activity 호출 및 호출된 Activity 데이터제공 (0) | 2013.01.23 |
|---|---|
| [Android] Click Event,Toast,DialogMessage (0) | 2013.01.10 |
| [비트정보기술학원] Android 교육 2-1일차(jQuery,JSP 체험) (2) | 2013.01.08 |
| [비트정보기술학원] Android 교육 1일차(개발환경구축) (0) | 2013.01.07 |
| [비트정보기술학원] Tomcat Context 등록(추가/삭제) (0) | 2013.01.07 |
