3. 관리 페이지 만들기
(1) 주소 체계 : xml
📌 web.xml
다시 강조하지만 web.xml은 폴더 안에 있는 게 아니라 WebContent/WEB-INF/web.xml 에 있는 거다.
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<servlet-name>front</servlet-name>
<servlet-class>FrontAppServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>front</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>member</servlet-name>
<servlet-class>member.MemberServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>member</servlet-name>
<url-pattern>*.mem</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>board</servlet-name>
<servlet-class>board.BoardServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>board</servlet-name>
<url-pattern>*.board</url-pattern>
</servlet-mapping>
</web-app>이런 식으로 보면 *.mem, *.board 라고 적혀 있는데 만약 마지막 주소가 .mem라면 memberServlet, boardServlet 으로 연결된다는 뜻이다.
(2) Servlet 관계
meberIndex
귀여운 별수호자 조이...
📌 memberServlet.java
package member;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MemberServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("EUC-KR");
resp.setContentType("text/html; charset=EUC-KR");
String url = req.getRequestURI();
String path = req.getContextPath();
String cmd = url.substring(path.length());
MemberCommandFactory factory = MemberCommandFactory.getInstance();
CommandIf cmdIf = factory.createCommand(cmd);
String nextPage = (String)cmdIf.processCommand(req, resp);
RequestDispatcher view = req.getRequestDispatcher(nextPage);
view.forward(req, resp);
}
}만약 index.jsp 에서 가장 member를 누르면 member.do 에 의해 memberServlet -> memberindex로 으로 가장 먼저 이동한다.
📌 index_Member.jsp
top, bottom 다 붙여서 한 번에 넣을 거임.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!-- top.jsp -->
<html>
<head>
<title>멤버관리</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function checkMember(){
window.open("memberSsn.mem", "check", "width=640, height=400")
}
</script>
</head>
<body>
<div align="center">
<table border="1" width="800" height="600">
<tr height="10%">
<th width="20%"><a href="javascript:checkMember()">회원가입</a></th>
<th width="20%"><a href="member_list.mem">회원보기</a></th>
<th width="20%"><a href="member_find.mem">회원찾기</a></th>
<th width="20%">로그인</th>
<th width="20%">메인페이지</th>
</tr>
<tr height="80%">
<td colspan="5">
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<img src="imgs/joy_star.PNG" width="100%" height="100%">
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!-- bottom.jsp -->
</td>
</tr>
<tr height="10%">
<td colspan="5" align="center">Gahyun's Coding Academy</td>
</tr>
</table>
</div>
</body>
</html>
📌 MemberCommandFactory.java (1)
package member;
public class MemberCommandFactory {
private MemberCommandFactory() {}
private static MemberCommandFactory instance = new MemberCommandFactory();
public static MemberCommandFactory getInstance() {
return instance;
}
}먼저 Singleton 패턴에 맞춰 Factory 메서드는 하나만 구현한다.
왜 싱글톤 패턴으로 Factory 메서드를 구현해야 하냐? 다시 짚고 넘어간다.
싱글톤(Singleton) 패턴은 소프트웨어 디자인 패턴 중 하나로, 특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하며, 그 인스턴스에 접근할 수 있는 전역적인 접근점을 제공하는 패턴이다. 이는 어떤 클래스가 최초 한 번만 메모리를 할당하고(static 변수 등을 통해) 그 메모리에 인스턴스를 만들어 사용하는 방식으로 구현한다.
📎 싱글톤 패턴의 특징은?
- 인스턴스가 유일하므로 클래스에 인스턴스가 단 하나만 존재한다.
- 어디서든지 그 인스턴스에 접근할 수 있는 방법이 제공된다.
이러한 방식으로 구현하면 여러 곳에서 접근해도 항상 같은 인스턴스를 반환받게 된다. 그러나 멀티스레드 환경에서는 동기화 문제가 발생할 수 있으므로, 이를 고려하여 구현해야 할 수 있다.
📌 CommandIf.java
package member;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public interface CommandIf {
public abstract Object processCommand(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException;
// 여러 사람이 같이 만들겠다.
// 클래스 이름만 알면 밑에서 올려 보낼 수 있게 해 주는 것 : 다형성
}
Command 패턴을 통해 커맨드로 다른 클래스를 오버라이드 할 수 있는 클래스를 만들어 준다.
이제 Factory에서 가져온 새로운 객체가 다형성으로 CommandIf에 입혀져 다른 사람과 협업이 쉬워진다.
📌 MemberCommandFactory.java (2)
public CommandIf createCommand(String cmd) {
CommandIf cmdIf = null;
if (cmd.equals("/index.mem")) {
cmdIf = new IndexMemberCommand();
}else if (cmd.equals("/memberSsn.mem")) {
cmdIf = new MemberSsnCommand();
}else if (cmd.equals("/member_check.mem")) {
cmdIf = new MemberCheckCommand();
}else if (cmd.equals("/member_input.mem")) {
cmdIf = new MemberInputCommand();
}else if (cmd.equals("/member_input_ok.mem")) {
cmdIf = new MemberInputOkCommand();
}
}이렇게 factory 에 command를 추가해 줘서 저 주소로 오면 저 값을 만들어서 올려 보내~
할 수 있게 된 것이다.
(3) 회원 가입
📌 1. DB 설정
memberDAO, DTO 는 기존에 사용하던 것 가져다가 쓰면 된다.
📌 2. top.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR" import="member.*"%>
<!-- top.jsp -->
<html>
<head>
<title>멤버관리</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function checkMember(){
window.open("memberSsn.mem", "check", "width=640, height=400")
}
</script>
</head>
<body>
<div align="center">
<table border="1" width="800" height="600">
<tr height="10%">
<th width="20%"><a href="javascript:checkMember()">회원가입</a></th>
<th width="20%">회원보기</th>
<th width="20%">회원찾기</th>
<th width="20%">로그인</th>
<th width="20%">메인페이지</th>
</tr>
<tr height="80%">
<td colspan="5">
회원 가입을 시작하려면 우선 가입된 아이디인지 알아야 한다.
check member 자바 스크립트로 띄워서 새창에서 가입된 아이디인지 아닌지를 알아보자.
window.open("memberSsn.mem", "check", "width=640, height=400") 에 의해
memberSsn.mem 의 주소로 memberFactroy 에 가게 된다.
📌 3. MemberCommandFactory.java
public class MemberCommandFactory {
private MemberCommandFactory() {}
private static MemberCommandFactory instance = new MemberCommandFactory();
public static MemberCommandFactory getInstance() {
return instance;
}
public CommandIf createCommand(String cmd) {
CommandIf cmdIf = null;
if (cmd.equals("/index.mem")) {
cmdIf = new IndexMemberCommand();
}else if (cmd.equals("/memberSsn.mem")) {
cmdIf = new MemberSsnCommand();이렇게 추가해 주면 memberSsn 이 불러질 때마다 MemberSsnCommand 의 객체가 실행된다.
📌 4. MemberInputCommand.java
package member;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MemberSsnCommand implements CommandIf {
@Override
public Object processCommand(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
return "WEB-INF/member/memberSsn.jsp";
}
}얘가 진짜 memberSsn.jsp 로 보내주는 기능을 한다.
📌 4. memberSsn.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!-- memberSsn.jsp -->
<html>
<head>
<title>회원가입유무</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<hr color="green" width="300">
<h2>회 원 가 입 유 무</h2>
<hr color="green" width="300">
<form name="f" action="member_check.mem" method="post">
<table border="0" width="500" class="outline">
<tr>
<th class="m1">이름</th>
<td><input type="text" name="name" class="box"></td>
</tr>
<tr>
<th class="m1">주민번호</th>
<td><input type="text" name="ssn1" class="box" maxlength="6">-
<input type="password" name="ssn2" class="box" maxlength="7"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="조회">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>여기서 form 태그로 값을 보내면? member_check.mem 으로 가도록 만들어 주기. 그럼 servlet 에서 그걸 받아서 다시 factory 로
}else if (cmd.equals("/member_check.mem")) {
cmdIf = new MemberCheckCommand();factory에는 memberCheckCommand의 객체를 생성하게 만든다.
📌 4. memberCheckCommand.java
package member;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class MemberCheckCommand implements CommandIf {
@Override
public Object processCommand(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String name = req.getParameter("name");
String ssn1 = req.getParameter("ssn1");
String ssn2 = req.getParameter("ssn2");
MemberDAO dao = new MemberDAO();
String msg = null, url = null;
try {
boolean isCheck = dao.checkMember(name, ssn1, ssn2);
if (isCheck){
msg = "저희 회원이십니다. 로그인을 해 주세요!!";
req.setAttribute("msg", msg);
return "WEB-INF/member/closeWindow.jsp";
}else {
msg = "회원가입페이지로 이동합니다.";
url = "member_input.mem";
HttpSession session = req.getSession();
session.setAttribute("name", name);
session.setAttribute("ssn1", ssn1);
session.setAttribute("ssn2", ssn2);
}
}catch(Exception e) {
e.printStackTrace();
}
req.setAttribute("msg", msg);
req.setAttribute("url", url);
return "message.jsp";
}
}여기서는 getParameter로 넘어온 값을 받고, 그 값을 DAO 로 직접 체크한 다음, 만약 회원이지 않다면 가입 페이지로 이동시켜 준다.
⭐
여기서 중요한 것은 값을 session에 저장해서 페이지가 넘어가도 값을 불러올 수 있도록 만드는 것이다.
세션은 주로 사용자가 웹 애플리케이션에 접속하는 동안 유지되며, 사용자가 로그아웃하거나 브라우저를 닫을 때 종료된다. 세션의 유지 기간은 다양한 요소에 의해 결정될 수 있다.
가입 페이지 이동은? jsp 가 아니라 servlet이 함.
member_input.mem 이라는 주소로 이동하는데, 그건 무조건 memberServlet 이 받고, memberFactory에 그 값을 입력시켜 주면 적용 가능.
}else if (cmd.equals("/member_input.mem")) {
cmdIf = new MemberInputCommand();factory에 찍어준 모습
📌 5. MemberInputCommand.java
package member;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MemberInputCommand implements CommandIf {
@Override
public Object processCommand(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
return "WEB-INF/member/member_input.jsp";
}
}확인 받고 input에 도착하면 jsp 로 옮겨주는 모습
📌 6. member_input.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<title>회원가입</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function check(){
if (f.id.value == ""){
alert("아이디를 입력해 주세요!!")
f.id.focus()
return
}
if (!f.passwd.value){
alert("비밀번호를 입력해 주세요!!")
f.passwd.focus()
return
}
document.f.submit()
}
</script>
</head>
<%
String name = (String)session.getAttribute("name");
String ssn1 = (String)session.getAttribute("ssn1");
String ssn2 = (String)session.getAttribute("ssn2");
%>
<body onload="f.id.focus()">
<form name="f" method="POST" action="member_input_ok.mem">
<table width="600" align="center" class="outline">
<tr>
<td colspan="2" align=center class="m2">회원가입</td>
</tr>
<tr>
<td width="150" class="m3">이름</td>
<td class="m3">
<input type="text" name="name" class="box" value="<%=name%>" disabled>
<input type="hidden" name="name" value="<%=name%>"/>
</td>
</tr>
<tr>
<td width="150" class="m3">아이디</td>
<td class="m3">
<input type="text" name="id" class="box">
</td>
</tr>
<tr>
<td width="150" class="m3">비밀번호</td>
<td class="m3">
<input type="password" name="passwd" class="box">
</td>
</tr>
<tr>
<td width="150" class="m3">주민번호</td>
<td class="m3">
<input type="text" name="ssn1" class="box" value="<%=ssn1%>" readOnly> -
<input type="password" name="ssn2" class="box" value="<%=ssn2%>" readOnly>
</td>
</tr>
<tr>
<td width="150" class="m3">이메일</td>
<td class="m3">
<input type="text" name="email" class="box">
</td>
</tr>
<tr>
<td width="150" class="m3">연락처</td>
<td class="m3">
<input type="text" name="hp1" class="box" size="3" maxlength="3"> -
<input type="text" name="hp2" class="box" size="4" maxlength="4"> -
<input type="text" name="hp3" class="box" size="4" maxlength="4">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="javascript:check()">[전송]</a>
<a href="#">[취소]</a>
</td>
</tr>
</table>
</form>
</body>
</html> 여기서 세션 값에 저장해 뒀던 name, ssn1, ssn2를 불러내고, 값을 완성했다면
<form name="f" method="POST" action="member_input_ok.mem"> member_input_ok_mem 으로 보내주는데 그건 역시 factory에 설정할 수 있음.
}else if (cmd.equals("/member_input_ok.mem")) {
cmdIf = new MemberInputOkCommand();📌 7. MemberInputOkCommand.java
package member;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MemberInputOkCommand implements CommandIf {
@Override
public Object processCommand(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
MemberDTO dto = new MemberDTO();
dto.setName(req.getParameter("name"));
dto.setId(req.getParameter("id"));
dto.setPasswd(req.getParameter("passwd"));
dto.setSsn1(req.getParameter("ssn1"));
dto.setSsn2(req.getParameter("ssn2"));
dto.setEmail(req.getParameter("email"));
dto.setHp1(req.getParameter("hp1"));
dto.setHp2(req.getParameter("hp2"));
dto.setHp3(req.getParameter("hp3"));
MemberDAO dao = new MemberDAO();
try {
int res = dao.insertMember(dto);
if (res>0) {
req.setAttribute("msg", "회원가입 성공하셨습니다. 로그인을 해 주세요");
return "WEB-INF/member/closeWindow.jsp";
}else {
req.setAttribute("msg", "회원가입 실패!! 회원가입페이지로 이동합니다.");
req.setAttribute("url", "memberSsn.mem");
return "message.jsp";
}
}catch(Exception e) {
e.printStackTrace();
req.setAttribute("msg", "DB 오류 발생!! 관리자에게 문의해 주세요");
return "WEB-INF/member/closeWindow.jsp";
}
}
}여기서는 값을 페이지로 받아왔으니까 그냥 넘어와서 저장하고, 그걸 insertmemberDAO 에 저장해 DB 를 업데이트 시켜 준다.
이렇게 하면 회원 가입 기능이 끝난다.
(4) 회원 리스트 확인
📌 1. top.jsp
만약 리스트를 클릭한다면? 리스트.mem으로 이동시켜 줄 거다.
<th width="20%"><a href="member_list.mem">회원보기</a></th>어디서든 클릭하면 list.mem으로 이동 가능.
그리고 memberFactory에서 list.mem으로 가면 어떤 정보를 받을 건지, 어디로 이동할 건지 명시해 준다.
}else if (cmd.equals("/member_list.mem")) {
cmdIf = new MemberListCommand();📌 2. MemberListCommand.java
package member;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MemberListCommand implements CommandIf {
@Override
public Object processCommand(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
MemberDAO dao = new MemberDAO();
try {
List<MemberDTO> list = dao.listMember();
req.setAttribute("listMember", list);
return "WEB-INF/member/memberAll.jsp";
}catch(Exception e) {
e.printStackTrace();
req.setAttribute("msg", "DB 서버 오류 발생!! 관리자에게 문의해 주세요");
req.setAttribute("url", "index.do");
return "message.jsp";
}
}
}
여기서는 만약 list.mem으로 이동한다면 어떤 값을 가질 건지, 그리고 마지막에는 어떤 장소로 이동할 건지 명시한다.
먼저 dao에서 list를 불러오고, 그게 memberAll.jsp로 갈 수 있도록 해 준다.
여기서는 왜... session으로 넣었지?
📌 3. memberAll.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.util.*, member.*" %>
<!-- memberAll.jsp -->
<%@ include file="top.jsp"%>
<div align="center">
<hr color="green" width="300">
<h2>회 원 목 록 페 이 지</h2>
<hr color="green" width="300">
<table border="0" width="100%" class="outline">
<tr>
<th class="m1">번호</th>
<th class="m1">이름</th>
<th class="m1">아이디</th>
<th class="m1">이메일</th>
<th class="m1">전화번호</th>
<th class="m1">가입일</th>
<th class="m1">수정 | 삭제</th>
</tr>
<% //db에서 회원목록을 가져와서 출력하기
List<MemberDTO> list = (List)request.getAttribute("listMember");
if (list == null || list.size() == 0){%>
<tr>
<td colspan="7">등록된(찾으시는) 회원이 없습니다.</td>
</tr>
<% }else {
int co = 1;
for(MemberDTO dto : list){%>
<tr>
<td align="center"><%=co++%></td>
<td align="center"><%=dto.getName()%></td>
<td align="center"><%=dto.getId()%></td>
<td align="center"><%=dto.getEmail()%></td>
<td align="center"><%=dto.getAllHp()%></td>
<td align="center"><%=dto.getJoindate()%></td>
<td align="center">
<a href="member_update.mem?no=<%=dto.getNo()%>">수정</a> |
<a href="member_delete.mem?no=<%=dto.getNo()%>">삭제</a>
</td>
</tr>
<% }
} %>
</table>
</div>
<%@ include file="bottom.jsp"%>세션으로 넣었으니 세션으로 뱉어준다. 세션에 저장했던 list 값을 불러와 list멤버로 뱉고, 그걸 jsp에 뿌려 준다.
완성된 회원 목록 페이지.
친한 동생이 내 디자인 보고 진짜 개발자 같다고 했다...
칭찬이겠지?
자바 백엔드 개발자 개인 위키