[영화정보 웹 만들기] 5. jQuery 문법, jquery를 이용하여 Actor 테이블에 데이터 삽입하기

jQuery를 사용해서 db에 데이터를 삽입해보기 전에, 먼저 jquery를 어떻게 사용하는지 알아보려고 한다. w3schools에 있는 내용을 토대로 정리해보았다.

jquery 문법

$(selector).action() 

A $ sign to define/access jQuery                             $는 jQuery에 접근하겠다는 의미

A (selector) to "query (or find)" HTML elements         (selector) 는 HTML요소를 찾음

A jQuery action() to be performed on the element(s)   action()은 HTML요소를 동작하게 하기 위함

document ready event

$(document).ready(function(){

   // jQuery methods go here...

});

이것은 document가 준비되기 전에 jQuery 코드가 동작하는 것을 막기 위함이다. 'jsp 문서가 실행할 준비가 되었다면' , 'DOM들이 메모리에 올라와서 실행될 준비가 되었다면' 이라는 뜻이고,  반드시 이 문장 안에 jQuery 소스를 넣어주어야 한다.  

jQuery Selector

jQuery 셀렉터는 id나 클래스, 타입, 속성, 속성값 등을 이용해서 HTML 요소들을 선택하고 조작할 수 있게 하는 것을 말한다. 모든 셀렉터들은 $() 로 시작된다.

 

(1) element selector
element selector는 엘리먼트의 이름을 넣어서 찾아오는 것을 말한다. 예를들어, 버튼을 눌렀을 때 <p> 엘리먼트들이 사라지게 하고싶다면, 아래와 같이 $("p") 형식으로 사용할 수 있다.

(2) #id selector
#id selector는 HTML 태그의 id 속성을 이용하여 특정 엘리먼트를 찾는다. id는 페이지 내에서 유일해야 하므로,  특정한 하나의 엘리먼트를 찾고자 할때 #id selector를 사용한다. 예를들어, 버튼을 클릭했을 때 id가 test인 엘리먼트를 사라지게 하고싶다면 아래와 같이 $("#test")의 형식으로 사용할 수 있다.

(3) .class selector
class selector는 특정 클래스로 엘리먼트를 찾을때 사용한다. 예를들어, 버튼을 클릭했을 때 class가 test인 엘리먼트를 사라지게 하고 싶다면,
$(".test") 형식을 사용하면 된다.

(4) 그 외의 selector들

$("*")	모든 엘리먼트 선택
$(this)	현재 HTML 엘리먼트 선택
$("p.intro")	<p> 중에서 클래스 이름이 intro인 엘리먼트 선택
$("p:first")	맨 처음 <p> 엘리먼트 선택
$("ul li:first")	맨 처음 <ul>의 첫 <li> 선택
$("ul li:first-child")	모든 <ul>의 첫 <li> 선택
$("[href]")	href 속성을 가진 모든 엘리먼트 선택
$("a[target='_blank']")	타겟 페이지가 _blank인 모든 <a> 엘리먼트 선택
$("a[target!='_blank']")	타겟 페이지가 _blank가 아닌 모든 <a> 엘리먼트 선택
$(":button")	input타입이 button인 모든 <button> 엘리먼트 선택
$("tr:even")	<tr> 중 짝수 엘리먼트 선택
$("tr:odd")	<tr> 중 홀수 엘리먼트 선택

 

jQuery Event Methods

 

이벤트는 사용자가 어떠한 액션을 취했을 때 웹 페이지가 반응하는 것을 말한다. 예를 들어 마우스를 엘리먼트 위로 이동한다거나, 라디오 버튼을 선택하는 것, 엘리먼트를 클릭하는 것이 해당될 수 있다.

jquery event 문법

$("p").click(function(){
  // action 을 적는다.
 });

자주 사용되는 event들

$(document).ready()
위에서 살펴보았다.

 

click()
click() 메소드는 유저가 엘리먼트를 클릭했을 때 실행된다. 예를 들어 유저가 <p>를 클릭했을 때 그 <p>태그가 사라진다고 할 때 아래와 같이 표현된다.

dblclick()
dbclick() 메소드는 유저가 엘리먼트를 더블클릭했을 때 실행된다.

mouseenter()
mouseenter()는 엘리먼트에 마우스를 가져다댔을 때 실행된다.

