웹 페이지에 DB 불러 오기 - web peijie DB bulleo ogi

Question

2022.02.11(35일 차)

35일 차 마지막에 했던 성적 처리 웹페이지 &DB 연동을 따로 정리하고자 한다.

성적 처리 웹페이지

상단의 페이지를 만들 것이고, 학번, 이름, 국어, 영어, 수학을 작성하고 입력완료 버튼을 클릭 시 DB에 데이터가 들어가도록 할 것이다.

JDBC를 배울 때 jdk폴더와 jre폴더에 ojdbc6.jar를 넣고 DB 연동을 하였다. 강사님께서는 ojdbc6.jar이 설명서로 비유하셨는데 우리는 또 이 작업을 해줘야 한다.

JDBC를 배울 때 jdk폴더와 jre폴더에 ojdbc6.jar를 넣고 DB 연동

ojdbc6 파일을 복사한 후에 상단 경로(lib) 폴더에 붙여 넣기

먼저 위의 경로로 가서 ojdbc6 파일을 복사한 후에 상단 경로(lib) 폴더에 붙여 넣기를 한다.

우리는 예전에 만들었던 score테이블을 웹 페이지와 연동할 것이다.

cmd창을 켜서 예전에 만들었던 suzi 계정으로 로그인하고, score테이블을 확인

cmd창을 켜서 예전에 만들었던 suzi 계정으로 로그인하고, score테이블을 확인해본다.

DBConn.java - DB 연결

