개발 일기
Servlet 활용해서 회원가입 받기! (feat. HTML의 form으로 데이터를 POST 방식으로 넘겨주기) 본문
Servlet & JSP
Servlet 활용해서 회원가입 받기! (feat. HTML의 form으로 데이터를 POST 방식으로 넘겨주기)
개발 일기 2021. 8. 9. 23:46안녕하세요.
오늘은 html의 form태그를 활용하여 직접 회원 가입을 받아보는 행위를 할 수 있도록
html 코드와 java servlet 코드를 구현해 보겠습니다. (html 코드의 css는 수업 시간에 받은 자료를 활용했습니다!!)
1. HTML Form 태그로 회원 가입 시 수집 데이터 폼 만들기
<html>
<head>
<title>회원 가입</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3 align="center">◆◆◆ 회원가입 ◆◆◆</h3>
<form name="join" method="POST" action="join.do">
<table bgcolor="black" cellspacing="1" cellpadding="5" align="center">
<tr id="first-tr">
<th bgcolor="44ff44"><font size="2">아이디</font></th>
<td bgcolor="white" width="300"><input type="text" size="10"
name="id" class="TXTFLD"></td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">비밀번호</font></th>
<td bgcolor="white" width="300"><input type="password"
size="10" name="pass" class="TXTFLD1"></td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">비밀번호확인</font></th>
<td bgcolor="white" width="300"><input type="password"
size="10" name="repass" class="TXTFLD"></td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">이름</font></th>
<td bgcolor="white" width="300"><input type="text" size="10"
name="name" class="TXTFLD"></td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">주소</font></th>
<td bgcolor="white" width="300"><input type="text" size="30"
name="addr" class="TXTFLD"></td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">성별</font></th>
<td bgcolor="white" width="300">
<input type="radio" name="gender" value="M">
<font size="2">남자</font>
<input type="radio" name="gender" value="F" checked="checked">
<font size="2">여자</font>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">직업</font></th>
<td bgcolor="white" width="300">
<select name="job" size="1">
<option value="학생">학생</option>
<option value="주부">주부</option>
<option value="회사원">회사원</option>
<option value="사장">사장</option>
<option value="기타">기타</option>
</select>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">취미</font></th>
<td bgcolor="white" width="300">
<input type="checkbox" name="hobby" checked="checked" value="낮잠">낮잠
<input type="checkbox" name="hobby" value="연애">연애
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="사이클">사이클
<input type="checkbox" name="hobby" value="기타">기타
</td>
</tr>
<tr>
<th colspan="2" bgcolor="ff8888">
<input type="submit" value="가입">
<input type="reset" value="취소"></th>
</tr>
</table>
</form>
</body>
</html>-- 아이디, 비밀번호, 비밀번호확인, 이름, 주소, 성별, 직업, 취미 항목 만들기
화면 출력 시 UI
-- form을 활용하여 table을 구성
-- 성별은 한 가지만 선택이 가능한 type: radio 버튼, 취미는 여러가지 선택이 가능한 type: checkbox를 활용
-- 성별, 직업, 취미 등 옵션에 대해서는 디폴트값(최초값?고정값?)을 미리 선택 해 놓을 수 있다. (ex 여자, 낮잠)
2. 데이터를 받을 Servlet 구성
package com.itwill.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class JoinServlet
*/
@WebServlet("/join.do")
public class JoinServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.sendRedirect("05-03.form.html");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String pass = request.getParameter("pass");
String name = request.getParameter("name");
String addr = request.getParameter("addr");
String gender = request.getParameter("gender");
String job = request.getParameter("job");
//String hobby = request.getParameter("hobby");
String[] hobbies = request.getParameterValues("hobby");
out.println("<h1>가입정보</h1><hr>");
out.println("<ul>");
out.println("<li>아이디:"+id+"</li>");
out.println("<li>패스워드:"+pass+"</li>");
out.println("<li>이름:"+name+"</li>");
out.println("<li>주소:"+addr+"</li>");
out.println("<li>성별:"+gender+"</li>");
out.println("<li>직업:"+job+"</li>");
out.println("<li>취미:");
out.println("<ol>");
for(String hobby:hobbies) {
out.println("<li>"+hobby+"</li>");
}
out.println("</ol>");
out.println("</ul>");
}
}-- doGet 메소드 재정의하여 get방식으로 넘어올 경우 회원가입 화면으로 sendRedirect함
-- doPost 메소드를 활용하여 post방식으로 데이터를 받음
-- post로 넘어오는 데이터(파라미터)를 받아서 화면에 출력함
회원 가입 예시
회원가입 완료 시 출력 화면
현재는 DB와 연결지어 하지 않아서 수집되는 DB를 당장 어찌 할 순 없으나
앞으로 JSP와 자바스크립트를 배워서 데이터의 유효성 검사를하고 DB와 연결시켜 바로 데이터서버에 쌓는 액션까지
하는 코딩을 해보겠습니다!!
감사합니다.
'Servlet & JSP' 카테고리의 다른 글
| 쿠키(cookie)란?? (feat. JSP에서 쿠키 설정(cookie )하는 법) (0) | 2021.08.12 |
|---|---|
| JSP(JavaServer Pages)란?? (feat. JSP파일 실행 시 Servlet 소스 파일 생성 위치) (0) | 2021.08.11 |
| 웹에서 회원가입을 받아 직접 DB에 넣어보자!! (feat. DTO, HTML, SERVLET 총 출동) (0) | 2021.08.10 |
| Servlet(서블릿) POST방식으로 데이터 전달 받아 로그인 연습! (0) | 2021.08.06 |
| JAVA Servlet(서블릿)이란?? (feat. form을 활용하여 get방식으로 login해보기) (0) | 2021.08.04 |
'Servlet & JSP' Related Articles
more
Comments