웹DB_비번, 줄바꿈처리,AJAX_DAY63

웹 DB 실습 

[방명록 만들기]

전체적인 흐름은 위의 이미지와 같다. 

새로 배운 기술에 대해서만 주해를 하고, 나머지는 여기에 전체 소스를 첨부하겠다. 다른 파일 없이 실제 소스코드만 저장해두었으니, DBPC 라이브러리 등 서버등록은 직접 해야 한다.

 

1. [visit_list.jsp] -> 비밀번호 체크

코드 상에서는 수업 목적상 비밀번호를 기억하기 위해서 비밀번호가 표시되도록 되어 있지만, 평상시에는 비밀번호를 표시하지 않고, 자신의 게시글만 수정&삭제가 가능하도록 해야한다. 

비밀번호가 일치하는 경우에만 수정&삭제하는 권한이 주어지는데 비밀번호는 JS를 사용하여 다음과 같은 방법으로 검사한다.

"삭제"버튼을 누르면 form에 있는 정보를 전송하는 JS함수를 정의한다. 전송하고자 하는 폼의 idx를 알아야 DB에 접근해서 CRUD명령을 수행할 수 있기 때문에(idx가 테이블의 기본키이다.) form태그 내부에 idx와 pwd값을 hidden타입으로 생성하여 사용자에게는 보이지 않지만 실질적으로 데이터는 서블릿에 전송되도록 한다. 

전송하기 전에 비밀번호 검사를 진행하는데, 실제 DB에 저장된, 초기에 입력한 pwd와 수정&삭제 작업을 하기위해 입력한 비밀번호c_pwd가 일치하는 경우에만 수정&삭제를 담당하는 서블릿으로 폼 데이터를 전송하도록 함수를 정의한다. 

이런식으로 비밀번호를 체크하면 구현이 쉬운 장점이 있지만, 보안성이 아주 꽝이다. 웹 페이지에서 페이지 소스보기를 진행했을때, pwd와 idx가 다 보인다. 이러한 방법을 보완할 수 있도록 ajax비동기 통신 기술을 배우면 추가로 정리하겠다.

 

2. [Enter값 처리] -> VisitModifyFormAction, VisitModiFyAction -> VisitInsertAction

위의 서블릿의 공통점들은 사용자에게 받은 파라미터 정보들을 DB에 데이터를 삽입하고, 수정하는 작업이다. 

이때, 사용자가 입력하고 출력받는 페이지는 html을 사용하기 때문에 평소에 기본적으로 적용되는 엔터 처리"\r\n"이 html코드에서는 인식되지 않는다. html에서 줄바꿈 태그는 <br>이기 때문이다. 

따라서 데이터를 삽입&수정 시에 위의 줄바꿈 처리를 해주는 코드를 변경해주어야 한다.  

요청값 -> DB      (\r\n  =>   <br>)

DB       -> 요청값(<br>   =>   \r\n)

1) 사용자가 입력한 내용을 DB에 저장하는 경우 VisitInsertAction

content = content.replaceAll("\r\n", "<br>"); 

2) 사용자가 입력한 내용을 DB에서 읽어와 수정 폼을 띄워주는 경우(바꾸지 않으면 <br>태그가 출력됨) VisitModifyFormAction

String content = vo.getContent().replaceAll("<br>", "\r\n");

vo.setContent(content);

3) 사용자가 수정폼에 재 입력한 내용을 DB에 저장하는 경우 VisitModifyAction

content = content.replaceAll("\r\n", "<br>");

 

AJAX(Asynchronous Javascript & XML) 자바스크립트 비동기 통신 기술