mouseleave()
mouseleave()는 엘리먼트에서 마우스를 뗐을 때 실행된다.

mousedown()
마우스를 클릭하고 아래로 내릴 때 실행된다.

mouseup()
마우스를 클릭하고 위로 올릴 때 실행된다.

hover()
hover() 는 마우스가 엘리먼트에 있을 때 1번째 function 실행되고 마우스가 엘리먼트를 떠났을 때 2번째 function이 실행되게 하는 것이다. 예를 들어 id 가 p1인 엘리먼트에 마우스를 가져다댔을 때 "You entered p1"이라고 경고창이 뜨고, 마우스가 멀어지면 "Bye! You now leave p1! 이라고 경고창이 뜨게 하고 싶다면 아래와 같이 쓰면 된다.

focus()
focus()는 form 엘리먼트가 클릭되었을 때 이벤트 핸들러 기능을 수행한다.

blur()
blur()는 focus()와 반대로 form 엘리먼트가 포커스를 잃었을 때 이벤트 핸들러 기능을 수행한다.

 

on() method
on() 메소드는 하나의 엘리먼트에 여러개의 이벤트 핸들러를 넣고 싶을 때 사용한다. 예를 들어 <p> 에 마우스를 가져다댔을 때 배경색이 회색으로 변하게 하고, 마우스를 뗐을 때는 하늘색, 클릭했을 때는 노란색으로 바뀌게 하고싶다면 아래와 같이 적으면 된다.

 

 

---

jquery문법을 모두 익혔다. 이제 jQuery를 이용해서 MOVIE계정의 Actor 테이블에 데이터를 INSERT 해보려고 한다.

먼저 ActorDAO에 아래와 같이 addNewActor 메소드를 추가한다.

    public boolean addNewActor(String actorName) {
        
        loadOracleDriver();
        
        Connection conn = null;
        PreparedStatement stmt = null;
        
        try {
            conn = DriverManager.getConnection(Const.DB_URL, Const.DB_ID, Const.DB_PASSWORD);
            
            String query = XML.getNodeString("//query/actor/insertNewActor/text()");
            stmt = conn.prepareStatement(query);
            stmt.setString(1, actorName);
                        
            int insertCount = stmt.executeUpdate();
            
            return insertCount > 0 ;
            
        } catch (SQLException e) {
            throw new RuntimeException(e.getMessage(), e);
        } finally {
            closeDB(conn, stmt, null);
        }
        
    }

전체 코드
ActorDAO.java

package com.ktds.oph.dao;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
 
import com.ktds.oph.util.xml.XML;
import com.ktds.oph.vo.ActorVO;
 
public class ActorDAO {
    
    public List<ActorVO> getActorsByMovieId(int movieId) {
        
        loadOracleDriver();
        
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;
        
        List<ActorVO> actors = new ArrayList<ActorVO>();
        ActorVO actor = null;
        
        try {
            
            conn = DriverManager.getConnection(Const.DB_URL, Const.DB_ID, Const.DB_PASSWORD);
            
            String query = XML.getNodeString("//query/actor/getActorsByMovieId/text()");
            stmt = conn.prepareStatement(query);
            stmt.setInt(1, movieId);
            
            rs = stmt.executeQuery();
            
            while (rs.next()) {
                actor = new ActorVO();
                
                actor.setActorName(rs.getString("ACTOR_NAME"));
                
                actors.add(actor);
                
            }
            
        } catch (SQLException e) {
            throw new RuntimeException(e.getMessage(), e);
            
        } finally {
            closeDB(conn, stmt, rs);
        }
        
        return actors;
    }
    
