배워가는 페이지

[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/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일