1. 자바스크립트를 통한 통신 기술 
2. 동기/비동기 통신가능 
3. 전달 데이터 유형 : text, xml, json
4. 웹 브라우저에 내장된 객체로 비동기 통신한다. XMLHttpRequest
   1. 동기 : 특정 함수를 호출하면 결과가 올 때까지 기다린다. 
      1. 노트북을 오프라인으로 사러가면 상품을 가져올 때까지 기다린다. 
   2. 비동기 : 특정 함수를 호출하면 결과가 올 때까지 기다리지 않는다.
      1. 노트북을 온라인으로 사면 주문을 넣어두고 상품이 올때까지 문 앞에서 기다리지 않는다.
5. foreground통신 : URL에 사용자가 요청한 정보가 보인다.
6. background통신:  URL에 사용자가 요청한 정보가 보이지 않는다.

 

[구조] 

1.XMLHttpRequest 객체얻기
       var  xhr;
       if(window.ActiveXObject)//Window Explorer면 
                  xhr = new ActiveXObject("Microsoft.XMLHTTP");
       else if(window.XMLHttpRequest)//기타브라우져일 경우
                  xhr = new XMLHttpRequest();

2.CallBack(리턴받을 함수) 설정 -> 특정 조건에 만족하면 시스템에 의해서 자동호출 되는 함수 
       xhr.onreadystatechange = res
       여기서 res()는 자바스크립트 함수임

3.작업요청 지정(GET/POST)
             -open(전송방식,요청페이지,비동기지정(true))

              -GET방식일 경우
                          xhr.open("GET","ex.jsp?no=3&no2=5",true);
                          xhr.send(null); 
              -POST방식일 경우
                          xhr.open("POST","ex.jsp",true);
                          xhr.send("no=3&no1=5");
    
4.res()함수 호출시 상태값
               var code = xhr.readyState;
                        0 : uninitialize(사용자의 요청인 request가 초기화되지 않음)
                        1 : loading(서버와의 연결이 성사됨) 
                        2 : loaded(서버가 사용자의 요청 request를 받음)
                        3 : interactive(request를 처리하는 중)
                        4 : complete(request에 대한 처리가 끝났으며 응답할 준비가 완료됨)
               var status = xhr.status;
                          200 : complete
                          404 : Not Found
                          500 : Syntax Error
5.데이터 수신
 function res()
 {
        if(xhr.readyState==4 && xhr.status==200)
        {
        //파라미터 값을 서버로 전송하면 서버에서 값을 계산하여 응답해주는데, xhr이라는 객체 내부에 응답 데이터를 저장            하다가 readyState가 4가 되면 응답 데이터로 저장된 값을 resultFn이라는 사용자 지정 콜백함수로 가져온다. 
        //Text Data 수신시
        var data = xhr.responseText;
        //JSON코드 받을시에는 반드시 eval()함수를 사용해야한다.
        var json = eval(xhr.responseText);
        //Xml Data 수신시
        var data = xhr.responseXML;
        }
 }

cf)자바스크립트에서 한글 or 특수문자 처리
   encodeURIComponent(str)

 

[XMLHttpRequest]

var xhr = null;
 
function createRequest(){
    if(xhr!=null)return;
    
    
    if(window.ActiveXObject)
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    else
        xhr = new XMLHttpRequest();
}
 
 
function sendRequest(url, param, callBack, method){
    createRequest();
    var httpMethod = 
    (method!='POST' && method!='post')?'GET':'POST';
    
    var httpParam = 
    (param==null || param == '')?null:param;
    
    var httpURL = url;
    
    //요청 방식이 get방식이고, 전달할 파라미터 값이 있다면
    //url경로를 제작 해야 한다.(.../test.jsp?ch=123)
    if(httpMethod == 'GET' && httpParam != null)
        httpURL = httpURL+"?"+httpParam;
    
    xhr.open(httpMethod, httpURL, true);
    xhr.setRequestHeader("Content-Type",
      "application/x-www-form-urlencoded");
    xhr.onreadystatechange = callBack;
    
    xhr.send(httpMethod == 'POST'?httpParam:null);
}
 

XMLHttpRequest라는 객체를 통해서 사용자의 요청을 처리해주는 서버와 통신을 한다. 이때 연결정보에 대한 상태 값이 존재하는데, 이것이 readyState와 status값이다. 이 값에 대한 설명은 글 윗부분에 정리되어 있다. 

