본문 바로가기
Servlet&JSP

Step02_DB (폼)

bono.html 2022. 8. 19. 10:30

 

/test/form.jsp

폼태그 작성 요령에 대하여 파악하는 것이 가장 중요하다

 

animate 사이트를 참조하여 시작할때와 버튼에 마우스 오버했을때 동작하는 기능 추가하였다.

https://animate.style/

사이즈 조절과 정렬

그림자효과

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/form.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- animate css 로딩 -->
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<style>
   form legend{
      font-size: 1rem;
   }
   /* 특정 요소에 애니메이션 적용 시간을 커스터 마이징 할수도 있다. */
   .animate__zoomInLeft{
      animation-duration: 0.5s;
      animation-iteration-count: 2;
   }
</style>
</head>
<body>
<div class="container">
   <div class="row">
      <div class="col-md-6 offset-md-3 animate__animated animate__zoomInLeft">
         <h1>테스트 폼 입니다.</h1>
         <form action="signup.jsp" method="post" class="shadow p-3 rounded">
            <div class="mb-2">
               <label class="form-label" for="email">이메일</label>
               <input class="form-control" type="text" name="email" id="email"/>
            </div>
            <div class="mb-2">
               <label class="form-label" for="comment">할말</label>
               <textarea class="form-control" name="comment" id="comment"></textarea>
            </div>
            <div class="mb-2">
               <label class="form-label" for="job">직업</label>
               <select class="form-control" name="job" id="job">
                  <option value="">선택</option>
                  <option value="programmer">프로그래머</option>
                  <option value="teacher">선생님</option>
                  <option value="doctor">의사</option>
                  <option value="etc">기타</option>
               </select>
            </div>
            <div class="mb-2">
               <fieldset>
                  <legend>관심사 체크</legend>
                  <div class="form-check">
                     <label>
                        <input class="form-check-input" type="checkbox" name="concern" value="reading"/> 
                        독서
                     </label>   
                  </div>
                  <div class="form-check">
                     <label>
                        <input class="form-check-input" type="checkbox" name="concern" value="game"/> 
                        게임
                     </label>
                  </div>
                  <div class="form-check">
                     <label>
                        <input class="form-check-input" type="checkbox" name="concern" value="cooking"/> 
                        요리
                     </label>
                  </div>
               </fieldset>
            </div>
            <div class="mb-2">
               <fieldset>
                  <legend>성별 체크</legend>
                  <div class="form-check form-check-inline">
                     <label>
                        <input class="form-check-input" type="radio" name="gender" value="man" checked/>
                        남자
                     </label>
                  </div>
                  <div class="form-check form-check-inline">
                     <label>
                        <input class="form-check-input" type="radio" name="gender" value="woman"/>
                        여자
                     </label>
                  </div>
               </fieldset>
            </div>
            <button id="submitBtn" class="btn btn-primary" type="submit">전송</button>
         </form>      
      </div>
   </div>
</div>
<script>
   //특정 요소에 이벤트가 발생했을때 실행할 함수 등록
   document.querySelector("#submitBtn").addEventListener("mouseover", function(){
      //원하는 애니메이션 클래스를 추가해서 애니메이션을 동작 시킨다. 
      this.classList.add("animate__animated");
      this.classList.add("animate__pulse");
   });
   //특정 요소에 애니메이션이 끝나는 이벤트가 발생했을때 실행할 함수 등록 
   document.querySelector("#submitBtn").addEventListener("animationend", function(){
      //추가 했던 클래스를 제거해야지만 다음번에 클래스를 추가 했을때 또 애니메이션이 동작한다.
      this.classList.remove("animate__animated");
      this.classList.remove("animate__pulse");
   });
</script>
</body>
</html>

아래의 bootstrap 코드를 사용해서 사이즈 조절과 정렬을 했다.

row
col-md-6 offset-md-3

