배워가는 페이지

26일

Step1 [개발환경 구성]

- maven 프로젝트 구성 방법

- 프로젝트 생성 방법

- 프로젝트 내용 변경방법

- 인코딩 -> utf-8로 서버.xml 설정 Connector를 찾아 URI

- 자바 버전 -> 빌드경로, 컴파일러등.

- facets -> org.eclipse.wst.common.project.facet.core.xml

- pom.xml에서 기본설정

- 웹 설정에 맞는 기본적인 라이브러리 구성

- 폴더 구조 설명.

- 톰켓 연결

- UTF-8 설정

- 루트변경

- index.jsp 화면 확인

- maven build

- 빌드 과정과 폴더 구조 설명

Step3 [로그설정과 인터셉터의 이해]

- logback.xml 파일 구성

- 서버 생성

- 로그 안나옴.

- pom.xml에 로그관련 라이브러리 추가

- 서버 재기동

- 로그 출력 확인

- HelloController.java에 로그 관련 코딩 추가

- 내용 확인.

- controllerContext.xml에 인터셉터 관련 내용 추가

- BaseInterceptor.java, WebInterceptor.java 생성

- preHandle, postHandle 차이 설명

- 브라우저에서 기동 및 로그 확인.

- 설명 내용 확인

27일

Step4 [WebExceoptionResolver]

WebExceoptionResolver

지시사항

코드는 작동 순서에 따라 정렬하는 것을 원칙

불필요한 변수 정의보다 받아온 값을 그대로 반환(return)

Step5 [DB연결]

트랜잭션 AOP

Log4j.jdbc 주석기능

28일

Step6-8

Bad리퀘스트익셉션

AOP Aspects

Base 부모상속관계

Mode파라미터에 따른 Create / Update 수행

29일

30일

[Servlet] 1주차 설문지 서블릿

[Servlet/JavaScript] 설문지 20-21일

22일 목요일

데이터 가공 서블릿에 대한 이해를 기반으로 퍼블리싱 작업을 진행합니다.

이후 설문지와 응답이 입력될 데이터베이스를 계획합니다.

목표 - 퍼블리셔를 통해 전달받은 html과 css를 적용하기, DB 세팅하고 table 계획하기

결과물 예시

1. 디자인된 입력전/후 html페이지와 CSS 자료를 전달받아 가능한 원본 양식을 유지합니다.

페이지를 갱신해도 상관없지만 이번에는 jQuery를 이용하여 Ajax통신을 요청했습니다.

1-2. 입력전 html내용을 jsp로 옮기고 결과부분은 동적요소로 갱신했습니다.

<div class="title"><h1>과제 1 : 서블릿을 활용한 웹페이지 구현</h1></div>

<div class="ex01">
	<form class="form">
		<div><span class="f_bold">1. 설문 문항 갯수(surveyCnt) 설정 :</span> 
			<input type="text" class="tc w50"> (1자리 숫자만 입력) <span id="nSpan"></span><br>
		<button type="button" class="b_style gray w_full mgt5" id="btn_form01" rel="listBox2">설문 폼 생성</button></div>

		<div><span class="f_bold">2. 설문 문항 입력 리스트</span>(특수문자를 제외한 입력, 100자 제한) <span id="qSpan"></span>
			<div class="sv_list_wrap" id="listBox2">
				<!-- 
				<dl class="q_list mgt5">
					<dt><span class="s_style01">질문 1</span></dt>
					<dd><input type="text" class="w_full"></dd>
				</dl>
				 -->
				<button type="button" class="btn_po1 b_style gray w_full" id="btn_form02" rel="listBox3">설문 생성</button>
			</div>
		</div>

		<div><span class="f_bold">3. 설문지 리스트 및 답안 작성 리스트</span> (특수문자를 제외한 입력, 100자 제한) <span id="aSpan"></span>
			<div class="sv_list_wrap" id="listBox3">
				<!-- 
				<dl class="q_list mgt5">
					<dt><span class="s_style01">질문 1</span></dt>
					<dd>우리회사의 출근시간은 언제일까요?</dd>
				</dl>
				<dl class="q_list">
					<dt><span class="s_style01 light">답안</span></dt>
					<dd><input type="text" class="w_full"></dd>
				</dl>
				 -->
				<button type="button" class="btn_po1 b_style green w_full" id="btn_form03" rel="listBox4">답안 작성 완료 및 제출</button>
			</div>
		</div>
		
		<div><span class="f_bold">4. 설문지 평가 리스트</span>
			<div class="sv_list_wrap" id="listBox4">
				<!-- 
					<div class="q_list_box">
						<dl class="q_list mgt5">
							<dt><span class="s_style01">질문 1</span></dt>
							<dd><span>우리회사의 출근시간은 언제일까요?</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 light">답안</span></dt>
							<dd><span>모릅니다.</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 green">평가(1)</span></dt>
							<dd><span>설문이 답안보다 <14>글자 많습니다.</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 green">평가(2)</span></dt>
							<dd><span>당신은 지루하셨군요.</span></dd>
						</dl>
					</div>
				-->
			</div>
		</div>
	</form>
