이번 폴더구조는 다음과 같다.
이미지 파일 첨부
images.zip이번에는 JSP 프로젝트에 JDBC 기능을 사용한다.
WEB-INF 폴더 아래에 lib 폴더를 만들고
ojdbc6.jar을 복사하자.(JDBC 할 때 build Path 추가와 같은 작업)
이 파일은 jdbc를 공부할 때 어디있는지 한번 설명을 했었다. (https://qdgbjsdnb.tistory.com/196?category=726465)
위의 글 설명 그대로
sql을 사용하기 위한 Library 파일을 불러온다.
계속 사용했던 oracle에 설치 폴더에 있는 파일을 불러온다.
경로는 설치 경로 + oraclexe/app/oracle/product/11.2.0/server/jdbc/lib 에 ojdbc6이라는 파일이 존재한다.
출처: https://qdgbjsdnb.tistory.com/196?category=726465 [하위^^]
sql을 사용하기 위한 Library 파일을 불러온다.
계속 사용했던 oracle에 설치 폴더에 있는 파일을 불러온다.
경로는 설치 경로 + oraclexe/app/oracle/product/11.2.0/server/jdbc/lib 에 ojdbc6이라는 파일이 존재한다.
출처: https://qdgbjsdnb.tistory.com/196?category=726465 [하위^^]
sql을 사용하기 위한 Library 파일을 불러온다.
계속 사용했던 oracle에 설치 폴더에 있는 파일을 불러온다.
경로는 설치 경로 + oraclexe/app/oracle/product/11.2.0/server/jdbc/lib 에 ojdbc6이라는 파일이 존재한다.
출처: https://qdgbjsdnb.tistory.com/196?category=726465 [하위^^]으
sql을 사용하기 위한 Library 파일을 불러온다.
계속 사용했던 oracle에 설치 폴더에 있는 파일을 불러온다.
경로는 오라클 설치 경로 + oraclexe/app/oracle/product/11.2.0/server/jdbc/lib 에 ojdbc6이라는 파일이 존재한다.
파일을 찾아서 lib 폴더에 복사하면 된다.
01_testPerson.jsp는 선호도 조사로 선택한 항목, 입력 값 등을 통해서
해당하는 이미지를 출력한다.
또한 선택을 안했을 경우의 예외처리도 전부 JSP 파일에서 구현한다.
02_memberJoin.jsp는 JSP에서 데이터 베이스에 접근하여 새로운 정보를 추가하여 회원가입을 구현한다.
index.jsp
------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>MVC Model1</h1>
<p>jsp도 서블릿이다!</p>
<h3><a href="views/01_testPerson.jsp">선호도 조사</a></h3>
<h3><a href="views/02_memberJoin.jsp">회원가입</a></h3>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
01_testPerson.jsp, 01_testPersonResult.jsp
------------------------------------------------------------------------------------------------------------------------------------
01_testPerson.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>개인 취향 테스트(MVC)</h2>
당신의 취향을 테스트합니다.<br>
데이터 입력 후 확인 버튼을 누르세요
<form action="01_testPersonResult.jsp" name="personFrm" method="post">
<ul style="list-style: none; line-height: 200%;">
<li>이름은? <input type="text" name="name" size="10"></li>
<li> 좋아하는 색?
<input type="radio" name="color" id="color-red" value="빨강">
<label for="color-red">빨강</label>
<input type="radio" name="color" id="color-blue" value="파랑">
<label for="color-blue">파랑</label>
<input type="radio" name="color" id="color-yellow" value="노랑">
<label for="color-yellow">빨강</label>
</li>
<li>좋아하는 동물?
<select name="animal" id="animal">
<option value="강아지">강아지</option>
<option value="고양이">고양이</option>
<option value="금붕어">금붕어</option>
</select>
</li>
<li>좋아하는 음식?(모두 고르세요)
<input type="checkbox" name="food" id="food1" value="짜장면">
<label for="food1">짜장면</label>
<input type="checkbox" name="food" id="food2" value="짬뽕">
<label for="food2">짬뽕</label>
<input type="checkbox" name="food" id="food3" value="탕수육">
<label for="food3">탕수육</label>
<input type="checkbox" name="food" id="food4" value="양장피">
<label for="food4">양장피</label>
<input type="checkbox" name="food" id="food5" value="팔보채">
<label for="food5">팔보채</label>
</li>
<li>
<br>
<input type="submit" value="확인">
<input type="reset" value="취소">
</li>
</ul>
</form>
</body>
</html>
01_testPersonResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1.전달 파라미터 한글 처리
request.setCharacterEncoding("utf-8");
//2.전달된 파라미터 변수에 담기
String name = request.getParameter("name");
String color = request.getParameter("color");
String animal = request.getParameter("animal");
String[] foodArr = request.getParameterValues("food");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h2><span style="color: blue;"><%= name %></span>님의 개인 취향 테스트</h2>
</div>
<div id="color">
<span class="title">당신이 좋아하는 색깔은?</span>
</div>
<div id="animal">
<span class="title">당신이 좋아하는 동물은?</span>
</div>
<div id="food">
<span class="title">당신이 좋아하는 음식은?</span>
</div>
</div>
<script>
$(function(){
<%
if(color != null){
switch(color){
case "빨강" :
%>
$("#color").append("<img src='<%=request.getContextPath()%>/images/red.png'>");
<% break;
case "파랑" :
%>
$("#color").append("<img src='<%=request.getContextPath()%>/images/blue.png'>");
<% break;
case "노랑" :
%>
$("#color").append("<img src='<%=request.getContextPath()%>/images/blue.png'>");
<% break;
}
}else{
%>
$("#color").append("선택한 색깔이 없습니다 ㅜㅜ");
<%
}
%>
});
</script>
<script>
$(function(){
<%
switch(animal){
case "강아지" :
%>
$("#animal").append("<img src='<%=request.getContextPath()%>/images/dog.png'>");
<% break;
case "고양이" :
%>
$("#animal").append("<img src='<%=request.getContextPath()%>/images/cat.png'>");
<% break;
case "금붕어" :
%>
$("#animal").append("<img src='<%=request.getContextPath()%>/images/fish.png'>");
<% break;
}
%>
});
</script>
<script>
$(function(){
<%
try{
for(int i = 0; i < foodArr.length; i++){
switch(foodArr[i]){
case "짜장면" :
%>
$("#food").append("<img src='<%=request.getContextPath()%>/images/jjm.png'>");
<%
break;
case "짬뽕" :
%>
$("#food").append("<img src='<%=request.getContextPath()%>/images/jjbong.png'>");
<%
break;
case "탕수육" :
%>
$("#food").append("<img src='<%=request.getContextPath()%>/images/tangsy.png'>");
<%
break;
case "양장피" :
%>
$("#food").append("<img src='<%=request.getContextPath()%>/images/yang.png'>");
<%
break;
case "팔보채" :
%>
$("#food").append("<img src='<%=request.getContextPath()%>/images/palbc.png'>");
<%
break;
}
}
}catch(Exception e){
%>
$("#food").append("선택한 음식이 없습니다 ㅜㅜ");
<%
}
%>
});
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
02_memberJoin.jsp, 02_memberJoinResult.jsp
------------------------------------------------------------------------------------------------------------------------------------
02_memberJoin.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<h2>회원 가입 정보 입력</h2>
<br>
<form action="02_memberJoinResult.jsp" method="post">
<input type="text" placeholder="아이디" name="userId" id="userId">
<br>
<input type="password" placeholder="패스워드" name="password" id="password">
<br>
<input type="text" placeholder="이름" name="userName" id="userName">
<br>
<input type="text" placeholder="나이" name="age" id="age">
<br>
<input type="email" placeholder="이메일" name="email" id="email">
<br>
<input type="tel" placeholder="휴대폰" name="phone" id="phone">
<br>
<input type="text" placeholder="주소" name="address" id="address">
<br>
<label>성별 : </label>
<input type="radio" name="gender" id="male" value="M">
<label for="male">남</label>
<input type="radio" name="gender" id="female" value="F">
<label for="female">여</label>
<br>
<label>취미 : </label>
<input type="checkbox" name="hobby" id="hobby0" value="운동">
<label for="hobby0">운동</label>
<input type="checkbox" name="hobby" id="hobby1" value="등산">
<label for="hobby1">등산</label>
<input type="checkbox" name="hobby" id="hobby2" value="독서">
<label for="hobby2">독서</label>
<input type="checkbox" name="hobby" id="hobby3" value="게임">
<label for="hobby3">게임</label>
<input type="checkbox" name="hobby" id="hobby4" value="여행">
<label for="hobby4">여행</label>
<br><br>
<input type="submit" value="가입">
<input type="reset" value="취소">
</form>
</div>
</body>
</html>
02_memberJoinResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*"%>
<%
//1.한글 인코딩 처리
request.setCharacterEncoding("utf-8");
//2.전송값 꺼내서 변수에 기록
String userId = request.getParameter("userId");
String password = request.getParameter("password");
String userName = request.getParameter("userName");
int age = Integer.parseInt(request.getParameter("age"));
String gender = request.getParameter("gender");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
String address = request.getParameter("address");
String[] hobbies = request.getParameterValues("hobby");
//String[]을 구분자로 연결하는 String의 스태틱메소드 join
String hobby = String.join(",", hobbies);
//3.비즈니스로직 작성
Connection conn = null;
PreparedStatement pstmt = null;
int result = 0;
String msg = "";
String query = "INSERT INTO MEMBER VALUES(?,?,?,?,?,?,?,?,?,SYSDATE)";
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "jsp", "jsp");
pstmt = conn.prepareStatement(query);
pstmt.setString(1, userId);
pstmt.setString(2, password);
pstmt.setString(3, userName);
pstmt.setString(4, gender);
pstmt.setInt(5, age);
pstmt.setString(6, email);
pstmt.setString(7, phone);
pstmt.setString(8, address);
pstmt.setString(9, hobby);
result = pstmt.executeUpdate();
if(result > 0){
conn.commit();
msg = "성공적으로 회원 가입 되었습니다.";
}else{
conn.rollback();
msg = "회원 가입에 실패했습니다.";
}
}catch(Exception e){
e.printStackTrace();
}finally {
try{
pstmt.close();
conn.close();
}catch(Exception e){
e.printStackTrace();
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul style="list-style: none; line-height: 200%">
<li>아이디 : <%= userId %></li>
<li>패스워드 : <%= password %></li>
<li>이름 : <%= userName %></li>
<li>나이 : <%= age %></li>
<li>이메일 : <%= email %></li>
<li>성별
<span id="gender" style="font-weight: bold;
color: <%
String genderColor = "";
if("M".equals(gender)){
genderColor = "blue";
}else{
genderColor = "red";
}
%><%=genderColor%>"><%=gender %></span>
</li>
<li>휴대폰 : <%= phone %></li>
<li>주소 : <%= address %></li>
<li>취미 : <%= hobby %></li>
</ul>
<hr>
<p><%= msg %></p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
주목해야 할 점은 html문 중간중간에 <%%>를 사용하여 연산된 데이터를 표현하는 것
또한 Jquery 문에도 조건문과 섞어서 사용하는 방법을 주목하자.
'JDBC, Servlet, JSP, Ajax, Json, Gson > 02.Servlet, JSP 사용법' 카테고리의 다른 글
| [Servlet, JSP]02-12 Servlet, JSP 예 6 MVC2, Session 사용 (0) | 2018.12.10 |
|---|---|
| [Servlet, JSP]02-11. MVC 패턴 1, 2 (0) | 2018.12.10 |
| [Servlet, JSP]02-09. Servlet, JSP 예 4 (임의 에러페이지, 날짜 함수, jsp include, 연산처리 방법) (0) | 2018.12.07 |
| [Servlet, JSP]02-07.Tomcat이 페이지의 default 값 파일이 저장되어 있는 위치, java 파일이 서버에 적용되는 원리 (0) | 2018.12.07 |
| [Servlet, JSP]02-08. Servlet, JSP 예 3 (0) | 2018.12.07 |
