5/24 29일차 jQuery를 활용한 데이터 전달

#전날 Summary

 

##회원가입

register.jsp	Servlet	DAO	DB
<form method="post" action="<%request.getContextpath()%>/userServlet">	@WebServlet("/userServlet")
	doPost(HttpServletRequest request...)
<input type="hidden", name="pageCode" value="p001">	String = 페이지 코드값 꺼내기 String pageCode = Request.getParmeter("pagecode");
	String = 회원 정보 꺼내기 String userId = Request.getParameter("userId");
	UserVO uvo = new UserVO( String 값 넣기 )
	DAO 메서드에 VO를 파라미터로 넣기 int insertRows = dao.userInsert(uvo);	UserVO checkUser(Use)
	insert rows == 1 이면 index.jsp 아니면 500.html로 보냅니다

 

##로그인

jsp	Servlet	DAO	DB
페이지코드 p0001	페이지 코드 받기
아이디, 비밀번호 입력	아이디, 비밀번호 String으로 받기
	userVO userLogin(로그인, 비밀번호)	파라미터로 받은 아이디, 비밀번호로 sql문 완성하여 DB에 접근합니다	DB에 접근
세션으로 전달받은 회원정보 값들을 받습니다.	만약 userVO가 널이 아니라면 세션에 VO의 값들을 담고 indx.jsp로 전달합니다	결과물을 userVO로 담아내 Servlet으로 보냅니다.

## 로그아웃

jsp	Servlet	DAO	DB
href로 서블릿으로 이동합니다	doGet() 메서드로 받아 session을 해제합니다
	index.jsp로 이동합니다. response를 이용하여 보냅니다.

 

## 게시판 목록보기

jsp	Servlet	DAO	DB
index.jsp에서 <a> 태그 href로 서블릿으로 이동합니다. 페이지 코드도 같이 이동합니다 /boardServlet?pagecod=페이지코드	BoardServlet으로 이동합니다. doGet()으로 받습니다.
	페이지코드를 받습니다. if(게시물목록보기 페이지코드){ DAO에 게시물 목록을 받습니다.	메서드 리턴값: ArrayList<boardVO>  파라미터 없음
tables.jsp로 이동 for()문으로 ArrayList<boardVO>에 접근하여 화면에 뿌립니다.	requst.setAttribute(); RequestDispatcher rd = request.getRequestDispatcher(보내고자 하는 경로); rd.forward(); request를 이용하여 보냅니다.

 

## 게시판 상세보기

jsp	Servlet	DAO	DB
<a href>를 이용하여 servlet으로 이동 with 페이지코드, 게시판 seq	@webServlet("/BoardServlet") doGet(){ 페이지코드  받기 if(페이지코드){ 게시판 seq 받기 boardVO를 리턴값으로 하는 dao 메서드를 선언합니다. 파라미터는 seq입니다.  } }	public boardVO boardSelect(int seq){ 파라미터로 받은 seq를 이용하여 sql문을 완성합니다. return boardVO; }
tables_detail.jsp

 

 

#scrpit

동적화면을 위해 스크립트가 필요합니다!

head안에

정적 상태 엘리먼트에 적용가능합니다.

body안에

동적 상태 엘리먼트에 적용가능합니다.

 

##앞으로 배울 js 

form

rest

scrpt 전송, 입력, 뿌릴용도에 문법

 

#css

cdn: 서비스 공급자, 24시간 데이터를 제공합니다.

css 타이핑하여 적용할 수 있습니다.

태그안에 id는 겹치면 안됩니다.

class는 겹쳐도 됩니다. 일괄적으로 처리할 때 사용됩니다.

#jQuery

Query는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 

id 접근시 : $("#id")class 접근시 : $(".id")

## form 제어

## 조건문(if)

## 반복문(for, foreach)

## 전송 (Ajax)

 

#예제

## 버튼 3개를 만들고, 클릭시 서블릿으로 각각 다른 pagecode를 전달하기

 

jsp

<form id="loginForm">
<input type="text" id="id" name="id">
<input type="password" id="pw" name="pw">
<input type="button" id="btn_register" value="가입하기">
<input type="button" id="btn_modify" value="수정하기">
<input type="button" id="btn_remove" value="삭제하기">
</form>

 

실제 화면은 이렇게 나옵니다.

jsp <script> 부분

<script>
$(function(){
	
    $("#btn_register").click(function(){ // 가입하기 버튼 클릭시 이벤트
    
        if($("#id").val()==""){ // id값이 비어있다면 알람 발생, id값으로 이동
    	alert("아이디를 입력하세요");
        $("#id").focus();
    } else if($("#pw").val()==""){ // pw도 마찬가지
    	alert("비밀번호를 입력하세요");
        $("#id").focus();
    } else{ // 둘다 아니라면
    	$("#loginForm").attr("method","post"); // post 방식으로 서블릿으로 이동하기
        $("#loginForm").attr("action","testServlet?pagecode=p001");
        $("#loginForm").submit(); // form에 값들도 같이 제출됨
    }
    
    $("#btn_modify").click(function(){ // 수정하기 버튼 클릭시 이벤트
    	$("#loginForm").attr("method","post");
        $("#loginForm").attr("action","testServlet?pagecode=p002");
        $("#loginForm").submit();
    })
    
    $("#btn_remove").click(function(){ // 삭제하기 버튼 클릭시 이벤트
        $("#loginForm").attr("method","post");
        $("#loginForm").attr("action","testServlet?pagecode=p003");
    	$("#loginForm").submit();
    })
    
    })
    
    
})
</script>

 

Servlet

@WebServlet("/testServlet")
public class testServlet extends HttpServlet{
	
    private static final long serialVersionUID = 1L;
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    	response.getWriter().append("Server at : ").append(request.getContextPath());
    }
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletExceptin, IOException{
    	String pageCode = (String)request.getParameter("pagecode");
        String userId = (String)request.getParameter("id");
        String userPw = (String)request.getParameter("pw");
        System.out.println(pageCode);
        System.out.println(userId);
        System.out.println(userPw);
    }
}

 

이렇게 입력을 하고 버튼을 누른다면

form태그안에 있는 값들을 console창으로 올 수 있습니다.