</div>

jQuery를 통해 코드를 줄이고 개발시의 가독성 또한 좋아졌습니다.

2. Ajax요청으로 HttpServletRequest객체에 전달된 파라미터를 읽어와 (getParameterValues)

이전 데이터를 유지하고 다음 스텝을 위해 데이터를 가공합니다. (JSON)

//2.질문입력
if(uri.equals("/kkk3206/ex1_q")) {
	System.out.println("{}"+request.getParameter("question"));
	
	JsonArray sorted = new JsonArray();					//gson 라이브러리 사용
	for (String str : sort(request.getParameterValues("question"))) {	//선택정렬 함수 호출
		sorted.add(str);						//정렬된 질문목록 jsonArray로
	}
	
	System.out.println("jsontArray sorted"+sorted.toString());
	JsonObject jsonObject = new JsonObject();				//전송할 json오브젝트 생성
	jsonObject.add("QuestionSort", sorted);
	out.print(jsonObject);							//디스패처 대신 json 출력
	out.flush();
}

2-2. html페이지는 그대로 유지되므로 처리데이터만을 반환합니다.

HttpServletResponse객체의 PrintWriter out에 Gson라이브러리를 사용해 JSON 형식의 데이터를 반환합니다.

	if(uri.equals("/kkk3206/ex1_q")) {
		System.out.println("{}"+request.getParameter("question"));
		
		JsonArray sorted = new JsonArray();					//gson 라이브러리 사용
		for (String str : sort(request.getParameterValues("question"))) {	//선택정렬 함수 호출
			sorted.add(str);					//정렬된 질문목록 jsonArray로
		}
		
		//********************************DB연동************************************
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/testdb?autoReconnect=true&useSSL=false" , "root", "passward");
            stmt = conn.createStatement();
            
            String tb_survey_master = "tb_survey_master";	//마스터테이블명
            String tb_survey_conts = "tb_survey_conts";		//설문테이블명
            
            //마스터테이블 입력
            insertMaster(tb_survey_master, "첫번째설문지");
            for (int i=0;i<request.getParameterValues("question").length;i++) {
            	String survey_que = request.getParameterValues("question")[i];
            	String survey_qno = String.valueOf(i+1);			//1부터 채번
            	String survey_sortno = "0";					//정렬한뒤의 인덱스
            	for(int j=0;j<sorted.size();j++) {
            		if(sorted.get(j).getAsString().equals(survey_que)) {	//정렬된 질문목록과 비교하여 같을때 해당 인덱스 저장
            			survey_sortno = String.valueOf(j+1);
            		}
            	}
            	//설문지테이블 입력
            	insertSurvey(tb_survey_master, tb_survey_conts, survey_qno, survey_sortno, survey_que);
			}
        } catch (SQLException se1) {
            se1.printStackTrace();
        } catch (Exception ex) {
            ex.printStackTrace();
        } finally {
	            try {if (stmt != null)stmt.close();} catch (SQLException se2) {}
	            try {if (conn != null)conn.close();} catch (SQLException se) {se.printStackTrace();}
	        }    
	      //**********************************DB종료***********************************
		
		System.out.println("jsontArray sorted"+sorted.toString());
		JsonObject jsonObject = new JsonObject();		//전송할 json오브젝트 생성
		jsonObject.add("QuestionSort", sorted);
		out.print(jsonObject);					//디스패처 대신 json 출력
		out.flush();
	}

