Sanji(상디)의 애니 천국: 회원가입 form 태그에 있는 데이터를 처리하는 예제

안녕하세요

이번 시간에는 회원가입 할 때 쓰는 폼을 만들어, 그 안에 데이터를 넣고

그 결과를 처리하는 예제를 올려봅니다.

지금 이름, 아이디, 건의사항, 취미 등등 이런한 각종 필드는 <form> 태그로 감싸져 있습니다.

즉 이 <form> 안에 있는 데이터들을 처리하면 회원가입과 같은 처리가 되는 것 입니다.

큰 틀로 보면 단순합니다만, 그 구성을 만드는게 쉽지는 않죠

뭐 다른 프로그래밍에 비하면 쉬운편에 속하지만요;;

일단 저 위의 폼을 갖추는 소스는 아래와 같습니다

=========================================================

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09form양식1.html</title>
</head>
<body>




<form action="ex09Result.jsp" method="POST">
이름: <input type="text" name="userName"><p>
아이디: <input type="text" name="userId"><p>
비밀번호:<input type="password" name="pwd"><p>
성별(라디오 버튼-단일 선택):
<input type="radio" name="gender" value="M" checked>남자
<input type="radio" name="gender" value="F">여자<p>
취미(체크박스-다중 선택):
<input type="checkbox" name="hobby" value="reading" checked>
독서
<input type="checkbox" name="hobby" value="movie">영화감상
<input type="checkbox" name="hobby" value="music">음악감상
<input type="checkbox" name="hobby" value="sports">스포츠<p>
드롭다운 리스트:
<select name="job">
<option value="sales">SALES</option>
<option value="manager">MANAGER</option>
<option value="clerk" selected>CLERK</option>
</select><p>
리스트 박스:
<select name="lang" size="4" multiple>

<option value="JAVA">JAVA</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JSP">JSP</option>
</select><p>
건의사항:
<textarea name="comment" rows="5" cols="40"></textarea>
<p>

히든필드(데이터를 숨겨 보내고자 할 때):
<input type="hidden" name="mydata" value="Top Secret"><p>
파일업로드:
<input type="file" name="photo"><p>

<input type="submit" value="회원가입">

<input type="reset" value="다시쓰기">

<input type="button" value="일반버튼"
onclick="alert('안녕??')">

<a href="javascript:alert('반가워요')"><img src="./images/딸기 쉐이크.PNG"></a>
<input type="image" src="./images/맥윙 2조각.PNG">

</form>

</body>
</html>

사실 저 위에서 중요한 소스는 이 한줄입니다

<form action="ex09Result.jsp" method="POST">

전송 버튼을 누르면 폼 액션을 ex09Result.jsp로 보내어 처리하는것이고

방식은 post 방식으로 비밀번호 같은 중요한 데이터가 url에 노출되지 않게 처리하는

뜻입니다.

=========================================================

이제 진짜 중요한 소스는 ex09Result.jsp 입니다.

ex09.jsp에서 보낸 폼 데이터를 처리하는 소스입니다.

잘 봐주세요~!

=========================================================

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>



<%
//POST 방식의 한글처리
request.setCharacterEncoding("UTF-8");

// 이름, 아이디, 비밀번호, 성별, 취미 값을 받아 출력해보세요
String name=request.getParameter("userName");
String id=request.getParameter("userId");
String pwd=request.getParameter("pwd");
String gender=request.getParameter("gender");
//String hobby=request.getParameter("hobby"); [x]
//다중 선택값을 갖는 파라미터는 String[] 배열로 받는다.
String[] hobbyArr=request.getParameterValues("hobby"); // 여러개의 값들은 Values를 추가한다

//job, lang, comment, mydata 값 받아 출력하세요
String job=request.getParameter("job");
String[] langArr=request.getParameterValues("lang");
String comment=request.getParameter("comment");
String mydata=request.getParameter("mydata");
%>

<h2><b>이름 : <%=name%></b></h2>
<h2><b>아이디 : <%=id%></b></h2>
<h2><b>비밀번호 : <%=pwd%></b></h2>
<h2><b>성별 : <%=gender%></b></h2>
<h2><b>취미 :


<%if(hobbyArr!=null){ // NullPointerException을 방지하기 위해 기술
for(String h:hobbyArr){
out.println(h+", ");
}
}//if-------------
%>
</b></h2>
<h2><b>직업: <%=job%></b></h2>
<h2><b>언어:

<%if(langArr!=null){
for(String l:langArr){
out.println(l+", ");
}
}
%>
</b></h2>

<H2><b>건의사항 : <%=comment%></b></H2>
<h2><b>비밀데이터 : <%=mydata%></b></h2>

=========================================================

자 이렇게 해서 위의 소스 코드를 실행하면..

하타케 카카시가 제 회원가입 페이지에 가입을 했네요

비번을 1로 하고 ㅋㅋ

보안이 허술하네요~

회원가입 form 태그에 있는 데이터를 처리하는 예제

댓글 1개: