'작업대 > 프로젝트' 카테고리의 다른 글
IoT 수위레벨제어장치(C언어,MySQL,PHP,자바) (2) | 2016.10.25 |
---|---|
앱인벤터를 통한 전용 구동어플 제작 (0) | 2016.09.23 |
DB에 저장된 데이터 출력 (0) | 2016.09.23 |
데이터베이스 연동을 위한 APM 설치 (0) | 2016.09.21 |
IoT 수위레벨 제어장치 전용어플 (1) | 2016.08.26 |
IoT 수위레벨제어장치(C언어,MySQL,PHP,자바) (2) | 2016.10.25 |
---|---|
앱인벤터를 통한 전용 구동어플 제작 (0) | 2016.09.23 |
DB에 저장된 데이터 출력 (0) | 2016.09.23 |
데이터베이스 연동을 위한 APM 설치 (0) | 2016.09.21 |
IoT 수위레벨 제어장치 전용어플 (1) | 2016.08.26 |
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/jQuery] 설문지 22-23일 (작성중) (0) | 2018.03.29 |
---|---|
[Servlet/JavaScript] 설문지 20-21일 (0) | 2018.03.29 |
[Servlet] 1주차 설문지 서블릿 (0) | 2018.03.27 |
[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주차 스프링 프레임워크 (1) | 2018.03.30 |
---|---|
[Servlet/JavaScript] 설문지 20-21일 (0) | 2018.03.29 |
[Servlet] 1주차 설문지 서블릿 (0) | 2018.03.27 |