    public List<ActorVO> getAllActors() {
        
        loadOracleDriver();
        
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;
        
        List<ActorVO> actors = new ArrayList<ActorVO>();
        ActorVO actor = null;
        
        try {
            
            conn = DriverManager.getConnection(Const.DB_URL, Const.DB_ID, Const.DB_PASSWORD);
            
            String query = XML.getNodeString("//query/actor/getAllActors/text()");
            stmt = conn.prepareStatement(query);
            
            rs = stmt.executeQuery();
            
            while (rs.next()) {
                actor = new ActorVO();
                
                actor.setActorId(rs.getInt("ACTOR_ID"));
                actor.setActorName(rs.getString("ACTOR_NAME"));
                
                actors.add(actor);
                
            }
            
        } catch (SQLException e) {
            throw new RuntimeException(e.getMessage(), e);
            
        } finally {
            closeDB(conn, stmt, rs);
        }
        
        return actors;
    }
    
    
    public boolean addNewActor(String actorName) {
        
        loadOracleDriver();
        
        Connection conn = null;
        PreparedStatement stmt = null;
        
        try {
            conn = DriverManager.getConnection(Const.DB_URL, Const.DB_ID, Const.DB_PASSWORD);
            
            String query = XML.getNodeString("//query/actor/insertNewActor/text()");
            stmt = conn.prepareStatement(query);
            stmt.setString(1, actorName);
                        
            int insertCount = stmt.executeUpdate();
            
            return insertCount > 0 ;
            
        } catch (SQLException e) {
            throw new RuntimeException(e.getMessage(), e);
        } finally {
            closeDB(conn, stmt, null);
        }
        
    }
    
    private void loadOracleDriver() {
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
        } catch (ClassNotFoundException e) {
            throw new RuntimeException(e.getMessage(), e);
        }
    }
    
    private void closeDB(Connection conn, PreparedStatement stmt, ResultSet rs) {
        if ( rs!= null ) {
            try {
                rs.close();
            } catch (SQLException e) {}
        }
        if ( stmt!= null ) {
            try {
                stmt.close();
            } catch (SQLException e) {}
        }
        if ( conn!= null ) {
            try {
                conn.close();
            } catch (SQLException e) {}
        }
 
    }
}
 

 

---

기존의 movie.jsp에 jquery 문장을 차례대로 넣어준다.

1. jquery를 사용하겠다고 선언해주는 부분

1

<script type="text/javascript", src="/MOVIE/resource/js/jquery-1.12.1.js"></script>

cs

 

2. 표 아래에 배우 등록 버튼, 영화 등록 버튼을 만들어준다.

1 2

<input type="button" id= "addNewActor" value="배우 등록"/> <input type="button" id= "addNewMovie" value="영화 등록"/>

cs

 

