본문 바로가기
수업내용

20230608 수업내용🫡🫡🫡

by titlejjk 2023. 6. 9.

오늘도 첫 시작은 javascript..

input type checkbox로 부터 값을 서버에 받아올 때는 request.getParameterValues();로 값을 받아와 준다.request.getParameterValues(); 은 String 배열을 리턴해준다.

<fieldset>
                <legend>개인정보 활용 동의</legend>
                <div class="form-check form-switch">
                    <input type = "checkbox" class = "form-check-input" value = "yes" name = "allowEmail" id = "allowEmail">
                    <label for="allowEmail" class="form-check-label">이메일 수신여부</label>
                </div>
                <div class="form-check form-switch">
                    <input type = "checkbox" class = "form-check-input" value = "yes" name = "allowMessage" id = "allowMessage">
                    <label for="allowMessage" class="form-check-label">광고성 문자 수신여부</label>
                </div>
            </fieldset>

name 속성과 value 속성이 어떻게 쓰이는지배웠다.

체크박스의 체크 상태를 바꾸려면 javascript가 필요하다.

 

 <script>
        document.querySelector("#allowAll").addEventListener("click", (e)=>{
            let click = e.target.checked;
            if(click){
                 document.querySelector("#allowEmail").checked = true;
                 document.querySelector("#allowMessage").checked = true;
            }else{
                document.querySelector("#allowEmail").checked = false;
                document.querySelector("#allowMessage").checked = false;
            }
           
        })
    </script>

위에는 하나의 버튼으로 두개의 버튼을 동시에 켜지도록 동작하는 함수이다.

강사님의 풀이👉👉

<script>
        document.querySelector("#allowAll").addEventListener("change", (e)=>{
            //모두 동의 체크 여부를 알아낸다.
            const isChecked = e.target.checked;
            //클래스가 allow인 모든 요소의 참조값을 배열로 얻어내기
            const allows = document.querySelectorAll(".allow");
            //반복문 돌면서
            for(let i = 0; i<allows.length; i++){
                //모든 checkbox의 chek상태를 바꿔주기
                allows[i].checked = isChecked;
            }
        })
    </script>
 <script>
        document.querySelector("#allowAll").addEventListener("change", (e)=>{
            //모두 동의 체크 여부를 알아낸다.
            const isChecked = e.target.checked;
            //클래스가 allow인 모든 요소의 참조값을 배열로 얻어내기
            const allows = document.querySelectorAll(".allow");
            //반복문 돌면서
            allows.forEach((item)=>{   //forEach문 활용해보기
                item.checked = isChecked;
            });
        })
    </script>

ajax요청을 통해서 처리할 jsp 페이지를 따로 만들어야 한다.

json으로 전달 받을 때에는

로 변경해주어야한다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/file/private/upload_form2.jsp</title>
</head>
<body>
   <div class="container">
      <h3>파일 업로드 폼2 입니다.</h3>
      
      <form action="ajax_upload2.jsp" method="post" enctype="multipart/form-data" id="myForm">
         <div>
            <label for="title">제목</label>
            <input type="text" name="title" id="title"/>
         </div>
         <div>
            <label for="myFile">첨부파일</label>
            <input type="file" name="myFile" id="myFile"/>
         </div>
         <button type="submit">업로드</button>
      </form>
   </div>
   <script src="${pageContext.request.contextPath }/js/gura_util.js"></script>
   <script>
      //폼에 "submit" 이벤트가 일어 났을때 실행할 함수 등록
      document.querySelector("#myForm").addEventListener("submit", (e)=>{
         //폼 전송 막기 
         e.preventDefault();
         //폼에 입력하거나 선택한 정보를 javascript 로 직접 전송하기
         //폼에 입력한 데이터를 FormData 에 담고 
         let data=new FormData(e.target); //e.target 은 form 의 참조값이다.
         // fetch() 함수가 리턴하는 Promise 객체를 
         /*
         fetch("upload2.jsp",{
            method:"post",
            body:data
         })
         .then(res=>res.text())
         .then((data)=>{
        	 //data는 upload2.jsp 페이지가 응답한 JSON 형식의 문자열이다.
            console.log(data);
        	 //JSON.parse()함수를 이용해서 문자열을 실제 object or array 로 변환할 수 있다.
            const resuelt = JSON.parse(data);
        	 //result 는 object
            console.log(result);
         });
         */
         /*
         fetch("upload2.jsp",{
             method:"post",
             body:data
          })
          .then(res=>res.json())
          .then((data)=>{
         	 //data object 이다.
         	 console.log(data);
          });
         */
         
         //gura_util.js안에 있는 함수를 활용하면 아래와 같다.
         ajaxFormPromise(e.target)
          .then(res=>res.json())
          .then((data)=>{
         	 //data object 이다.
         	 console.log(data);
          });
      });
   </script>
</body>
</html>

편한대신 form의 action이나 method, enctype을 잘 적어주어야한다.

fetch 함수의 사용법과 ajaxFormPromise의 사용법을 알아보았다.

 

다음으로 test.signup_form.jsp화 signup.jsp를 만들어서 html을 이용한 jsp에서 값을 받아오는 코드를해보겠다.

