-
JSP 체크박스(Check box), 셀렉트(Select), 옵션(Option) 예제Web/JSP, JavaScript 2018. 9. 3. 17:13
JSP 체크박스(checkbox), 셀렉트/옵션(select/option) 는 웹사이트를 구성하는 데 필수적인 태그들이다. 실무 사용 패턴 포스팅
1. 체크박스
빨간 박스 부분으로 태그당 하나가 생성된다. 체크박스의 특징은 특정한 데이터만을 취사선택 할 수 있다는 것이다. JSP에서는 이를 지원하기 위해 name 속성을 제공한다. 같은 name 속성을 가지고 있는 태그들의 값을 서블릿에서 String 배열로 받을 수 있다. 서블릿은 배열을 받기 위해 사용하던 메소드 request.getParameter 대신 request.getParameterValues를 사용한다.
2. 셀렉트 / 옵션
셀렉트는 녹색 박스 부분으로 여러가지 옵션 들 중 하나를 선택할 수 있는 박스를 의미한다. 여기서 셀렉트는 옵션들을 관리할 수 있는 상위 태그로 생각하면 된다. 셀렉트 태그만 있으면 의미가 없고, 옵션 태그들이 함께 사용되어야 한다.※ 셀렉트 태그만 선언했을 경우 다음과 같이 안에 값들이 없다. 따라서 이를 사용하는 의미가 없다.
해당 화면 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>/WEB-INF/view/user/list</title> <script type="text/javascript" src="/melon-admin/static/js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $().ready(function(){ $("#selectForm").find("input[type=button]").click(function(){ $("#selectForm").attr({ "method": "post", "action": "/melon-admin/user/selectModify" }); $("#selectForm").submit(); }); $("#checkBoxBtn").click(function(){ $("#selectForm").attr({ "method" : "post", "action" : "/melon-admin/user/checkedUserModify" }); $("#selectForm").submit(); }); }); </script> </head> <body> <form id="selectForm"> <table> <tr> <th> </th> <th>번호</th> <th>ID</th> <th>이름</th> <th>Point</th> <th>권한</th> </tr> <c:forEach items="${userList }" var="user"> <tr> <td><input type="checkbox" name="checkedUserId" value="${user.userId }" /></td> <td>${user.index }</td> <td>${user.userId }</td> <td> <a href="/melon-admin/user/detail?userId=${user.userId }">${user.userName }</a> </td> <td>${user.userPoint }</td> <td>${user.authorizationVO.authorizationName }</td> </tr> </c:forEach> </table><br/> <input type="button" id="checkBoxBtn" value="체크박스 수정" /> <select name="beforeAuth" > <option value="">권한없음</option> <c:forEach items="${authList}" var="auth"> <option value="${auth.authorizationId}">${auth.authorizationName }</option> </c:forEach> </select> 권한을 <select name="afterAuth"> <option value="">권한없음</option> <c:forEach items="${authList}" var="auth"> <option value="${auth.authorizationId}">${auth.authorizationName }</option> </c:forEach> </select> 권한으로 <input type="button" id="optionAuthBtn" value="일괄수정" /> </form> <form id="searchForm"> ${pager } </form> </body> </html>Select 태그는 name 속성을 통해 서버에서 접근 가능하다. 접근했을 때의 값은 선택을 해 둔 옵션 태그의 value로 받아오는 것이다. "권한없음" 옵션을 선택했을 경우 "권한없음"이 아니라 해당 태그의 value로 설정해둔 ""를 서버가 받을 수 있는 것이다.
checkbox 태그 또한 name 속성을 통해 서버에서 접근 가능하다. 앞서 말했듯 같은 name을 가지고 있는 체크박스 태그들의 value들을 String 배열로 서버에 전달한다. 이를 처리하는 예제 서블릿을 보자체크를 한 회원들에 대해서만 새내기 회원으로 권한을 변경한다. 앞의 셀렉트와 일괄수정 태그는 다른 서블릿이 처리하기 때문에 신경쓰지 않아도 된다. 체크박스 수정 버튼을 누르면
다음과 같이 권한이 바뀐다. 서블릿을 보자
package com.melon.admin.user.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.melon.admin.authorization.biz.AuthorizationBiz; import com.melon.admin.authorization.biz.AuthorizationBizImpl; import com.melon.admin.user.service.UserService; import com.melon.admin.user.service.UserServiceImpl; public class DoCheckedUserModifyActionServlet extends HttpServlet { private static final long serialVersionUID = 1L; private UserService userService; private AuthorizationBiz authBiz; public DoCheckedUserModifyActionServlet() { userService = new UserServiceImpl(); authBiz = new AuthorizationBizImpl(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String[] userList = request.getParameterValues("checkedUserId"); String afterAuthId = request.getParameter("afterAuth"); System.out.println("afterAuthId : " + afterAuthId); if(userList == null || userService.renewCheckedAuth(userList, afterAuthId) ){ System.out.println("변경 완료"); response.sendRedirect("/melon-admin/user/list"); }else { System.out.println("변경 실패"); response.sendError(500); } } }중요한 부분은 request 객체의 메소드 호출부이다. 체크박스 태그의 값들에 대해 String 배열로 받는다는 점이 셀렉트 태그 등 일반적인 태그들과 다른 점이다. 체크박스에 체크된 사용자들의 ID, 바꿀 권한의 ID를 태그들의 value로 설정했기 때문에 DB에 접근해 이를 갱신하는 메소드를 Service 단에서 작성할 수 있다.
'Web > JSP, JavaScript' 카테고리의 다른 글
자바스크립트(Java Script) 문법 예제 (0) 2018.09.03 JSP 예제 (0) 2018.09.03