이러한 연결정보가 변경될 때마다 결과를 받을 callback함수를 지정해주는데 이 함수의 이름이 res이다. res함수는 연결정보가 바뀔때마다 자동 호출되고, 호출되었다고 해서 데이터를 처리하는 것이 아니라, 서버로부터 응답할 준비가 되면, 곧 연결정보에 문제가 없다면 -> readyState와 status값이 각각 4, 200인 경우에만 데이터에 대한 처리를 하도록 구현해야 한다. 

[사칙연산 비동기 통신]

한글이나 특수문자는 인코딩 처리를 해주지 않으면 파라미터를 전달하고 수신하는 과정에서 제대로된 문자로 인식하지 못한다. 따라서 위의 encodeURIComponent("문자열", "인코딩") 메소드를 사용해서 쿼리형식으로 전달하는 과정에서 사용해주어야 한다. 이때 "인코딩"값은 생략 가능한데, 생략시 html or jsp파일에 지정된 인코딩 방식이 적용된다.

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<!-- ajax 라이브러리 연결 -->
 
<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">
    var regular_number = /^[0-9]{1,}$/;
    
    function plus(){
        
        var su1 = document.getElementById("su1").value;
        var su2 = document.getElementById("su2").value;
        
        if(regular_number.test(su1)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su1").value='';
            document.getElementById("su1").focus();
            return;
        }
        
        if(regular_number.test(su2)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su2").value='';
            document.getElementById("su2").focus();
            return;
        }
        
        //foreground 통신
        //location.href='calc.do?su1=' + su1 + '&su2=' + su2;
        
        //Ajax 통신 background 통신
        var url = "calc.do";
        var param = "su1=" + su1 + "&su2=" + su2 + "&op=" + encodeURIComponent("+");
        
        sendRequest(url, param, resultFn, "GET");
        
    }
    
    function minus(){
        
        var su1 = document.getElementById("su1").value;
        var su2 = document.getElementById("su2").value;
        
        if(regular_number.test(su1)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su1").value='';
            document.getElementById("su1").focus();
            return;
        }
        
        if(regular_number.test(su2)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su2").value='';
            document.getElementById("su2").focus();
            return;
        }
        
        //foreground 통신
        //location.href='calc.do?su1=' + su1 + '&su2=' + su2;
        
        //Ajax 통신 background 통신
        var url = "calc.do";
        var param = "su1=" + su1 + "&su2=" + su2 + "&op=" + encodeURIComponent("-");
        
        sendRequest(url, param, resultFn, "GET");
        
    }
    
    function multiply(){
        
        var su1 = document.getElementById("su1").value;
        var su2 = document.getElementById("su2").value;
        
        if(regular_number.test(su1)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su1").value='';
            document.getElementById("su1").focus();
            return;
        }
        
        if(regular_number.test(su2)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su2").value='';
            document.getElementById("su2").focus();
            return;
        }
        
        //foreground 통신
        //location.href='calc.do?su1=' + su1 + '&su2=' + su2;
        
        //Ajax 통신 background 통신
        var url = "calc.do";
        var param = "su1=" + su1 + "&su2=" + su2 + "&op=" + encodeURIComponent("*");
        
        sendRequest(url, param, resultFn, "GET");
        
    }
    
    function divide(){
        
        var su1 = document.getElementById("su1").value;
        var su2 = document.getElementById("su2").value;
        
        if(regular_number.test(su1)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su1").value='';
            document.getElementById("su1").focus();
            return;
        }
        
        if(regular_number.test(su2)==false){
            alert("숫자만 입력하세요.")
            document.getElementById("su2").value='';
            document.getElementById("su2").focus();
            return;
        }
        
        //foreground 통신
        //location.href='calc.do?su1=' + su1 + '&su2=' + su2;
        
        //Ajax 통신 background 통신
        var url = "calc.do";
        var param = "su1=" + su1 + "&su2=" + su2 + "&op=" + encodeURIComponent("/");
        
        sendRequest(url, param, resultFn, "GET");
        
    }
    
    function resultFn(){
        console.log("xhr.readyState=" + xhr.readyState, "xhr.status=" + xhr.status);
        if(xhr.readyState == 4 && xhr.status==200){
            var data = xhr.responseText; //"10"
            
            document.getElementById("result").value = data;
        }
    
    }