먼저 오전에 실습했던 코드를 이클립스로 가져와 signup_form.jsp에 붙여넣어준다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/signup_form.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
        <h1>다양한 form 디자인</h1>
        <form action = "signup.jsp" method = "post"> 
            <div class = "form-floating mb-2">
                <input class = "form-control" type="text" name = "id" id = "id" placeholder="아이디 입력">
                <label class = "form-label" for="id">아이디</label>
            </div>
            <div class = "form-floating mb-2">
                <input class = "form-control" type="password" name = "pwd" id = "pwd" placeholder="비밀번호 입력">
                <label class = "form-label" for="pwd">비밀번호</label>
            </div>
            <select class = "form-select mb-2" id="job">
                <option value="">직업선택</option>
                <option value="programmer">프로그래머</option>
                <option value="doctor">의사</option>
            </select>
            <fieldset>
                <legend>성별 체크</legend>
                <div class = "form-check form-check-inline">
                    <input class = "form-check-input" value = "man" type="radio" id = "one" name = "gender" checked>
                    <label class = "form-check-label" for="one">남자</label>
                </div>
                <div class = "form-check form-check-inline">
                    <input class = "form-check-input" value = "woman" type="radio" id = "two" name = "gender">
                    <label class = "form-check-label" for="two">여자</label>
                </div>
            </fieldset>
            <fieldset>
                <legend>취미 체크</legend>
                <div class="form-check">
                    <input type = "checkbox" value = "piano" name = "hobby" class = "form-check-input" id = "piano">
                    <label class = "form-check-label" for = "piano">피아노</label>
                </div>
                <div class="form-check">
                    <input type = "checkbox" value = "game" name = "hobby" class = "form-check-input" id = "game">
                    <label class = "form-check-label" for = "game">게임</label>
                </div>
                <div class="form-check">
                    <input type = "checkbox" value = "etc" name = "hobby" class = "form-check-input" id = "etc">
                    <label class = "form-check-label" for = "ect">기타</label>
                </div>
            </fieldset>
            <fieldset>
                <legend>개인정보 활용 동의</legend>
                <div class="form-check form-switch">
                    <input type = "checkbox" class = "form-check-input is-invalid" name = "allowAll" id = "allowAll">
                    <label for="allowAll" class="form-check-label">전체 동의</label>
                </div>
                <div class="form-check form-switch">
                    <input type = "checkbox" class = "form-check-input allow" value = "email" name = "allowEmail" id = "allowEmail">
                    <label for="allowEmail" class="form-check-label">이메일 수신여부</label>
                </div>
                <div class="form-check form-switch">
                    <input type = "checkbox" class = "form-check-input allow" value = "message" name = "allowMessage" id = "allowMessage">
                    <label for="allowMessage" class="form-check-label">광고성 문자 수신여부</label>
                </div>
            </fieldset>
            <button class = "btn btn-outline-primary" type = "submit">가입</button>
        </form>
    </div>
    <script>
        document.querySelector("#allowAll").addEventListener("change", (e)=>{
            //모두 동의 체크 여부를 알아낸다.
            const isChecked = e.target.checked;
            //클래스가 allow인 모든 요소의 참조값을 배열로 얻어내기
            const allows = document.querySelectorAll(".allow");
            //반복문 돌면서
            allows.forEach((item)=>{
                item.checked = isChecked;
            });
        })
    </script>
</body>
</html>

그런 다음 test.signup.jsp에 받아올 값을 문자열로 바꿔줄 코드를 작성한다.

db에 저장할 때 gender는 gender라는 칼럼에 저장하면 된다

그렇지만 hobby 칼럼에는 어떻게 저장해야 할까? 취미를 두개 선택했으면 어떻게 할까? db에는 String배열을 저장할수는 없으니 고민해봐야한다. db에 저장했다가 다시사용해야 하는데 어떻게 해야할까?

JSON도 하나의 방법이다. 하지만 문제는 JSON은 자바 친화적이지 못하다.

또 다른 방법은 본인만의 형식으로 바꾸는 방법도 있다. 

예를들어 아무것도 선택을 안했으면 null을 저장해도 되고 piano를 선택했으면 piano, piano와 game을 선택했으면 piano/game이런식으로 저장을 해도 된다. 이렇게 db에 저장한 다음에 이 문자열을 스플릿해서 문자열을 얻어오는 방법도 있다.

//문자열에서 특정 문자("/")로 구분해서 String[]을 얻어내기

String[] result = hobbyResult.split("/");

//문자열에 특정 문자가 포함되어있는지 여부 알아내기

boolean isContain = hobbyResult.contains("xxx");

 

 링크를 눌렀을 때 아무동작을 안하도록 하려면 href = "javascript:"

 

'수업내용' 카테고리의 다른 글

20230609 수업내용🤣🤣🤣  (0) 2023.06.09
20230609 수업내용🤦‍♂️🤦‍♂️🤦‍♂️  (0) 2023.06.09
20230607 수업내용2🤷‍♀️🤷‍♀️🤷‍♀️🤷‍♀️  (1) 2023.06.07
20230607 수업내용🫡🫡🫡  (0) 2023.06.07
20230601 수업내용🫡🫡🫡  (0) 2023.06.01

관련글

댓글

티스토리툴바