WEB(09) - jsp form - 수업 40일차
목차
JSP
이전 수업에서는 처음 접하는 시점이기에 개념 중점의 수업이었다면, 이번에는 jsp를 사용해보며 익숙해지는 것에 초점을 두고 진행했습니다.
강사님께서 사용 문법과 요구 사항을 알려주시면 그에 맞게 코드를 짜보는 방식이었고, 간단한 문제들이지만 아직 낯선 jsp 문법에 친숙해질 수 있는 시간이었습니다.
대부분의 태그들은 javascript나 servlet 수업에서 다뤄본 기능들이어서 이번 글에서는 jsp 태그에 중점을 두고 살펴보겠습니다.
post
post방식을 활용해서 사용자가 데이터를 입력하고 전송을 누르면 전송받은 페이지에서 데이터를 출력하는 연습을 해보겠습니다.
사용자가 이름, 나이를 입력하고 전송하면 데이터를 전송받은 페이지에서 나이에 맞게 메세지를 출력합니다.
1
2
3
4
5
6
7
8
9
19세 이상이면 성인, 미만이면 미성년이 출력되도록 한다.
ex)
성인
이름: 홍길동
나이: 20세
미성년
이름: 삼척동자
나이: 5세
다음과 같이 form 태그를 만들겠습니다.
1
2
3
4
5
<form method="post" action="step3-2-action.jsp">
<input type="text" name="userName" placeholder="이름" required="required"><br>
<input type="number" name="userAge" placeholder="나이" required="required" min="1"><br>
<button>전송</button> <!-- 버튼 타입 default: submit -->
</form>
사용자가 이름과 나이를 입력하면 step3-2-action.jsp로 데이터가 전송됩니다.
바디태그에 들어간 내용만 살펴보면 다음과 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<%
//post 요청 메서드는 별도의 한글 처리가 필요
request.setCharacterEncoding("utf-8");
String name = request.getParameter("userName");
int age = Integer.parseInt(request.getParameter("userAge"));
%>
<%if (age > 19) {%>
<%="성인"%>
<%} else {%>
<%="미성년"%>
<%}%>
<br> 이름:<%=name%>
<br> 나이:<%=age%>
post 요청 메서드는 별도의 한글 처리가 필요하기 때문에 두번째 라인을 보시면 한글 처리를 위해 utf-8 설정을 합니다.
그리고 전송받은 데이터를 활용하기 위해 request.getParameter() 메서드를 활용해서 userName과 userAge에 해당하는 데이터를 불러옵니다.
6번 라인부터 10번 라인은 if else문을 사용해서 불러온 age값에 따른 “성인” or “미성년”을 출력하고 11, 12번 라인에서는 이름과 나이를 저장한 데이터를 활용해 출력합니다.
radio
사용자가 음식 메뉴를 고른 후 주문 버튼을 하면 다른 페이지로 이동해서 고른 메뉴명과 주문완료라는 문구가 출력하도록 하는 예제입니다.
음식 메뉴는 ArrayList<String> 타입으로 list를 먼저 만들어서 제공합니다.(실제로는 DB를 연동해서 사용하겠지만 jsp를 연습하는 간단한 예제이므로 이와 같이 진행합니다)
1
2
3
4
5
6
<%
ArrayList<String> list=new ArrayList<String>();
list.add("짜장면");
list.add("짬뽕");
list.add("탕수육");
%>
데이터들을 반복문을 통해 사용자에게 보여주고, 메뉴를 한 가지 선택해서(radio는 한 가지 선택만 가능) 주문 버튼으로 데이터를 전송할 수 있도록 합니다.
1
2
3
4
5
6
7
<form action="step4-2-radio-action.jsp" method="post">
<%for (int i = 0; list.size(); i++) {%>
<input type="radio" name="menu" value="<%=list.get(i)%>" required="required"><%=list.get(i)%>
<br>
<%}%>
<input type="submit" value="주문">
</form>
메뉴를 선택하면 step4-2-radio-action.jsp로 이동하며 post방식으로 전송합니다.
예를 들어 사용자가 짜장면을 주문했다면 다음과 같이 출력됩니다.
for loop로 menu를 만드는데 저장값과 출력값은 동일하게 위에서 저장한 리스트의 값을 가져와서 사용합니다.
그리고 전송한 데이터는 다음과 같이 값이 하나만 오기에 getParameter()메서드를 사용해서 출력하면 됩니다.
1
2
3
4
5
<body>
<%request.setCharacterEncoding("utf-8");%>
<%=request.getParameter("menu")%>
주문완료!
</body>
select
: select 기능은 option 리스트를 제공합니다.
form 안에 select 창을 만들고 그 안에 option 항목으로 선택지를 만들어 사용합니다.
예제로는 지하철 호선을 고른 뒤 선택을 누르면 데이터를 전송하도록 해보겠습니다.
1
2
3
4
5
6
7
8
9
<form action="step5-2-select-action.jsp">
<select name="line" required="required">
<option value="">-호선-</option>
<%for(int i=1;i<=9;i++){ %>
<option value="<%=i%>"><%=i%>호선</option>
<%}%>
</select>
<button>선택</button>
</form>
사용자가 선택한 option을 알기 위해서는 select에 접근해야 하기 때문에 select의 name을 line으로 할당했습니다.
그리고 3번 라인에서는 기본 선택지를 설정했고, 4번 라인부터 반복문을 통해 사용자에게 입력을 요구하는 각 호선을 작성했습니다.
사용자가 버튼을 누르면 action의 링크로 이동해 사용자가 선택한 호선 수에 따라 1~4호선은 “코레일 ?호선 선택하셨습니다”, 5호선부터는 “도시철도 ?호선 선택하셨습니다”가 출력되도록 하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
<body>
<%
int line=Integer.parseInt(request.getParameter("line"));
String name=null;
if(line<5)
name="코레일";
else
name="도시철도";
%>
<%=name%> <%=line%>호선 선택하셨습니다.
</body>
select에 접근해서 사용자가 선택한 값을 int형으로 전달받은 뒤 조건문을 통해 값을 비교할 수 있도록 코드를 작성했습니다.
이번에는 추가적으로 위의 예제에 onchange기능을 사용해보겠습니다.
submit 없이 option을 선택한 즉시 서버로 전송되도록 하는 이벤트 속성입니다.
1
2
3
4
5
6
7
8
<form action="step5-2-select-action.jsp" id="subway">
<select name="line" id="line" required="required" onchange="sendLine()">
<option value="">-호선-</option>
<%for (int i = 1; i <= 9; i++){%>
<option value="<%=i%>"><%=i%>호선</option>
<%}%>
</select>
</form>
위와 같이 form을 작성합니다. 해당 폼과 셀렉트를 특정해야 하기 때문에 각각 id를 지정한 모습입니다.
그리고 아래와 같이 js 기능을 작성합니다.
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function sendLine() {
let lineComp = document.getElementById("line");
if (lineComp.value != "") {
//subway id form을 submit한다
document.getElementById("subway").submit();
}
}
</script>
선택할 때 default 값으로 설정하기 위해 만들어둔 빈 공백 값은 선택되어선 안 되기 때문에 다른 값들만 입력받도록 조건문을 사용한 모습입니다.
그리고 데이터를 넘겨줄 때에는 특정 option값이 아닌, form 전체의 데이터를 넘겨줍니다.
위와 같이 코드를 작성하면 버튼 없이 기존과 다른 값을 선택하는 것 만으로 전송을 할 수 있습니다.
checkbox
전에 여러 번 다뤄본 checkbox 기능을 jsp로 연습해보겠습니다.
데이터는 음식 이름으로 ArrayList<String> 타입의 list에 추가해주겠습니다.
1
2
3
4
5
6
<%
ArrayList<String> list = new ArrayList<String>();
list.add("마라탕");
list.add("라면");
list.add("고기국수");
%>
메뉴 테이블은 다음과 같이 for문으로 간단하게 작성 가능합니다.
1
2
3
4
5
6
7
<form action="step6-2-checkbox-action.jsp" method="get"
onsubmit="return checkMenu()">
<%for (int i = 0; i < list.size(); i++) {%>
<input type="checkbox" name="menu" value="<%=list.get(i)%>"><%=list.get(i)%><br>
<%}%>
<input type="submit" value="주문">
</form>
여기서 onsubmit 속성을 추가해줬습니다.
checkbox 기능은 다중 선택이 가능한데, 저녁 메뉴를 안 고른 상태에서 전송한다면 의미가 없으므로 js 스크립트로 checkMenu()기능을 만들어 줍니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function checkMenu() {
let flag = false;
let ma = document.getElementsByName("menu");
for (let i = 0; i < ma.length; i++) {
if (ma[i].checked) {
flag = true;
break;
}
}
if(!flag)alert("메뉴를 선택하세요!")
return flag;
}
</script>
이렇게 전송한 데이터는 테이블 형식으로 보여주도록 하겠습니다. css를 사용해서 꾸미는 작업은 전에 해봤기 때문에 body 태그의 내용만 기술하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%String[] list = request.getParameterValues("menu");%>
<table>
<thead>
<tr>
<th>NO</th>
<th>MENU</th>
</tr>
</thead>
<tbody>
<%for (int i = 0; i < list.length; i++) {%>
<tr>
<td><%=i + 1%></td>
<td><%=list[i]%></td>
</tr>
<%}%>
</tbody>
</table>
메뉴가 여러 개일 수 있으므로 배열을 반환받는 getParameterValues()메서드를 사용합니다.
테이블은 순서에 맞게 전에 작성했던 것처럼 진행하고, 저희는 메뉴와 수량을 반복해서 출력해야 하기 때문에 <tbody>부분에서 반복문을 사용해주시면 됩니다.
location
마지막 예제입니다.
입력된 나이에 따라 location을 사용해서 지정된 링크로 이동하고, query string도 사용해보도록 하겠습니다.
1
2
3
4
19세 이상이면
"OOO님 즐거운 성인영화 관람되세요!"
19세 미만이면
alert() 사용, "OOO님 나이 더 먹고 오세요!"
위와 같이 출력되도록 합니다.
1
2
3
4
5
<form action="step7-2-location-action.jsp" method="post">
<input type="text" name="userName" placeholder="이름" required="required">
<input type="number" name="userAge" placeholder="나이" min="1" required="required">
<button>입장하기</button>
</form>
이제 첫번째 페이지에서 이름과 나이를 입력받았다면 아래와 같이 나이에 따라 알림창을 띄우거나, 특정 링크로 이동시킵니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("userName");
int age = Integer.parseInt(request.getParameter("userAge"));
if (age >= 19) {
%>
<%=name%>님 즐거운 성인영화 관람되세요!
<%} else {%>
<script type="text/javascript">
alert("<%=name%>님 나이 더 먹고 오세요!");
location.href="step7-3-child.jsp?name=<%=name%>";
</script>
<%}%>
나이는 연산을 해야 하기 때문에 int형으로 형변환해서 저장하고, 특이점이 있다면 else구문 안에 스크립트를 작성하는 부분입니다.
만약 헤더 부분에 자바스크립트를 작성한다면 방금 사용한 데이터들을 새롭게 불러온 뒤 기능을 작성하고, 다시 그 기능을 호출해야지만 사용이 가능할 것 입니다. 상당히 번거로운 작업이 예상됩니다.
그런데 위의 그림과 같이 필요한 위치에서 바로 스크립트를 작성하면 else문 안에서 작동이 되기 때문에, 필요 자원을 별 다른 처리 없이 바로 사용할 수 있습니다.
그리고 location 기능으로 링크를 주는데, 쿼리 스트링으로 작성해 form 작성 없이 이름 데이터를 url로 전송시켜주는 것으로 이번 예제를 마치겠습니다.
댓글남기기