ajax DataBase 연결

limchard·2023년 10월 31일
DatabaseJDBCRSSimpleDateFormatStatementXMLajaxarraycatchconncreateStatementdbdbconnectexecuteQuery()finallyjarjsonoracleresultsetsdfstmttryurl배열연결
0

ajax

목록 보기
2/3

연결하는법

  • 아래사진과 같이 library 폴더에 jdbc 파일을 넣는다. 그래야 db 연동이 가능하다.

    -아래와 같이 DBConnect.java도 복사해서 넣어준다. 해당 java 코드의 경우 필수는 아니지만 이전 Oracle Database Developer 사용 시 편의를 위해 만들어 둔 것이다. Developer를 연결해주는 기본 url 관련 사항이 들어가 있다.
package oracle_db;

import java.sql.*;

public class DBConnect {

    // driver(OJDBC), url, 계정, 비밀번호를 반드시 connection 해줘야 한다.

    // url
    static final String ORACLE_URL="jdbc:oracle:thin:@localhost:1521:XE";

    // driver : 딱 1번만 실행.. 생성자 단에서 실행
    String driver="oracle.jdbc.driver.OracleDriver";
    public DBConnect(){

        try{
            Class.forName(driver);
            System.out.println("오라클 드라이버 성공!!");

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
            System.out.println("오라클 드라이버 실패!! "+e.getMessage());
        }
    }

    // Connection
    public Connection getConnection(){
        Connection conn=null;

        try {
            conn= DriverManager.getConnection(ORACLE_URL,"scott","tiger");

        } catch (SQLException e) {
            e.printStackTrace();
            System.out.println("오라클 연결실패: url, 계정, 비밀번호 확인 요함 "+e.getMessage());
        }

        return  conn;
        // void return이 없다. 해당 method에 void가 아니기 때문에 return이 없으면 아래 중괄호에 오류가 난다.
    }

