[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();
}
2-3. 데이터베이스가 준비되면 JDBC를 통해 각 테이블에 저장합니다.
'먼지 낀 책장사이 > 신입직원 교육' 카테고리의 다른 글
2주차 스프링 프레임워크 (1) | 2018.03.30 |
---|---|
[Servlet/JavaScript] 설문지 20-21일 (0) | 2018.03.29 |
[Servlet] 1주차 설문지 서블릿 (0) | 2018.03.27 |