[Servlet] 1주차 설문지 서블릿

20일 화요일

1주차에는 별다른 세팅을 하지 않고 dynamic web project로만 진행합니다.

라이브러리는 직접 추가해도 되지만 maven으로 등록했습니다.

목표 - Ajax를 사용하지 않고 Servlet만을 통한 서버 통신원리를 이해

결과물 예시

1.각 문항은 Step단위로 페이지가 갱신되며

이전문항의 입력값<ipnut>은 문자<span>로 유지되어야합니다.

1-2. 자바스크립트에서 정규식을 거쳐 입력값을 제한합니다.

1-3. 입력받은 설문수만큼 두번째 문항에 입력폼을 생성하는 자바스크립트를 구성합니다.

<div class="container">

    
<h1>설문지</h1>
1.설문 문항 수를 입력해주세요.(JS)
<form id="nForm" action="/Survey/Survey" method="post">
	<input id="num" type="text" name="num" value="${param.num}">
	<input type="submit" value="설문 폼 생성">
</form>
<span id="nSpan"></span>

  
<br><br>2.설문내용을 입력해주시기 바랍니다.(Servlet/JSP)
	<c:set var="num" value="${param.num == null ? 0 : param.num}" scope="request" />
<form id="qForm" action="/Survey/Question" method="post">
	<input type="hidden" name="num" value="${param.num}">
	<c:choose>
	        <c:when test="${QuestionList ne null}">
			<c:forEach var="item" items="${QuestionList}" varStatus="status">
			   		<br>&nbsp ${status.count}번 질문 : ${item}
			</c:forEach>
               </c:when>
       <c:otherwise>
		<c:forEach var="q" begin="1" end="${num}" step="1">
				<br>&nbsp ${q}번 질문 : <input type="text" name="question">
		</c:forEach>
		<c:if test="${param.num ne null}">
			<input type="submit" value="설문 생성">
		</c:if>
       </c:otherwise>
	</c:choose>
</form>
<span id="qSpan"></span>


<br><br>3.설문에 대한 답을 입력하세요.(Servlet/JSP)
<form id="aForm" action="/Survey/Answer" method="post">
	<c:choose>
		<c:when test="${AnswerList ne null}">
			<c:forEach var="item" items="${QuestionSort}" varStatus="status">
			   	<br>&nbsp ${status.count}번 질문 : ${item}
			   	<br>&nbsp; &nbsp; &nbsp; &nbsp;답변 : ${AnswerList[status.index]}
			</c:forEach>
       </c:when>
       <c:otherwise>
		<input type="hidden" name="num" value="${param.num}">
		<c:forEach var="item" items="${QuestionSort}" varStatus="status">
		   	<br>&nbsp ${status.count}번 질문 : <label>${item}</label>
			<input id="${status.count}" type="hidden" name="question" value="${QuestionList[status.index]}">
			<br>&nbsp<input type="text" name="answer">
		</c:forEach>
		<c:if test="${QuestionList ne null && AnswerList eq null}">
			<br><input type="submit" value="답안 작성 완료 및 제출">
		</c:if>
       </c:otherwise>
	</c:choose>
</form>
<span id="aSpan"></span>


<br><br>4.평가
	<c:if test="${AnswerList ne null}">
		<c:forEach var="item" items="${AnswerList}" varStatus="status">
		   	<br>&nbsp ${status.count}번 질문 : <label id="q${status.index}">${QuestionSort[status.index]}</label>
		   	<br>&nbsp; &nbsp; &nbsp; &nbsp;답변 : <label id="a${status.index}">${item}</label>
		   	<br>&nbsp; &nbsp; &nbsp; &nbsp;평가1 : 
		   	
		   	<c:choose>
		   		<c:when test="${fn:length(QuestionSort[status.index]) > fn:length(item)}">
			  		설문이 답변보다 <${fn:length(QuestionSort[status.index]) - fn:length(item)}>글자 많습니다 
			   		<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 지루하셨군요
		   		</c:when>
		   		
		   		<c:when test="${fn:length(QuestionSort[status.index]) < fn:length(item)}">
		   			답안이 설문보다 <${fn:length(item) - fn:length(QuestionSort[status.index])}>글자 많습니다
			   		<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 현명하십니다
		   		</c:when>
		   			
       			        <c:otherwise>
		   			답안과 설문의 글자수가 일치합니다.
		   			<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 귀찮거나, 통하셨습니다
       			        </c:otherwise>
		   	</c:choose>
		</c:forEach>
	</c:if>