    // close 메서드 생성.. 총 4개
    public void dbClose(ResultSet rs, Statement stmt, Connection conn){
        try {
            if(rs!=null) rs.close();
            if(stmt!=null) stmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public void dbClose(Statement stmt, Connection conn){  // ResultSet이 없는 이유는 출력이 필요 없기 때문
        try {
            if(stmt!=null) stmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public void dbClose(ResultSet rs, PreparedStatement pstmt, Connection conn){  //PreparedStatement : 미완의.. 뭐라고?
        try {
            if(rs!=null) rs.close();
            if(pstmt!=null) pstmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public void dbClose(PreparedStatement pstmt, Connection conn){
        try {
            if(pstmt!=null) pstmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

DB값을 가져와서 출력하기

  • Developer를 이용하여 직접 기입한 DB 값 (team)
  • Developer를 이용하여 직접 기입한 DB 값 (info)
  • xml 관련 jsp 파일(team)
  1. DB와 연결을 위해 Connect,PreparedStatement,ResultSet을 해준다.
  2. while문을 통해 값을 가져온다.
  3. 가져온 값을 xml파일의 양식에 맞춰 기입해줘야 한다.
<?xml version="1.0" encoding="UTF-8"?>
<%@page import="java.sql.SQLException"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<data>
	<%
		DBConnect db=new DBConnect();
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		String sql="select * from team order by num";
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
		
		try{
			
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
			while(rs.next()){
				String num=rs.getString("num");
				String name=rs.getString("name");
				String addr=rs.getString("addr");
				String writeday=sdf.format(rs.getTimestamp("writeday"));
				
				%> 
					
				<team num="<%=num%>">
					<name><%=name %></name>
					<addr><%=addr %></addr>
					<writeday><%=writeday %></writeday>
				</team>
			<%}
		
		} catch(SQLException e){
			
		} finally{
			db.dbClose(rs, pstmt, conn);
		}
	%>	
</data>
  • json 관련 jsp 파일(info)
  1. DB와 연결을 위해 Connect,PreparedStatement,ResultSet을 해준다.
  2. while문을 통해 값을 가져온다.
  3. 가져온 값을 json파일의 양식에 맞춰 기입해줘야 한다.
  4. 따옴표 분류가 진짜.. 죽어버릴꺼같다.. 해당 json 형식 파일을 출력하여 오타가 없는지 확인이 필요하다.
  5. s=s.substring(0,s.length()-1); 노가다 반복한 것에서 마지막 },] 사이의 , 제거
  6. 다음 예제에서는 배열을 이용하여 좀 더 간단하게 해결할 수 있는 방법을 알아볼 것이다.
  • read 파일
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<% 
DBConnect db=new DBConnect();
Connection conn=db.getConnection();
PreparedStatement pstmt=null;
ResultSet rs=null;

String sql="select * from info order by num";

String s="[";

try{
	
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();

while(rs.next()){
	String num=rs.getString("num");
	String name=rs.getString("name");
	String hp=rs.getString("hp");
	String age=rs.getString("age");
	String photo=rs.getString("photo");
	
	s+="{";
    s+="\"num\":"+num+",\"name\":\""+name+"\",\"hp\":\""+hp+"\",\"age\":"+age+",\"photo\":\""+photo+"\"";
    s+="},";
	// "num":1,"name":"길동","hp":"010-22..."
}
	
	// 마지막 컴마 제거
	s=s.substring(0,s.length()-1);
	
} catch(SQLException e) {
	
} finally{
	db.dbClose(rs, pstmt, conn);
}

s+="]";
%>

<%=s%>
  • 초기화면
  • xml 파일 읽어오기 클릭 시 (사진이 너무 커서 아래부분 잘라냈음)
  • json 파일 읽어오기 클릭 시 (사진이 너무 커서 아래부분 잘라냈음)

json 배열 이용하여 풀기, table로 출력하기

  • 위에서 언급한바와 같이 json 관련 jsp 파일의 따옴표 노가다를 줄이기 위해 배열을 사용하여 진행한다.
  • 아래 그림과 같이 검색하여 나온 홈페이지에 들어가서 가장 최신 파일을 다운받으면 된다.
  • 위에서 다운받은 jar(jdbc) 파일을 library 폴더에 넣으면 기능을 사용할 수 있다.
  • xml DB 파일 (myfood)
  • json DB 파일 (shop)
  • xml 파일 jsp(myfood)
<?xml version="1.0" encoding="UTF-8"?>
<%@page import="java.sql.SQLException"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<data>
	<%
		DBConnect db=new DBConnect();
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		String sql="select * from myfood order by num";
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
		
		try{
			
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
			while(rs.next()){
				
				String num=rs.getString("num");
				String name=rs.getString("foodname");
				String photo=rs.getString("foodphoto");
				int price=rs.getInt("price");
				int cnt=rs.getInt("cnt");
				%> 
				<myfood num="<%=num%>">
					<foodname><%=name %></foodname>
					<foodphoto><%=photo %></foodphoto>
					<price><%=price %></price>
					<cnt><%=cnt %></cnt>
				</myfood>
				
			<%}
		
		} catch(SQLException e){
			
		} finally{
			db.dbClose(rs, pstmt, conn);
		}
	%>	
</data>
  • json 파일 jsp(myfood)
  1. JSONArray arr=new JSONArray(); : 배열 사용을 위해서 배열 관련 class를 불러온다.(배열을 관리해주는 메서드)
  2. JSONObject ob=new JSONObject(); : 배열 사용을 위해서는 Object를 통해 배열에 값을 넣어줘야 한다. (데이터를 관리해주는 메서드)
  3. Object를 통해 값을 저쟁해준다는 느낌(put 함수 사용)
  4. 위에 저장해놓은 값을 Array에 넣어준다. add함수 사용
  5. .toString(): Object 형식으로 넣어준 변수값을 출력 가능한 문자열로 변경해준다.
<%@page import="org.json.simple.JSONObject"%>
<%@page import="java.sql.SQLException"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	DBConnect db=new DBConnect();
	Connection conn=db.getConnection();
	Statement stmt=null;
	ResultSet rs=null;
	
	String sql="select * from shop order by num";
	
	try{
		stmt=conn.createStatement();
		rs=stmt.executeQuery(sql);
		
		JSONArray arr=new JSONArray();
				
		while(rs.next()){
			String num=rs.getString("num"); // ("json에서 기입될 num",위에서 지정해준 변수)
			String sangpum=rs.getString("sangpum");
			String color=rs.getString("color");
			String price=rs.getString("price");
			String imgname=rs.getString("imgname");
			
			JSONObject ob=new JSONObject();
			
			ob.put("num",num); // ("",)
			ob.put("sangpum",sangpum);
			ob.put("color",color);
			ob.put("price",price);
			ob.put("imgname",imgname);
			
			// array에 추가
			arr.add(ob);
		}%>
		<%=arr.toString() %> <!-- Object 형식으로 넣어준 변수값을 출력 가능한 문자열로 변경해준다. -->
	<%}catch(SQLException e){
	}
%>
  • read 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Moirai+One&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style>
	#show{
		width: 250px;
	}
</style>
</head>
<body>
	<button type="button" id="btn1" class="btn btn-outline-info">xml 읽기 (myfood)</button>
	<button type="button" id="btn2" class="btn btn-outline-success">json 읽기</button>
	<div id="show">출력하는 곳</div>
	
	<script>
		$("#btn1").click(function(){
			$("#show").empty();
			var s="";
			
			$.ajax({
				type:"get",
				url:"ex01_foodtoxml.jsp",
				dataType:"xml",
				success:function(res){
					$(res).find("myfood").each(function(idx,ele){
						s+="<div class='alert alert-info'>";
						s+="No: "+$(ele).attr("num")+"<br>";
						s+="음식이름 :"+$(ele).find("foodname").text()+"<br>";
						s+="사진: <img src='"+$(ele).find("foodphoto").text()+"' style='width: 50px; background-color: yellow; border-radius: 10px;'><br>";
						s+="가격: "+$(ele).find("price").text()+"<br>";
						s+="수량: "+$(ele).find("cnt").text()+"<br>";
						s+="</div>";
					})
					$("#show").html(s);
				}
			})
		})
		
		$("#btn2").click(function(){
			$("#show").empty();
			var s="";
			
			$.ajax({
				type:"get",
				url:"ex01_shoptojson.jsp",
				dataType:"json",
				success:function(res){
					
					s="<table class='table table-bordered' style='width:700px'>";
					s+="<tr>";
					s+="<th>번호</th><th>상품명</th><th>색상</th><th>이미지</th><th>가격</th>";
					s+="</tr>"
					
					$.each(res,function(i,e){
						s+="<tr>";
						s+="<td>"+e.num+"</td>";
						s+="<td>"+e.sangpum+"</td>";
						s+="<td>"+e.color+"<br>"+"<div class='box' style='background-color:"+e.color+"; width: 50px; border-radius: 50px;'></div></td>"
						var img=e.imgname;
						s+="<td><img src='"+img+"' style='width: 50px; background-color: yellow; border-radius: 10px;'></td>";
						s+="<td>"+e.price+"</td>";
						
						s+="</tr>";
					})
					s+="</table>";
					$("#show").html(s);	
				}
			})
		})
	</script>
</body>
</html>
  • 초기화면
  • xml 읽기 (myfood)선택 시.. (너무 길어서 짤랐음)
  • json 읽기 (shop) 선택 시

배열연습

  • DB 파일

  • json 파일

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%

	DBConnect db=new DBConnect();
	Connection conn=db.getConnection();
	Statement stmt=null;
	ResultSet rs=null;
	
	String sql="select * from myfriend order by num";
	
	try{
		stmt=conn.createStatement();
		rs=stmt.executeQuery(sql);
		
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
		
		JSONArray arr=new JSONArray();
		
		while(rs.next()){
			String num=rs.getString("num");
			String fname=rs.getString("fname");
			String fhp=rs.getString("fhp");
			String faddr=rs.getString("faddr");
			String gaipday=sdf.format(rs.getTimestamp("gaipday"));
			
			JSONObject ob=new JSONObject();
			
			ob.put("num",num);
			ob.put("fname",fname);
			ob.put("fhp",fhp);
			ob.put("faddr",faddr);
			ob.put("gaipday",gaipday);
			
			// 배열에 추가
			arr.add(ob);
					
		}%>
		
		<%=arr.toString() %>
	<%} catch(SQLException e) {	
	}
%>
  • read 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Moirai+One&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style>
	#result{
		font-family: Nanum Pen Script;
		font-size: 15pt;
		background-color: lightgoldenrodyellow;
		width: 300px;
		
	}
	
</style>
</head>
<body>
	<button type="button" id="btn1" class="btn btn-outline-info">과제 가즈아!</button>
	<div id="result">과제출력</div>
	
	<script>
		$("#btn1").click(function(){
			$("#result").empty();
			var s="";
			
			$.ajax({
				type:"get",
				url:"ex02_friendToJson.jsp",
				dataType:"json",
				success:function(res){
					$.each(res,function(idx,ele){
						s+="<div style='float: left; padding:10px; margin: 5px; background-color: lightpink; width: 200px; border-radius: 10px; border: 1px solid gray;'>";
						s+="No. :"+ele.num+"<br>";
						s+="이름 :"+ele.fname+"<br>";
						s+="핸드폰번호 :"+ele.fhp+"<br>";
						s+="주소 :"+ele.faddr+"<br>";
						s+="가입날짜: "+ele.gaipday+"<br>";
						s+="</div>";
					})
					$("#result").html(s);
				}
			})
		})
		
	</script>
</body>
</html>

  • 초기화면

  • 과제 가즈아! 클릭 시 (사진이 길이져서 잘랐음)

profile
limchard
java를 잡아...... 하... 이게 맞나...
이전 포스트

Ajax 기초

다음 포스트

ajax CRUD

0개의 댓글

관련 채용 정보