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>  ${status.count}번 질문 : ${item}
</c:forEach>
</c:when>
<c:otherwise>
<c:forEach var="q" begin="1" end="${num}" step="1">
<br>  ${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>  ${status.count}번 질문 : ${item}
<br> 답변 : ${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>  ${status.count}번 질문 : <label>${item}</label>
<input id="${status.count}" type="hidden" name="question" value="${QuestionList[status.index]}">
<br> <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>  ${status.count}번 질문 : <label id="q${status.index}">${QuestionSort[status.index]}</label>
<br> 답변 : <label id="a${status.index}">${item}</label>
<br> 평가1 :
<c:choose>
<c:when test="${fn:length(QuestionSort[status.index]) > fn:length(item)}">
설문이 답변보다 <${fn:length(QuestionSort[status.index]) - fn:length(item)}>글자 많습니다
<br> 평가2 : 당신은 지루하셨군요
</c:when>
<c:when test="${fn:length(QuestionSort[status.index]) < fn:length(item)}">
답안이 설문보다 <${fn:length(item) - fn:length(QuestionSort[status.index])}>글자 많습니다
<br> 평가2 : 당신은 현명하십니다
</c:when>
<c:otherwise>
답안과 설문의 글자수가 일치합니다.
<br> 평가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일 (작성중)
'먼지 낀 책장사이 > 신입직원 교육' 카테고리의 다른 글
| 2주차 스프링 프레임워크 (1) | 2018.03.30 |
|---|---|
| [Servlet/jQuery] 설문지 22-23일 (작성중) (0) | 2018.03.29 |
| [Servlet] 1주차 설문지 서블릿 (0) | 2018.03.27 |