</script>
</head>
<body>
수1:<input id="su1"><br>
수2:<input id="su2"><br>
<input type="button" value="계산해줘(+)" onclick="plus();">
<input type="button" value="계산해줘(-)" onclick="minus();">
<input type="button" value="계산해줘(*)" onclick="multiply();">
<input type="button" value="계산해줘(/)" onclick="divide();"><br>
결과:<input id="result">
</body>
</html>

[servlet]

package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class CalcAction
 */
@WebServlet("/calc.do")
public class CalcAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        request.setCharacterEncoding("utf-8");
        
        String op = request.getParameter("op");
        int su1 = Integer.parseInt(request.getParameter("su1"));
        int su2 = Integer.parseInt(request.getParameter("su2"));
        
        //자바스크립트에서 한글이나 특수문자는 인코딩 처리를 하지 않으면 파라미터가 제대로 전송되지 않는다. 
        //encodeURIComponent("+"); -> 현재 html인코딩을 그대로 적용한다. 
        //encodeURIComponent("+", "ms949"); -> 특정 인코딩 형태로 바꿀 수도 있다.
        System.out.printf("op = [%s]\n", op);
        
        int result = 0;
        
        switch(op) {
            case "+":
                result= su1+su2;
                break;
            case "-":
                result= su1-su2;
                break;
            case "*":
                result= su1*su2;
                break;
            case "/":
                result = su2==0 ? 0 : (su1/su2);
                break;
                
        }
        //응답처리 
        response.getWriter().print(result);
 
 
    }
 
}
 

 

[JQuery Ajax]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- JQuery 라이브러리 연결 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<!-- ajax 라이브러리 연결 -->
<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">
    var regular_number = /^[0-9]{1,}$/;
    
    function calc(op){
        
        var su1 = $("#su1").val();//document.getElementById("su1").value;
        var su2 = $("#su2").val();//document.getElementById("su2").value;
        
        if(regular_number.test(su1)==false){
            alert("숫자만 입력하세요.")
            $("#su1").val("");//document.getElementById("su1").value='';
            $("#su1").focus();//document.getElementById("su1").focus();
            return;
        }
        
        if(regular_number.test(su2)==false){
            alert("숫자만 입력하세요.")
            $("#su2").val("");//document.getElementById("su2").value='';
            $("#su2").focus();//document.getElementById("su2").focus();
            return;
        }
        
        //jQuery Ajax : JSON코드로 작성하게 되어있음
        //          k      v      k      v      k        v
        //$.ajax({ url:'', data:'', success:function(result_data){}});
        //키값은 정해진 옵션이기 때문에 웬만하면 다른 값으로 바꾸지 않는게 좋다.
        $.ajax({ 
            type:'GET',
            url :'calc.do', 
            data:{'su1':su1, 'su2':su2, 'op':op},/* 전달인자(param -> JSON형식으로 작성) */ 
            success:function(result_data){
                $("#result").val(result_data);
                
            }
        });
    }
    
    
</script>
</head>
<body>
수1:<input id="su1"><br>
수2:<input id="su2"><br>
<input type="button" value="계산해줘(+)" onclick="calc('+');">
<input type="button" value="계산해줘(-)" onclick="calc('-');">
<input type="button" value="계산해줘(*)" onclick="calc('*');">
<input type="button" value="계산해줘(/)" onclick="calc('/');"><br>
결과:<input id="result">
</body>
</html>