728x90
webapp/index.jsp(웹페이지) <-> Filter <-> servlet <-> service <-> dao <-> sql
📌 회원 가입 HTML 만들기
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KH커뮤니티</title>
<link rel="stylesheet" href="../resources/css/main-style.css">
<link rel="stylesheet" href="../resources/css/singUp-style.css">
<script src="https://kit.fontawesome.com/7bc7245179.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<header>
<!-- 로고 : 클릭 시 메인페이지로 이동 -->
<section>
<a href="#"> <img src="resources/images/khlogo.jpg" id="home-logo">
</a>
</section>
<!-- header의 두번째 자식 div -->
<section>
<article class="search-area">
<!-- form내부 input 태그 값을 서버 또는 페이지로 전달 -->
<form action="#" name="search-form">
<!-- fielset : form 내부에서 input을 종료별로 묶는 용도로 많이 사용 -->
<fieldset>
<!-- query : 검색한값 -->
<input type="search" id="query" name="query" placeholder="검색어를 입력 해주세요."
autocapitalize="off">
<!-- 검색버튼 -->
<button type="submit" id="serach-btn" i class="fa-solid fa-magnifying-glass"></button>
</fieldset>
</form>
</article>
</section>
<section></section>
</header>
<nav>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유 게시판</a></li>
<li><a href="#">질문 게시판</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1:1 문의</a></li>
</ul>
</nav>
<!-- 회원가입 -->
<section class="signUp-content">
<form action="#" method="POST" name="signUp-form">
<label for="memberEmail">
<span class="required">*</span> 아이디(이메일)
<div class="signUp-input-area">
<input type="text" id="memberEmail" name="memberEmail" placeholder="아이디(이메일)" maxlength="30"
autocomplete="off" required>
<!-- autocomplete="off" : 자동완성 미사용 -->
<!-- required : 필수 작성 input 태그 -->
<button type="button">인증번호 받기</button>
</div>
<span class="signUp-message">메일을 받을 수 있는 이메일을 입력해주세요.</span>
</label>
<label for="emailCheck">
<span class="required">*</span> 인증번호
</label>
<div class="signUp-input-area">
<input type="text" id="emailCheck" name="emailCheck" placeholder="인증번호 입력" maxlength="6"
autocomplete="off">
<button type="button">인증하기</button>
</div>
<span class="signUp-message confirm">인증되었습니다.</span>
<label for="memberPw">
<span class="required">*</span> 비밀번호
</label>
<div class="signUp-input-area">
<input type="password" id="memberPw" name="memberPw" placeholder="비밀번호" maxlength="30">
</div>
<div class="signUp-input-area">
<input type="password" id="memberPwConfirm" placeholder="비밀번호 확인" maxlength="30">
</div>
<span class="signUp-message error">비밀번호가 일치하지 않습니다.</span>
<label for="memberNickname">
<span class="required">*</span> 닉네임
</label>
<div class="signUp-input-area">
<input type="text" id="memberNickname" name="memberNickname" placeholder="닉네임" maxlength="10">
</div>
<span class="signUp-message confirm">사용 가능한 닉네임 입니다.</span>
<label for="memberTel">
<span class="required">*</span> 전화번호
</label>
<div class="signUp-input-area">
<input type="text" id="memberTel" name="memberTel" placeholder="(- 없이 숫자만 입력)" maxlength="11">
</div>
<span class="signUp-message error">전화번호 형식이 올바르지 않습니다.</span>
<label for="memberAddress">
<span class="required">*</span> 주소
</label>
<div class="signUp-input-area">
<input type="text" id="memberAddress" name="memberAddress" placeholder="우편번호" maxlength="6">
<button type="button">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="도로명주소">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="상세주소">
</div>
<button type="submit" id="signUp-btn">가입하기</button>
</form>
</section>
</main>
<footer>
<p>Copyright ©KH Information Educational Institue M-Class</p>
<article>
<a href="">프로젝트 소개</a> <span> | </span> <a href="">이용약관</a> <span>
| </span> <a href="">개인정보처리방침</a> <span> | </span> <a href="">고객센터</a>
</article>
</footer>
</body>
</html>📌 회원 가입 CSS만들기
/* 회원가입 영역 */
.signUp-content{
display: flex;
justify-content: center;
}
/* 필수 */
.required{
color: red;
padding: 0 5px;
}
/* 회원가입 폼 */
form[name="signUp-form"]{
margin-top: 30px;
}
/* 회원가입 폼 내부 input 제목(label) */
form[name="signUp-form"] > label{
display: block;
margin-top: 40px;
font-size: 18px;
}
/* input을 감싸고 있는 div */
.signUp-input-area{
width: 500px;
height: 50px;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
display: flex;
align-items: center;
}
/* input에 포커스가 맞춰졌을 때 밑줄 색 변화 */
/* focus-within 내부 input에 포커스가 맞춰졌을때 */
.signUp-input-area:focus-within{
border-bottom: 2px solid #455ba8;
}
/* input 태그 */
.signUp-input-area > input{
width: 70%;
height: 100%;
padding: 15px 10px 5px;
font-size: 16px;
font-weight: bold;
border: 0;
outline: 0; /* input 선택 시 테두리 */
}
/* button 태그 */
.signUp-input-area > button {
width: 30%;
height: 70%;
background-color: white;
border: 1px solid gray;
cursor: pointer;
}
/* 회원가입 관련 메세지 */
.signUp-message{
font-size: 14px;
letter-spacing: -1px; /* 자간 */
}
.confirm{color: green;}
.error{color: red;}
/* 가입하기 버튼 */
#signUp-btn{
width: 100%;
padding: 10px;
margin: 50px 0;
border: 0;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #455ba8;
cursor: pointer;
}📌 회원 가입 Servlet 만들기
package edu.kh.community.member.controller;
import java.io.IOException;
import java.sql.Array;
import java.util.Arrays;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import edu.kh.community.member.model.service.MemberService;
import edu.kh.community.member.model.vo.Member;
@WebServlet("/member/signUp")
public class signUpServlet extends HttpServlet {
// GET 방식 요청 시 JSP로 바로 응답할 수 있도록 요청 위임
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String path = "/WEB-INF/views/member/signUp.jsp";
req.getRequestDispatcher(path).forward(req, resp);
}
// POST 방식 요청 시 회원가입 서비스 수행
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 파라미터를 모두 변수에 저장
String memberEmail = req.getParameter("memberEmail");
String memberPw = req.getParameter("memberPw");
String memberNickname = req.getParameter("memberNickname");
String memberTel = req.getParameter("memberTel");
// 주소는 3개의 input으로 이루어져 있으므로 배열로 전달 받음
// -> DB 컬럼은 1개이므로 배열을 하나의 문자열로 합칠 예정 지금은 address 받기
String[] address = req.getParameterValues("memberAddress");
//주소가 입력되지 않으면 null 이 아니라 빈칸 3개
String memberAddress= null;
if(!address[0].equals(" ")) {// 우편번호가 빈칸이 아니라면 == 주소작성
memberAddress = String.join(",,", address);
// String.join("구분자",배열)
// -> 배열요소를 하나의 문자열로 반환
// 요소사이에 구분자 추가
}
//파라미터 하나의 Member 객체 생성
Member mem = new Member();
mem.setMemberEmail(memberEmail);
mem.setMemberPw(memberPw);
mem.setMemberNickname(memberNickname);
mem.setMemberTel(memberTel);
mem.setMemberAddress(memberAddress);
try {
MemberService service = new MemberService();
//회원가입 서비스 호출 후 결과 반환 받기
int result = service.signUp(mem);
//서비스 결과에 따라서 message를 다르게 하여 메일 페이지 재요청(redirect)
HttpSession session = req.getSession();
if(result>0) { //성공
session.setAttribute("message", "회원가입 성공!");
}else {//실패
session.setAttribute("message", "회원가입 실패!");
}
//메인 페이지로 돌아간다. (최상위 객체)
resp.sendRedirect(req.getContextPath());
} catch (Exception e) {
e.printStackTrace();
}
}
}회원가입의 경우, DB에 데이터를 추가하는 것으로 1행이 추가되면 1행이 추가되었습니다! 라고 나오기 때문에 자료형 int로 받아야한다.
📌 회원 가입 service 추가
public int signUp(Member mem) throws Exception{
// 1) 커넥션 얻어오기
Connection conn = getConnection();
// 2) DAO 메소드 호출 후 결과 반환 받기
int result = dao.signUp(conn, mem);
// 3) 트랜잭션 처리
// result가 0인 경우 -> DAO return 구문 잘못 작성
if(result > 0) commit(conn);
else rollback(conn);
// 4) conn 반환(DBCP로 돌려주기)
close(conn);
// 5) 결과 반환
return result;
}📌 회원 가입 DAO 추가
/**
* @param conn
* @param mem
* @return reuslt
* @throws Exception
*/
public int signUp(Connection conn, Member mem) throws Exception {
int result =0;
try {
String sql = prop.getProperty("signUp");
pstmt=conn.prepareStatement(sql);
pstmt.setString(1, mem.getMemberEmail());
pstmt.setString(2, mem.getMemberPw());
pstmt.setString(3, mem.getMemberNickname());
pstmt.setString(4, mem.getMemberTel());
pstmt.setString(5, mem.getMemberAddress());
result = pstmt.executeUpdate();
}finally {
close(pstmt);
}
return result;
}
💡 executeUpdate > insert update delete 사용한다! ( ex. 1행이 추가 되었습니다. )
728x90
'ON > Servlet' 카테고리의 다른 글
| 비밀번호 암호화 하기 (0) | 2023.07.10 |
|---|---|
| Cookie / forward / Redirect 정리 (0) | 2023.07.10 |
| servlet 공부하기 (0) | 2023.07.05 |
| 통합연결 실습하기 (0) | 2023.07.05 |
| [Servlet] JSTL (0) | 2023.07.04 |
