[jsp] 15. 웹사이트 제작법1_뼈대제작 (feat. JSP)

include 지시어 VS include 액션태그

- include 지시어 :
<%@include file="a.jspf" %>
JSP 문서에 외부파일의 코드(소스)를 포함 => 반복되는 공통 코드 뺄 수 있음
b.jsp 변경 시 요청 JSP 문서(a.jsp)에 대한 [재해석 불필요]

- include 액션태그 :
<jsp:include page="b.jsp"/> : 스레드가 b.jsp로 이동하여 명령들을 실행 후 실행결과물만 가지고 옴
스레드를 다른 JSP 문서로 이동하여  실행된 결과(웹문서)를 제공받아 태그를 사용한 위치에 포함
실행결과물만 가지고 원래 파일로 이동
표현식에서 사용된 변수값에 따라 서로 다른 JSP 문서의 응답결과를 가져옴(동적포함)
b.jsp 변경 시 요청 JSP 문서(a.jsp)에 대한 [재해석 필요]

01. 뼈대제작

1) JDBC이용을 위한 default 설정

• 접속하는 서버나, 사용자 이름이 다르면 변경하고, 나머지는 다 똑같이 설정하면 됨
• 세미프로젝트에 접속하는 서버는 강사님 서버 이용할 것이니 변경해서 사용하자

 

ojdbc11.jar

• 빌드 처리 확인 후 사용하기

 

 

 

JNDI 기술을 사용하기 위해 context.xml 생성

<!-- WAS 프로그램 객체 생성 관련 정보를 제공하기 위한 파일 -->
<!-- WAS 프로그램 실행 시 자동으로 파일을 읽어 필요한 정보를 저장함 -->
<?xml version="1.0" encoding="UTF-8"?>
<Context>
	<!--[url] [username] [password] 변경 후 사용 -->
	<Resource name="jdbc/oracle" auth="Container" type="javax.sql.DataSource"
	factory="org.apache.tomcat.dbcp.dbcp2.BasicDataSourceFactory"
	driverClassName="oracle.jdbc.driver.OracleDriver"
	url="jdbc:oracle:thin:@localhost:1521:xe" username="scott" password="tiger"
	initialSize="10" maxIdle="10" maxTotal="15"/>
</Context>

 

 

 

JNDI 기술을 사용하기 위해 jdbcDAO.java 생성

package xyz.itwill.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

//JDBC 기능을 제공하는 DAO 클래스가 상속받기 위해 작성된 부모 클래스
// => 객체 생성이 목적이 아닌 상속으로 목적으로 작성된 클래스 - 추상클래스로 작성하는 것을 권장
// => 1. WAS 프로그램에 등록된 자원을 얻어와 DataSource 객체를 반환받아 저장 - 정적영역을 이용해 1번만 실행
// => 2. DataSource 객체로부터 Connection 객체를 제공받아 반환하는 메소드
// => 3. 매개변수로 JDBC 관련 객체를 제공받아 제거하는 메소드

public abstract class JdbcDAO {

	**//1.**
	//WAS 프로그램에 등록된 자원을 얻어와 DataSource 객체를 반환받아 저장 - 정적영역을 이용해 1번만 실행
	private static DataSource dataSource; //Connection이 미리 10개 생성됨

	static { //메모리가 로딩되면 자동으로 아래의 명령 실행되어 객체 만들어짐
		try {
			dataSource = (DataSource)new InitialContext().lookup("java:comp/env/jdbc/oracle");
		}catch (NamingException e) {
			e.printStackTrace();
		}
	}

	**//2.**
	//DataSource 객체로부터 Connection 객체를 제공받아 반환하
	public Connection getConnection() throws SQLException {
		return dataSource.getConnection();
	}