</div>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

jstl라이브러리의

for문을 사용하여 페이지가 요청될때 전달받은 데이터에 따라 설문 입력폼이 생성되었고

length()로 설문과 응답간의 글자수를 비교하여 평가를 다르게 표현

2.form태그의 sumit 버튼을 누르면 서블릿에서 입력데이터를 처리하도록 url를 매핑해줍니다.

서블릿을 매핑하기 위해서는 

2-2. 프로젝트를 우클릭 한 뒤 Java EE Tools > generate deployment descriptor stub를 클릭하면

WebContent / WEB-INF 에 web.xml이 생성됨 

<servlet>
	<servlet-name>Survey</servlet-name>
	<servlet-class>test.suHwan.SurveyServlet</servlet-class>
</servlet>    <!-- 서블릿을 정의하고 찾아갈 클래스를 등록한다 -->

<servlet-mapping>
	<servlet-name>Survey</servlet-name>
	<url-pattern>/Survey</url-pattern>
</servlet-mapping>
<!-- 서블릿을 요청할 URL을 등록한다. 필요에 따라 여러 주소를 매핑(urlPatterns) -->
<!-- 위 설정을 간소화 하기위해 서블릿 클래스의 선언부에 @WebServlet(urlPatterns={"/ex1","/ex1_q","/ex1_a"})를 사용합니다. -->

이클립스에서 새파일 > Servlet을 선택하면

doGet과 doPost가 정의된 기본적인 서블릿 클래스가 생성됩니다.

String uri에 request.getRequestURI()를 담아 요청된 uri를 분류하여 요청을 수행합니다.

3.HttpServletRequest객체에 전달된 파라미터를 읽어와 (getParameterValues)

이전 데이터를 유지하고 다음 스텝을 위해 데이터를 가공합니다. (setArribute)

private String[] sort(String[] sorted) {	//선택정렬 함수
		
		System.out.println("\nsort기능");		//글자수가 아닌 가나다순으로 정렬됨
		java.util.Arrays.sort(sorted);
		System.out.println(sorted.toString());

		System.out.println("\n선택정렬");	//글자수로 정렬하기 위한 선택정렬
        String temp;//데이터 Swap용 임시 변수
        
        for( int i=0; i < sorted.length-1; i++){
        	System.out.println(i+1+"번째값 "+sorted[i]);
            for (int j=i+1; j<sorted.length; j++){               
            	System.out.println("	비교대상 "+sorted[j]);
                if(sorted[i].length() > sorted[j].length()){
			//오름차순 ; 큰수를 뒤로, data[i] > data[j]

                    //데이터 값 체인지
                    temp = sorted[i];
                    sorted[i] = sorted[j];
                    sorted[j] = temp;
                }
            }
        }
		System.out.println(sorted.toString());
		
		return sorted;
	}

3-3. View를 반환하는 방법으로는

HttpServletResponse객체의 PrintWriter out으로 처리데이터만을 반환할 수도 있지만

html페이지를 출력해야 하므로 RequestDispatcher를 사용합니다.

Attribute에 담은 데이터를 유지하기위해 redirect 대신 requestDispatcher.forward

[Servlet/jQuery] 설문지 22-23일 (작성중)

[Servlet/JavaScript] 설문지 20-21일

[Servlet/jQuery] 설문지 22-23일

20일 화요일

1주차에는 별다른 세팅을 하지 않고 dynamic web project로만 진행합니다.

라이브러리는 직접 추가해도 되지만 maven으로 등록했습니다.

목표 - Ajax를 사용하지 않고 Servlet만을 통한 서버 통신원리를 이해

[Servlet/JavaScript] 설문지 20-21일

22일 목요일

데이터 가공 서블릿에 대한 이해를 기반으로 퍼블리싱 작업을 진행합니다.

이후 설문지와 응답이 입력될 데이터베이스를 계획합니다.

목표 - 퍼블리셔를 통해 전달받은 html과 css를 적용하기, DB 세팅하고 table 계획하기

[Servlet/jQuery] 설문지 22-23일