본문 바로가기
Java/Servlet & JSP

JSP) SQL과 함께 사용하기 (접속 테스트 및 파일 구조)

by 박채니 2022. 6. 20.

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.


 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/common/header.jsp" %>
<h2 align="center" style="margin-top:200px;">안녕하세요, MVC입니다.</h2>	
<%@ include file="/WEB-INF/views/common/footer.jsp" %>

src/main/webapp/WEB-INF/views/common/header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello MVC</title>
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/style.css" />
</head>
<body>
	<div id="container">
		<header>
			<h1>Hello MVC</h1>
		</header>
		
		<section id="content">

src/main/webapp/WEB-INF/views/common/footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
		</section>

		<footer>
			<p>&lt;Copyright 1998-2021 <strong>코린이의 코딩 학습기</strong>. All rights reserved.&gt;</p>
		</footer>
	</div>
</body>
</html>

src/main/webapp/css/style.css

@CHARSET "UTF-8";
div, section, header, aside, footer {padding:10px;}

/********** 전체컨테이너 **********/
div#container	{background-color:#F0F0F0; width:960px; margin:0 auto;}

/********** header **********/
header			{background: #00bcd4 url('/mvc/images/Java-Servlets-JSP.png') 21% 5%/18% no-repeat; height:130px; position:relative; padding:10px 0 0 0;}
header h1 		{margin-left:10px;}

/* 로그인컨테이너 */
header div.login-container{width:250px; position:absolute; right: 0px; top: 10px;}

/* 로그인테이블관련 : 탭순서를 고려한 배치 */
#loginFrm table{empty-cells:hide;}
#loginFrm input[type=submit]{width:60px; height:50px; color:white; background:#3300ff; position:absolute; top:14px;}
#loginFrm input[type=button]{border-radius:3px;}
#saveId+label{font-size:12px;font-family:'고딕'}

/* 로그인성공후 */
div.login-container table#logged-in{border-spacing:10px;}
div.login-container table#logged-in input[type=button]{border-radius:3px;}

/* 메뉴관련스타일 */
header nav {background:#5283de; width:100%; margin-top:40px;}
/* ul태그의 가운데정렬 */
ul.main-nav{
	display:table;
	padding:0px;
	margin:auto;
}
ul.main-nav li { 
	list-style-type: none; 
	width: 8em; 
	height: 2em;
	float: left; 
	text-align: center; 
	font-family: "휴먼모음T", sans-serif; 
	border-left: 1px #00bcd4 solid;
	background-color: #5283de; 
	/* 메뉴밑줄트랜지션용 */
	position:relative;	
}
ul.main-nav li:last-of-type{border-right:1px #00bcd4 solid;}
ul.main-nav li a {
    /*a태그의 display기본값은 inline임*/
    /* inline요소의 padding, margin은 제대로 동작하지 않음.(컨텐츠의 시각요소기준으로 제멋대로임	) */
	display: block;
	padding:.4em;
	text-decoration: none;
	color: #292929;
}
/* hover시 배경색 변경 */
ul.main-nav li:hover{
	background-color: #3300ff;
}
ul.main-nav li:hover > a{
	color:#FFF; /* 글자색*/
}
/* 메뉴밑줄효과 */
ul.main-nav li span.animate_line{
	position: absolute;
	/* position:absolute;=> display:block;으로 되면서, 너비, 높이를 가진다. */
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: #FCE72E;
    -webkit-transition: .2s;
    transition: .2s;
}
ul.main-nav li:hover span.animate_line{
	width:100%;
}


/********** content **********/
section#content		{background-color:#F5F5F5; float:left; width:940px; min-height:500px; }

/* 회원가입페이지 */
section#enroll-container {text-align:center;}
section#enroll-container input{margin:3px;}
section#enroll-container table{margin:0 auto;}
section#enroll-container table th {padding:0 10px; text-align:right;}
section#enroll-container table td {padding:0 10px; text-align:left;}
section#enroll-container sup{color: red;}

/* 회원정보보기 */
section#enroll-container input[readonly]{background:lightgray;}



/********** footer **********/
footer				{ background-color:#00bcd4; clear:both; height:75px; text-align:center;padding-top:40px;}

src/main/webapp/js/jquery-3.6.0.js

jQuery 파일!

 

sql/hello-mvc2.sql

--======================================
-- 관리자 계정
--======================================
-- web2 계정 생성
alter session set "_oracle_script" = true;  -- c##, C##로 시작하지 않는 일반 계정 허용

create user web2
IDENTIFIED by 비밀번호
default tablespace users;

alter user web2 quota unlimited on users;

grant connect, resource, create view to web2;

--======================================
-- WEB2 계정
--======================================
-- member 테이블 생성
create table member (
    member_id varchar2(15),
    password varchar2(300) not null,
    member_name varchar2(50) not null,
    member_role char(1) default 'U' not null,
    gender char(1),
    birthday date,
    email varchar2(200),
    phone char(11) not null,
    hobby varchar2(200),
    point number default 1000,
    enroll_date date default sysdate,
    constraint pk_member_id primary key (member_id),
    constraint ck_member_role check(member_role in ('U', 'A')),
    constraint ck_member_gender check (gender in ('M', 'F')),
    constraint uq_member_email unique(email)
);

--회원 추가
insert into member
values (
    'honggd', '1234', '홍길동', 'U', 'M', to_date('20000909','yyyymmdd'),
    'honggd@naver.com', '01012341234', '운동,등산,독서', default, default
);

insert into member
values (
    'qwerty', '1234', '쿠어티', 'U', 'F', to_date('19900215','yyyymmdd'),
    'qwerty@naver.com', '01012341234', '운동,등산', default, default
);

insert into member
values (
    'admin', '1234', '관리자', 'A', 'M', to_date('19801010','yyyymmdd'),
    'admin@naver.com', '01056785678', '게임,독서', default, default
);


select * from member;
commit;

src/main/webapp/WEB-INF/lib/ojdbc8.jar

ojdbc8.jar (외부 라이브러리) 파일을 위치시켜야 하는데, 이는 WEB-INF/lib 폴더 하위에 위치하게 합니다.(바로 참조 가능!)새로고침을 하면 바로 Web App Libraries가 생성되고 해당 파일을 확인할 수 있습니다.


위처럼 파일 세팅이 끝났다면, jdbc 테스트를 해보도록 하겠습니다.

 

@WebServlet("/jdbc/test")
public class JdbcTestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/plain; charset=utf-8");
            response.getWriter().append("Database 연결 테스트 - 서버 콘솔을 확인하세요.");
		
		try {
			testDatabaseConnection();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private void testDatabaseConnection() throws ClassNotFoundException, SQLException {
		String driverClass = "oracle.jdbc.OracleDriver";
		String url = "jdbc:oracle:thin:@localhost:1521:xe";
		String user = "web2";
		String password = "비밀번호";
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		String sql = "select * from member";
		
		// 1. DriverClass 등록
		Class.forName(driverClass);
		System.out.println("> Driver Class 등록 성공!");
		
		// 2. Connection 객체 생성
		conn = DriverManager.getConnection(url, user, password);
		System.out.println("> Connection 객체 생성 성공!");
		
		// 3. PreparedStatement 객체 생성 & 미완성 쿼리 값 대입
		pstmt = conn.prepareStatement(sql);
		System.out.println("> preparedStatment 객체 생성 성공!");
		
		// 4. 쿼리 실행 & ResultSet 반환
		// DQL pstmt.executeQuery:ResultSet
		// DML pstmt.executeUpdate:int
		rset = pstmt.executeQuery();
		System.out.println("> 쿼리 실행 및 ResultSet 반환 성공!");
		
		// 5. ResultSet 처리
		while(rset.next()) {
			String memberId = rset.getString("member_id");
			String memberName = rset.getString("member_name");
			Date birthday = rset.getDate("birthday");
			int point = rset.getInt("point");
			
			System.out.printf("%s\t%s\t%s\t%s\n", memberId, memberName, birthday, point);
		}
		
		// 6. 사용한 자원 반납
		rset.close();
		pstmt.close();
		conn.close();
		System.out.println("> 자원 반납 성공!");
	}
}

@콘솔출력값
> Driver Class 등록 성공!
> Connection 객체 생성 성공!
> preparedStatment 객체 생성 성공!
> 쿼리 실행 및 ResultSet 반환 성공!
honggd	홍길동	2000-09-09	1000
qwerty	쿠어티	1990-02-15	1000
admin	관리자	1980-10-10	1000
> 자원 반납 성공!

DB쪽에 있는 데이터를 잘 가져오는 것을 확인할 수 있습니다.