	**//3.**
	//매개변수로 JDBC 관련 객체를 제공받아 제거하는 메소드
	public void close(Connection con) {
		try {
			if(con!=null) con.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	public void close(Connection con, PreparedStatement pstmt) {
		try {
			if(con!=null) con.close();
			if(pstmt!=null) pstmt.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	public void close(Connection con, PreparedStatement pstmt, ResultSet rs) {
		try {
			if(con!=null) con.close();
			if(pstmt!=null) pstmt.close();
			if(rs!=null) rs.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

 

2) include 액션태그를 이용한 템플릿 페이지로 웹사이트 구축

• index.jsp란? 클라이언트가 서버에 접속 하지 않아도 아래의 이름은 기본적으로 요청이 들어감

 

• Header의 로그인 버튼은?
  • 장바구니나 구매내역 클릭 후 Header의 로그인을 클릭해서 로그인하면 >>
  • 세션에 저정된 returnUrl 값에 따라 로그인 성공 시 장바구니나 구매내역으로 가기때문에
  • 세션에 저정된 returnUrl 값을 삭제하여 메인페이지로만 이동할 수 있도록 구현할 것임
  • 즉, Header의 로그인을 클릭할 경우는 로그인 성공 시 항상 메인페이지로만 이동할 것

 

 

 

관리자로 가는 방법

1. index.jsp 요청 (메인페이지)

2. index.jsp?workgroup=member&work=member_login&login=1 요청 (로그인하기)

3. 관리자로 로그인완료 => index.jsp?workgroup=admin&work=main_page 요청 (관리자 메인페이지)

=> workgroup 이 admin이면? admin > header.jsp로 변경됨

 

02. 메인페이지

1) index.jsp

• jsp/index.jsp
• jsp/index.jsp?workgroup=main&work=main_page

• 모든 요청과 응답은 index.jsp 이 모두 다 할 수 있도록 만듦 (템플릿페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 클라이언트의 모든 요청에 대한 응답 결과를 제공하는 템플릿 페이지를 구현한 JSP 문서 --%>    
//<%-- => Content 영역에는 클라이언트 요청에 대한 JSP 문서의 결과(HTML)를 동적으로 포함 --%>    
<%
/*
	//include 액션태그에 의해 스레드가 이동된 JSP 문서에서 request 객체의 캐릭터셋 변경 불가능하기 때문에
	//요청 JSP문서(index.jsp - 템플릿페이지)에서 request 객체의 캐릭터셋 변경하여 사용할 것임
	request.setCharacterEncoding("utf-8");

	String workgroup=request.getParameter("workgroup");
	if(workgroup==null) workgroup="main";
	String work=request.getParameter("work");
	if(work==null) work="main_page";
	
	//🧡headerPath
	String headerPath="header.jsp";
	if(workgroup.equals("admin")) {//관리자 관련 페이지를 요청한 경우
		headerPath="admin/header.jsp";
	}	
	//🖤contentPath
	String contentPath=workgroup+"/"+work+".jsp";
*/

	request.setCharacterEncoding("utf-8");
	String workgroup = request.getParameter("workgroup") == "" || request.getParameter("workgroup") == null ? "main" : request.getParameter("workgroup");
	String work = request.getParameter("work") == "" || request.getParameter("work") == null ? "main_page" : request.getParameter("work");
	String headerPath = workgroup.equals("admin") ? "admin/header.jsp" : "main/header.jsp";
	String contentPath=workgroup+"/"+work+".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>JSP</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body> 
//	<!-- 🧡Header 영역 : 회사로고,메뉴 등 -->
	<div id="header">
//		<!-- <jsp:include page="header.jsp"/> -->
		<jsp:include page="<%=headerPath %>"/>
	</div>
	
//	<!-- 🖤Content 영역 : 요청에 대한 결과 출력 -->
	<div id="content">
		<jsp:include page="<%=contentPath %>"/>		
	</div>
	
//	<!-- 💛Footer 영역 : 저작권,약관,개인정보 보호정책,회사주소등 -->
	<div id="footer">
		<jsp:include page="footer.jsp"/>
	</div>
</body>
</html>

 

css/style.css

@charset "UTF-8";
@import url(<http://fonts.googleapis.com/earlyaccess/nanumgothic.css>);

body {margin: 0 auto;	width: 95%;	font-family: Nanum Gothic;	}
#header {margin: 5px;height: 150px;border: 1px solid black;}
#logo {text-align: center;	font-size: 2.5em;letter-spacing: 30px;margin-bottom: 25px;}
a, a:visited {text-decoration: none;color: black;	}
#profile {margin-top: 5px;text-align: right;}
#header h1 {text-align: center;}
#menu {font-size: 1.2em;text-align: center;word-spacing: 100px;letter-spacing: 10px;font-weight: bold;}
#menu a:hover {color: orange;} 
#content {margin: 5px;padding: 10px;min-height: 600px;border: 1px solid black;text-align: center;}
#footer {margin: 5px;height: 50px;border: 1px solid black;text-align: center;}

2) header.jsp - header영역

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//🔥🔥🔥세션에 저장된 권한 관련 정보를 반환받아 저장
	MemberDTO loginMember = (MemberDTO)session.getAttribute("loginMember");
%>
<div id="profile">
//	<%-- 비로그인 사용자인 경우 --%>
	<% if(loginMember==null){ %>
//	<%-- 쿼리스트링으로 login=1 값 전달할 수 있도록 변경 -%>
	<a href="index.jsp?workgroup=member&work=member_login&login=1">로그인</a>&nbsp;&nbsp;
	<a href="index.jsp?workgroup=member&work=member_join">회원가입</a>&nbsp;&nbsp;
//	<%-- 로그인 사용자인 경우 --%>
	<% } else { %>
		<%=loginMember.getName() %>님, 환영합니다.&nbsp;&nbsp;
		<a href="index.jsp?workgroup=member&work=member_logout_action">로그아웃</a>&nbsp;&nbsp;
		<a href="index.jsp?workgroup=member&work=member_mypage">내정보</a>&nbsp;&nbsp;

		<% if(loginMember.getStatus()==9){ %> //로그인 사용자가 관리자인 경우
			<a href="index.jsp?workgroup=admin&work=main_page">관리자</a>&nbsp;&nbsp;
		<%} %>
	<%} %>
</div>
<div id="logo"><a href="index.jsp">쇼핑몰</a></div>
<div id="menu">
	<a href="index.jsp?workgroup=product&work=product_list">제품소개</a>
	<a href="index.jsp?workgroup=cart&work=cart_list">장바구니</a>
	<a href="index.jsp?workgroup=order&work=order_list">구매내역</a>
	<a href="index.jsp?workgroup=board&work=board_list">게시판</a>
</div>

비로그인 사용자인 경우

로그인 사용자인 경우

2) admin > header.jsp - header영역

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 관리자 관련 페이지를 요청한 경우 템플릿 페이지의 머릿부에 포함될 JSP 문서 --%>    

/*
<%--
	//세션에 저장된 권한 관련 정보를 반환받아 저장
	MemberDTO loginMember=(MemberDTO)session.getAttribute("loginMember");

	//비로그인 사용자이거나 관리자가 아닌 경우 에러페이지로 이동되도록 응답 처리 - 비정상적인 요청
	if(loginMember==null || loginMember.getStatus()!=9) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;		
	}
--%> 
*/

<%@include file="/security/admin_check.jspf" %>
<div id="profile">
	관리자[<%=loginMember.getName() %>]님, 환영합니다.&nbsp;&nbsp;
	<a href="index.jsp?workgroup=member&work=member_logout_action">로그아웃</a>&nbsp;&nbsp;
	<a href="index.jsp?workgroup=main&work=main_page">쇼핑몰</a>&nbsp;&nbsp;
</div>
<div id="logo"><a href="index.jsp?workgroup=admin&work=main_page">쇼핑몰관리</a></div>
<div id="menu">
	<a href="index.jsp?workgroup=admin&work=member_manager">회원관리</a>
	<a href="index.jsp?workgroup=admin&work=product_manager">제품관리</a>
	<a href="index.jsp?workgroup=admin&work=order_manager">주문관리</a>
	<a href="index.jsp?workgroup=admin&work=board_manager">게시글관리</a>
</div>

관리자인 경우

 

3) footer.jsp - footer영역

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<p>Copyright © itwill Corp. All rights reserved.</p>

 

 

 

 

 

03. 콘텐츠 영역

1) [메인 페이지] main > main_page.jsp

• jsp/index.jsp?workgroup=main&work=main_page

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>제품 목록</h1>

2) [제품목록 페이지] product > product_list.jsp

• jsp/index.jsp?workgroup=product&work=product_list

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>제품 목록</h1>

3) [장바구니목록 페이지] cart > cart_list.jsp

• jsp/index.jsp?workgroup=cart&work=cart_list

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>장바구니 목록</h1>

4) [구매내역목록 페이지] order > order_list.jsp