3. <head> 안에 jquery 를 추가해준다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script type="text/javascript", src="/MOVIE/resource/js/jquery-1.12.1.js"></script> <script type="text/javascript">          $(document).ready( function() {                              $("#addNewActor").click( function() {              console.log("배우 등록을 클릭했습니다.");              // 페이지 이동              location.href = "/MOVIE/addNewActor";                   } );                         $("#addNewMovie").click( function(){              console.log("영화 등록을 클릭했습니다.");              // 페이지 이동              location.href = "/MOVIE/addNewMovie";                  } );                                        } );   </script> Colored by Color Scripter

cs

 

전체 코드는 아래와 같다.
movie.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript", src="/MOVIE/resource/js/jquery-1.12.1.js"></script>
<script type="text/javascript">
    
    // jquery event listner 등록 = 초기화
    // selector
    // $("대상").이벤트(기능);
    
    // 이 jsp 문서가 실행할 준비가 되었다면 - DOM들이 메모리에 올라와서 실행될 준비가 되었다면
    
        $(document).ready( function() {
            /*
        alert("jquery를 실행할 준비가 되었습니다.");
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
        console.log("브라우저의 높이는 " + windowHeight +"입니다.");
        console.log("브라우저의 너비는"+ windowWidth+"입니다.");
        
        var documentHeight = $(document).height();
        var documentWidth = $(document).width();
        console.log("문서의 높이는 " + documentHeight +"입니다.");
        console.log("문서의 너비는"+ documentWidth+"입니다.");
            */
            
        // 아이디가 addNewActor인 DOM # 붙이기 - 클릭했을 때
          $("#addNewActor").click( function() {
             console.log("배우 등록을 클릭했습니다.");
             // 페이지 이동
             location.href = "/MOVIE/addNewActor";
          } );
      
          $("#addNewMovie").click( function(){
             console.log("영화 등록을 클릭했습니다.");
             // 페이지 이동
             location.href = "/MOVIE/addNewMovie";
          } );
        
        /*
        $("td").click( function() {
            console.log( $(this).text() );
        });
        */
        
                
    } );
    
    
 
    
 
</script>
</head>
<body>
 
<table border = 1>
    <tr>
        <th>MOVIE_ID</th>
        <th>TITLE</th>
        <th>RATE</th>
        <th>RUNNING_TIME</th>
        <th>OPEN_DATE</th>
        <th>GRADE_ID</th>
        <th>GRADE_TITLE</th>
    </tr>
    
    <c:forEach items = "${movies}" var = "movie">
        <tr>
            <td>${movie.movieId}</td>
            <td>
                <a href = "/MOVIE/detail?movieId=${movie.movieId}">${movie.title}</a> (${movie.actorCount})
            </td>
            <td>${movie.rate}</td>
            <td>${movie.runningTime}</td>
            <td>${movie.openDate}</td>
            <td>${movie.gradeId}</td>
            <td>${movie.gradeTitle}</td>
        </tr>
    </c:forEach>
    
</table>
<input type="button" id= "addNewActor" value="배우 등록"/>
<input type="button" id= "addNewMovie" value="영화 등록"/>
 
</body>
</html>

---

 

 

 

movie.jsp 에서 배우 등록 버튼을 클릭했을 때 addNewActor 로 넘어가도록 했다. 그러면 서블릿을 추가해주어야 한다.
AddNewActorServlet.java

package com.ktds.oph.web;
 
import java.io.IOException;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class AddNewActorServlet
 */
public class AddNewActorServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddNewActorServlet() {
        super();
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);    
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 배우명 등록시 발생된 에러가 있다면, 적절한 조치를 취한다.
        String errorCode = request.getParameter("errorCode");
        
        // null체크는 맨 처음 이페이지를 접속하면 errorCode가 null 이다.
        if ( errorCode !=null && errorCode.equals("1")) {
            request.setAttribute("ErrorMessage", "배우명을 등록하세요.");
        }
        else if ( errorCode !=null && errorCode.equals("2")) {
            request.setAttribute("ErrorMessage", "등록에 실패했습니다.");
        }
        RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/view/addNewActor.jsp");
        
        rd.forward(request, response);
    }
 
}
 

 

---

addNewActor.jsp 파일에 다음과 같이 내용을 적는다.
addNewActor.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/MOVIE/resource/js/jquery-1.12.1.js"></script>
<script type="text/javascript">
    
    $(document).ready( function() {
        
        $("#addNewActor").click( function() {
            
            // 유효성 검사 혹은 validation Check
//             if ( $("#actorName").val() == "" ) {
//                 alert("배우의 이름을 입력하세요.");
//                 // 밑에 있는거 더 이상 실행시키지 마라.
//                 return;
//             }
            var form = $("#addNewActorForm");
            
            // jQueryObject.attr("속성명", "속성 값");
            // attr = attribute
            form.attr("method", "POST");
            form.attr("action", "/MOVIE/addNewActorAction");
            // submit 하면 action 한 주소로 데이터를 넘김다.
            form.submit(); 
            
        } );
        
    } );
 
</script>
</head>
<body>
 
    <form id="addNewActorForm">
    
        ${ErrorMessage} 
        <input type="text" id="actorName" name="actorName" />
        <input type="button" id="addNewActor" value="등록 하기" />
        
    </form>
 
</body>
</html>

 

---

AddNewActorActionServlet.java

package com.ktds.oph.web;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.ktds.oph.dao.ActorDAO;
 
/**
 * Servlet implementation class AddNewActorActionServlet
 */
public class AddNewActorActionServlet extends HttpServlet {
    
    private static final long serialVersionUID = 1L;
    
    private ActorDAO actorDAO;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddNewActorActionServlet() {
        super();
        actorDAO = new ActorDAO();
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // get으로 오면 이렇게 반응한다.
        response.sendError(HttpServletResponse.SC_FORBIDDEN, "잘못된 요청입니다.");
        
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        String actorName = request.getParameter("actorName");
        
        // 혹시 모르니까 있어야 한다. 없으면 데이터베이스에 있는 데이터가 탈탈 털린다.
        // 해킹막는 기본
        if ( actorName == null || actorName.length() == 0 ) {
            response.sendRedirect("/MOVIE/addNewActor?errorCode=1");
            // 아래는 실행 시키지 않는다.
            return;
        }
        
        boolean insertResult = actorDAO.addNewActor(actorName);
        
        // insert한 count가 하나 이상이면 insert 성공했다면.
        if(insertResult) {
            response.sendRedirect("/MOVIE/movie");
        }
        else { // insert 실패했다면
            response.sendRedirect("/MOVIE/addNewActor?errorCode=2");
        }
        
    }
 
}