아래의 bootstrap 코드를 사용해서 그림자 효과를 줬다.

shadow p-3 rounded

 

 

 

/test/signup.jsp

form.jsp 에서 사용자가 입력한 내용을 그대로 가져와서 보여주는 역할을 한다.

request.getParameter, request.getParameterValues 를 사용하여 값을 전달 받았고 value, selected, checked 등으로 선택된 값을 표현하였다.

이때 어떤 값을 표현할지를 정하는 코드에 관하여, 폼 종류별로 어떤 차이가 있는지에 관하여 초점을 맞춰 학습해야한다.

 

<%@page import="java.util.List"%>
<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
   //한글깨지지 않도록
   request.setCharacterEncoding("utf-8");

   /*
      폼 전송되는 모든 내용을 추출해서 아래에 정보를 출력한다.
   */
   
   //입력한 email, comment, job, concern, gender 파라미터 모두 읽어오기 
   String email=request.getParameter("email");
   String comment=request.getParameter("comment");
   String job=request.getParameter("job");
   String[] concern=request.getParameterValues("concern");
   //만일 concern 이 null 이라면
   if(concern == null){
      concern=new String[0]; //빈 배열의 참조값을 넣어준다.
   }
   String gender=request.getParameter("gender");
   
   //String[] 을 List<String> 으로 변환하기 
   //변환하면 .contains() 메소드를 활용할수 있다. 
   List<String> list=Arrays.asList(concern);
   
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/signup.jsp</title>
</head>
<body>
<div class="container">
   <h1>전송된 정보는 아래와 같습니다.</h1>
   <div>
      <label for="email">이메일</label>
      <input type="text" name="email" id="email" value="<%=email%>"/>
   </div>
   <div>
      <label for="comment">할말</label>
      <textarea name="comment" id="comment"><%=comment %></textarea>
   </div>
   <div>
      <label for="job">직업</label>
      <select name="job" id="job">
         <option value="">선택</option>
         <option value="programmer" <%=job.equals("programmer")?"selected":""%>>프로그래머</option>
         <option value="teacher" <%=job.equals("teacher")?"selected":""%>>선생님</option>
         <option value="doctor" <%=job.equals("doctor")?"selected":""%>>의사</option>
         <option value="etc" <%=job.equals("etc")?"selected":""%>>기타</option>
      </select>
   </div>
   <div>
      <fieldset>
         <legend>관심사 체크</legend>
         <label>
            <input type="checkbox" name="concern" value="reading" <%=list.contains("reading")?"checked":"" %>/> 
            독서
         </label>
         <label>
            <input type="checkbox" name="concern" value="game" <%=list.contains("game")?"checked":"" %>/> 
            게임
         </label>
         <label>
            <input type="checkbox" name="concern" value="cooking" <%=list.contains("cooking")?"checked":"" %>/> 
            요리
         </label>
      </fieldset>
   </div>
   <div>
      <fieldset>
         <legend>성별 체크</legend>
         <label>
            <input type="radio" name="gender" value="man" <%=gender.equals("man")?"checked":"" %>/>
            남자
         </label>
         <label>
            <input type="radio" name="gender" value="woman" <%=gender.equals("woman")?"checked":"" %>/>
            여자
         </label>
      </fieldset>
   </div>
</div>
</body>
</html>

 

저작자표시 (새창열림)

'Servlet&JSP' 카테고리의 다른 글

Step03_Scope (HttpSession)  (0) 2022.08.19
Step03_Scope (request, response, session 정의 및 메소드 정리)  (0) 2022.08.19
Step02_DB (할일목록 todo 페이지 최종)  (0) 2022.08.17
Step02_DB (회원목록 member 페이지 최종)  (0) 2022.08.17
Step02_DB (include 자주 사용하는 부분 jsp로 분리하기, 삼항연산자)  (0) 2022.08.17

'Servlet&JSP' Related Articles

티스토리툴바