package com.util;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConn {
	
	private static Connection conn = null;
	
	public static Connection getConnection() {
		
		String url = "jdbc:oracle:thin:@localhost:1521:xe";
		String user = "suzi";
		String pwd = "a123";
		
		if(conn==null) {
			
			try {
				
				Class.forName("oracle.jdbc.driver.OracleDriver");
				
				conn = DriverManager.getConnection(url, user, pwd);
				
			} catch (Exception e) {
				System.out.print(e.toString());
			}
		}
		
		return conn;
		
		
	}
	
	public static void close() {
		
		if(conn==null)
			return;
		
		try {
			
			if(!conn.isClosed())
				conn.close();
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		conn = null;
	}
	
}

ScoreDTO 생성

package com.score;

public class ScoreDTO {
	
	private String hak;
	private String name;
	private int kor;
	private int eng;
	private int mat;
	//여기까진 테이블에 있는 변수
	
	//하단은 내가 만드는 임의의 변수
	private int tot;
	private int ave;
	private int rank;
	
	public String getHak() {
		return hak;
	}
	public void setHak(String hak) {
		this.hak = hak;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getKor() {
		return kor;
	}
	public void setKor(int kor) {
		this.kor = kor;
	}
	public int getEng() {
		return eng;
	}
	public void setEng(int eng) {
		this.eng = eng;
	}
	public int getMat() {
		return mat;
	}
	public void setMat(int mat) {
		this.mat = mat;
	}
	public int getTot() {
		return tot;
	}
	public void setTot(int tot) {
		this.tot = tot;
	}
	public int getAve() {
		return ave;
	}
	public void setAve(int ave) {
		this.ave = ave;
	}
	public int getRank() {
		return rank;
	}
	public void setRank(int rank) {
		this.rank = rank;
	}
}

먼저 테이블에 있는 변수 5개를 선언해주고, 내가 쓰는 임의의 변수 3개를 선언한다.

나머지는 마우스 우클릭 -> source -> getter/setter을 클릭하고 만들어주면 된다.

마우스 우클릭 -> source -> getter/setter을 클릭하고 만들어주면 된다.

ScoreDAO 생성

package com.score;

import java.sql.Connection;
import java.sql.PreparedStatement;

//이 클래스는 Table에 대한 정보를 알고 있어야함 / DB의 위치 정보를 갖고 있어야함
//ScoreDAO가 객체생성을 할 때 DB의 위치 정보를 갖고있어야함.

public class ScoreDAO {
	
	//스프링에서는 의존성 주입 이라 함.
	//conn을 받을 변수 만들어주기 데이터타입은 Connection이다.
	private Connection conn;
	
	//매개변수가 있는 생성자
	public ScoreDAO(Connection conn) {
		this.conn = conn;
	}
	
	//입력 - JDBC
	public int inserData(ScoreDTO dto) {
		
		int result = 0;
		PreparedStatement pstmt = null;
		String sql;
		
		try {
			
			sql = "insert into score(hak,name,kor,eng,mat) ";
			sql += "values (?,?,?,?,?)";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, dto.getHak());
			pstmt.setString(2, dto.getName());
			pstmt.setInt(3, dto.getKor());
			pstmt.setInt(4, dto.getEng());
			pstmt.setInt(5, dto.getMat());
			
			result = pstmt.executeUpdate();
			
			pstmt.close();
			
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		
		return result; // 0아니면 1 값을 호출해옴
	}
	
}

write.jsp - 성적 입력 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");

	String cp = request.getContextPath(); //cp는 ContextPath의 약자

%>
<!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>성적처리 입력</title>

<script type="text/javascript">

	function sendIt() {
		
		var f = document.myForm;
		
		//f.action = "http://www.naver.com/study/score/write_ok.jsp";
		//f.action = "http://localhost:8080/study/score/write_ok.jsp";
		//우리는 도메인주소가 없어서 locahost8080이나오고 naver는 도메인이 있어서 naver.com이 나옴
		f.action = "<%=cp%>/score/write_ok.jsp";
		f.submit();
		
	}


</script>

<style type="text/css">

body {
	font-size: 10pt;
}

td {
	font-size: 10pt;
}

.txtField {
	font-size: 10pt;
	border: 1px solid;
}

.btn {
	font-size: 10pt;
	background: #e6e6e6
}

</style>


</head>
<body>

<br/><br/>

<table width="500" cellpadding="0" cellspacing="3" align="center" bgcolor="#e4e4e4">
<tr height="50">
	<td bgcolor="#ffffff" style="padding-left:  10px;">
	<b>성적처리 입력화면</b>
	</td>
</tr>
</table>

<br/>

<form action="" method="post" name="myForm">

<table width="500" cellpadding="0" cellspacing="0" align="center">

<tr height="2"><td colspan="2" bgcolor="#cccccc"></td></tr>

<tr height="30">
	<td align="center" width="100" bgcolor="#e6e6e6">학번</td>
	<td style="padding-left: 5px;">
	<input type="text" name="hak" size="10" maxlength="8" class="txtField"/>
	</td>
</tr>

<tr height="2"><td colspan="2" bgcolor="#cccccc"></td></tr>

<tr height="30">
	<td align="center" width="100" bgcolor="#e6e6e6">이름</td>
	<td style="padding-left: 5px;">
	<input type="text" name="name" size="20" maxlength="10" class="txtField"/>
	</td>
</tr>

<tr height="2"><td colspan="2" bgcolor="#cccccc"></td></tr>

<tr height="30">
	<td align="center" width="100" bgcolor="#e6e6e6">국어</td>
	<td style="padding-left: 5px;">
	<input type="text" name="kor" size="20" maxlength="3" class="txtField"/>
	</td>
</tr>

<tr height="2"><td colspan="2" bgcolor="#cccccc"></td></tr>

<tr height="30">
	<td align="center" width="100" bgcolor="#e6e6e6">영어</td>
	<td style="padding-left: 5px;">
	<input type="text" name="eng" size="20" maxlength="3" class="txtField"/>
	</td>
</tr>

<tr height="2"><td colspan="2" bgcolor="#cccccc"></td></tr>

<tr height="30">
	<td align="center" width="100" bgcolor="#e6e6e6">수학</td>
	<td style="padding-left: 5px;">
	<input type="text" name="mat" size="20" maxlength="3" class="txtField"/>
	</td>
</tr>

<tr height="2"><td colspan="2" bgcolor="#cccccc"></td></tr>

<tr height="35">
	<td align="center" colspan="2">
	<input type="button" class="btn" value="입력완료"  onclick="sendIt()">
	<input type="reset" class="btn" value="다시입력"
	onclick="document.myForm.hak.focus();"/>
	<input type="button" class="btn" value="입력취소" onclick=""/>
	</td>
</tr>

</table>

</form>


</body>
</html>

write_ok.jsp - 성적 입력처리 페이지

<%@page import="com.score.ScoreDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>

<jsp:useBean id="dto" class="com.score.ScoreDTO" scope="page"/>
<jsp:setProperty property="*" name="dto"/>

<%
	Connection conn = DBConn.getConnection(); // conn에 DB연결자가 들어가있다. ScoreDAO는 conn이 필요하다.
	
	ScoreDAO dao = new ScoreDAO(conn); //ScoreDAO한테 conn을 매개변수로 준다.(생성자 오버로딩)
	
	//dao.inserData(dto); //java는 반환값을 안적어도된다. java만 유일
	int result = dao.inserData(dto);
	
	DBConn.close();
	
	if(result!=0)
		response.sendRedirect("list.jsp");


%>

<!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>Insert title here</title>
</head>
<body>



</body>
</html>

list.jsp - 성적입력 완료 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!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>Insert title here</title>
</head>
<body>

성적 입력 완료!

</body>
</html>

실행화면

완성 화면

정보를 입력한 후에 입력 완료를 누르면 하단 페이지로 넘어간다.

성적 입력 결과

이제 DB에 위의 입력한 데이터가 들어갔는지 확인한다.(CMD에서 확인)

성공적으로 데이터가 들어갔다. 오늘 수업은 여기까지 하고 마치게 되었습니다. 느낌이 다음 시간에는 DB를 배웠을 때처럼 웹 페이지에서 데이터 수정, 삭제 기능을 넣고, 테이블을 보여줄 수 있게 만들 것 같다.

기능을 확장한다면 이 글에 추가적으로 포스팅 예정!

웹서버 db서버 연동 Html DB 연동 MySQL html 연동 html mysql 가져오기 프론트엔드 DB 연동