• jsp/index.jsp?workgroup=order&work=order_list

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>구매내역 목록</h1>

 

5) [게시판목록 페이지] board > board_list.jsp

• jsp/index.jsp?workgroup=board&work=board_list

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>게시판 목록</h1>

 

6) [회원가입 페이지] member > member_login.jsp

• jsp/index.jsp?workgroup=member&work=member_login

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>회원가입 페이지</h1>

7) [로그인 페이지] member > member_join.jsp

• jsp/index.jsp?workgroup=member&work=member_login

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>로그인 페이지</h1>

 

8) [관리자 페이지] admin > main_page.jsp

• jsp/index.jsp?workgroup=admin&work=main_page
• @include(include 지시어) 사용하도록 수정할 것 - JSP 문서에 외부파일의 코드(소스)를 포함하도록 하는 지시어

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>관리자</h1>

 

 

 

 

 

 

04. 🔒관리자 인지 아닌지 체크 (관리자페이지 공통코드)

1) security > admin_check.jspf

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	//세션에 저장된 권한 관련 정보를 반환받아 저장
	MemberDTO loginMember=(MemberDTO)session.getAttribute("loginMember");

	//비로그인 사용자이거나 관리자가 아닌 경우 에러페이지로 이동되도록 응답 처리 - 비정상적인 요청
	if(loginMember==null || loginMember.getStatus()!=9) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
%>

05. 🔒관리자 콘텐츠영역 <%@include file="/security/admin_check.jspf" %>   

1) [관리자 페이지] admin > main_page.jsp

• jsp/index.jsp?workgroup=admin&work=main_page

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/security/admin_check.jspf" %>   
<h1>관리자 페이지</h1>

2) [회원관리 페이지] admin > member_manager.jsp

• jsp/index.jsp?workgroup=admin&work=member_manager

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/security/admin_check.jspf" %>
<h1>회원관리</h1>

3) [제품관리 페이지] admin > product_manager.jsp

• jsp/index.jsp?workgroup=admin&work=product_manager

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/security/admin_check.jspf" %>
<h1>제품관리</h1>

4) [주문관리 페이지] admin > order_manager.jsp

• jsp/index.jsp?workgroup=admin&work=order_manager

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/security/admin_check.jspf" %>
<h1>주문관리</h1>

5) [게시글관리 페이지] admin > board_manager.jsp

• jsp/index.jsp?workgroup=admin&work=board_manager

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/security/admin_check.jspf" %>
<h1>게시글관리</h1>

 

 

 

 

 

 

 

 

 

06. 이클립스에서 웹프로그램 배포법

war 파일 명 : 배포되는 파일의 ContextRoot가 될 것임