1) login
2)main
3)info
4)update
5)delete
6)list(목록)
7)sitemesh , layout
1) memberController에 login구현
package controller;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import gdu.mskim.MskimRequestMapping;
import gdu.mskim.RequestMapping;
import model.member.Member;
import model.member.MemberDto;
@WebServlet(urlPatterns = { "/member/*" },
initParams = { @WebInitParam(name = "view", value = "/view/") })
//서블릿(MskimRequestMapping)에 존재하지않는다면 view폴더 하위의 member폴더 하위에서찾는다
public class MemberController extends MskimRequestMapping {
private MemberDto dto = new MemberDto();
/*
* 1.파라미터정보를 Member객체에 저장 (인코딩필요) (Filter이용)
* 2.Member객체를 이용해 db에insert(member테이블저장)
* 3.가입성공 : 성공메시지 출력 후 loginForm 이동
* 가입실패 : 실패메시지출력 후 joinForm 이동
*/
@RequestMapping("join") // http://localhost:8080/model2Study/member/join 시 호출
public String join(HttpServletRequest request, HttpServletResponse response) {
Member mem = new Member();
mem.setId(request.getParameter("id"));
mem.setPass(request.getParameter("pass"));
mem.setName(request.getParameter("name"));
mem.setGender(Integer.parseInt(request.getParameter("gender")));
mem.setTel(request.getParameter("tel"));
mem.setEmail(request.getParameter("email"));
mem.setPicture(request.getParameter("picture"));
if (dto.insert(mem)) {// 삽입
request.setAttribute("msg", mem.getName()+"님 회원가입완료");
request.setAttribute("url", "loginForm");
}
else {
request.setAttribute("msg", mem.getName()+"님 회원가입시 오류발생");
request.setAttribute("url", "joinForm");
}
return "alert"; //view하위의 alert페이지로 이동해라(alert페이지 출력과 페이지이동을 위한페이지)
}
/*
* http://localhost:8080/model2Study/member/joinForm
* => @RequestMapping("joinForm")필요
* 구현되지않은경우
/member/joinForm url 정보를 이용해 /webapp/view/member/joinForm.jsp 페이지가
* view로 설정되도록 구현
*/
}
/webapp/view/member/loginForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOGIN FORM</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<form action="login" method="post" name="f" onsubmit="return input_check(this)">
<table><caption>로그인</caption>
<tr><th>아이디</th><td><input type="text" name="id"></td></tr>
<tr><th>PW</th><td><input type="password" name="pass"></td></tr>
<tr><td colspan="2"><button>로그인</button>
<button type="button" onclick="location.href='joinForm'">회원가입</button>
<button type="button" onclick="win_open('idForm')">아이디찾기</button>
<button type="button" onclick="win_open('pwForm')">PW찾기</button>
</td></tr>
</table>
</form>
<!--
1.input check(this)
2.win_open('pwForm')
-->
<script>
function input_check(f){
if(f.id.value.trim() == ""){
alert("아이디 입력하세요");
f.id.focus();
return false;
}
else if(f.pass.value.trim() == "" ){
//f.pass.value.trim().length <= 0
alert("비번입력");
return false;
}
return true;
}
function win_open(page){
open(page,"","width=500,height=500,top=100 left=100" );
}
</script>
</body>
</html>
action으로 보낼 login
/controller/MemberController.java
@RequestMapping("login")
public String login(HttpServletRequest request, HttpServletResponse response ) {
HttpSession session = request.getSession();
//session정보를 얻음(session영역 속성 등록을위해)
String id = request.getParameter("id");
String pass = request.getParameter("pass");
Member mem = new MemberDto().selectOne(id);
if(mem==null){
request.setAttribute("msg", "아이디를 확인하세요");
request.setAttribute("url","loginForm");
}
else{
//요청받은 비밀번호와 DB의 비밀번호비교
if(pass.equals(mem.getPass())){//로그인성공
session.setAttribute("login", id);
request.setAttribute("msg", mem.getName()+"님이 로그인 하셨습니다");
request.setAttribute("url","main");
}
else{
request.setAttribute("msg", "비번을 확인하세요");
request.setAttribute("url","loginForm");
}
}
return "alert";
}
2) 로그인성공하면 넘어가는 main view
core태그를 사용하기위해 라이브러리도 가져와야함
<%@ 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>
<head>
<meta charset="UTF-8">
<title>MAIN</title>
</head>
<body>
<h3>${sessionScope.login}님이 로그인 했어요</h3>
<h3><a href="logout">로그아웃</a></h3>
<h3><a href="info.jsp?id=${sessionScope.login}">회원정보 보기</a></h3>
<c:if test="${sessionScope.login=='admin'}">
<h3><a href="list">회원목록보기</a></h3>
</c:if>
</body>
</html>

controller에 main , logout 구현
* forward 서버에서 요청하는것(같은 request영역)
* redirect 서버에서 브라우저로 재요청(그냥새로운페이지임)(다른 request영역)
@RequestMapping("main")
public String main(HttpServletRequest request , HttpServletResponse response) {
String login = (String)request.getSession().getAttribute("login");
if(login==null || login.trim().equals("")) {
request.setAttribute("msg", "로그인하세요");
request.setAttribute("url","loginForm");
return "alert";
}
return "member/main"; //forward 됨
//redirect시 다른 request영역이므로 속성이 넘어가지않음
@RequestMapping("logout")
public String logout(HttpServletRequest request, HttpServletResponse response) {
request.getSession().invalidate();
return "redirect:loginForm";//redirect하도록 설정
}
3) info
view / info.jsp
<%@page import="model.member.MemberDto"%>
<%@page import="model.member.Member"%>
<%@ 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>
<head>
<meta charset="UTF-8">
<title>info(회원정보)</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!--
request.setAttribute("mem",Member객체)
${mem.picutre} == mem.getPicture() 메서드호출됨
Picture : get property
${mem.id} : mem.getId() 호출
(주의 : 변수명(id)으로 가져오는게 아니라
get property(mem.getId())를 가져오는거임)
-->
<table><caption>회원정보</caption>
<tr><td rowspan="6" width="30%">
<img src="picture/${mem.picture}" width="200" height="210"></td>
<th width="20%">아이디</th><td>${mem.id}</td>
<tr><th>이름</th><td>${mem.name}</td></tr>
<tr><th>성별</th><td>${mem.gender==1?"남":"여"}</td></tr>
<tr><th>전화</th><td>${mem.tel}</td></tr>
<tr><th>이메일</th><td>${mem.email}</td></tr>
<tr><td colspan="2">
<a href="updateForm?id=${mem.id}">수정</a>
<c:if test="${param.id != 'admin'}">
<a href="deleteForm?id=${mem.id}">탈퇴</a>
</c:if>
</tr>
</table>
</body>
</html>
controller에
info메서드와(member/info 접근시 최초로발생함)
loginIdCheck 만들기
@RequestMapping("info")
@MSLogin("loginIdCheck")
public String info(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("id");
Member mem = dto.selectOne(id);
request.setAttribute("mem", mem); //객체를 속성으로넘긴다
return "member/info"; //redirect로보내면 mem속성이 넘어가지않음
}
//--------------------함수생성-----------------------------
public String loginIdCheck(HttpServletRequest request, HttpServletResponse response) {
HttpSession session = request.getSession();
String id = request.getParameter("id");
String login = (String)session.getAttribute("login");
if(login==null) {
request.setAttribute("msg", "로그인하세요");
request.setAttribute("url", "loginForm");
return "alert";
}
else if(!login.equals("admin") && !id.equals(login)) {
request.setAttribute("msg", "본인만 접근가능");
request.setAttribute("url", "main");
return "alert";
}
return null;
}
4)update
updateForm 생성
(info에서 수정버튼을 누르면 이동하는 페이지)
<%@ 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>
<head>
<meta charset="UTF-8">
<title>수정 전 화면조회(updateForm.jsp)</title>
</head>
<body>
<form action="update" name="f" method="post" onsubmit="return input_check(this)">
<table><caption>회원정보수정</caption>
<tr><td rowspan="4" valign="bottom">
<input type="hidden" name="picture" value="${mem.picture}">
<img src="picture/${mem.picture}>" width="100" height="120" id="pic"><br>
<font sizeie="1"><a href="javascript:win_upload()">사진수정</a></font>
</td><th>아이디</th><td><input type="text" name ="id" value="${mem.id}" readonly></td></tr>
<tr><th>비밀번호</th><td><input type="password" name="pass" placeholder="${sessionScope.login}의 비밀번호"></td></tr>
<tr><th>이름</th><td><input type="text" name="name" value="${mem.name}"></td></tr>
<tr><th>성별</th><td><input type="radio" name="gender" value="1" ${mem.gender==1?"checked":""}>남
<input type="radio" name="gender" value="2" ${mem.gender==2?"checked":""}>여</td></tr>
<tr><th>전화번호</th><td colspan="2">
<input type="text" name="tel" value="${mem.tel}"></td></tr>
<tr><th>이메일</th><td colspan="2">
<input type="text" name="email" value="${mem.email}"></td></tr>
<tr><td colspan="3"><button>회원수정</button>
<c:if test="${param.id == sessionScope.login}">
<button type="button" onclick="win_passchg()">비밀번호수정</button>
</c:if>
</table>
</form>
<script type="text/javascript">
function win_upload(){
let op = "width=500,height=500 ,top=50 ,left=150";
open("pictureForm","",op);
}
function win_passchg(){
let op = "width=500,height=500 ,top=50 ,left=150";
open("passwordForm","",op);
}
</script>
</body>
</html>
updateForm의 Controller
@RequestMapping("updateForm")
@MSLogin("loginIdCheck")
public String updateForm(HttpServletRequest request, HttpServletResponse response) {
//로그인 검증 완료 시 실행되는 문장들
String id = request.getParameter("id");
Member mem = dto.selectOne(id);
request.setAttribute("mem", mem);
return "member/updateForm"; //redirect로보내면 mem속성이 넘어가지않음
}
update의 Controller (수정을 처리하는곳)
@RequestMapping("update")
@MSLogin("loginIdCheck")
public String update(HttpServletRequest request, HttpServletResponse response) {
Member mem = new Member();
mem.setId(request.getParameter("id"));
mem.setPass(request.getParameter("pass"));
mem.setName(request.getParameter("name"));
mem.setGender(Integer.parseInt(request.getParameter("gender")));
mem.setTel(request.getParameter("tel"));
mem.setEmail(request.getParameter("email"));
mem.setPicture(request.getParameter("picture"));
//2 비밀번호를 위한 db의 데이터 조회. : login 정보로 조회하기
String login = (String)request.getSession().getAttribute("login");
Member dbMem = dto.selectOne(login);
String msg = "비번이틀려요";
String url = "updateForm?id="+mem.getId();
if(mem.getPass().equals(dbMem.getPass())) {
if(dto.update(mem)) { //정상적으로 업데이트성공
msg = "수정완료";
url = "info?id="+mem.getId();
}
else {
msg="수정실패";
}
}
//비밀번호오류 시
request.setAttribute("msg", msg);
request.setAttribute("url", url);
return "alert";
}
5)delete
view / deletForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--
1. id파라미터저장
2.. 로그인정보검증
-- 로그아웃상태 : 로그인바람 => loginForm.jsp로이동
--본인탈퇴여부 검증 : 관리자를 제외하고 본인만탈퇴가능
--관리자라면 : 관리자비밀번호를 입력해서 회원 탈퇴시키기 가능
--본인이 아닌경우(본인만탈퇴가능) => main.jsp페이지로이동
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탈퇴</title>
</head>
<body>
<form action="delete.jsp" method="post" onsubmit="return input_check(this)">
<input type="hidden" name="id" value="${param.id}">
<table><caption>회원비밀번호입력</caption>
<tr><th>${sessionScope.login}의 비밀번호</th>
<td><input type="password" name="pass" placeholder="${sessionScope.login}의 비밀번호"></td></tr>
<tr><td colspan="2"> <button>탈퇴하기</button> </td></tr>
</table>
</form>
</body>
</html>
deletForm Controller
@RequestMapping("deleteForm")
@MSLogin("loginIdCheck")
public String deleteForm(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("id");
if(id.equals("admin")) {
request.setAttribute("msg","관리자는 탈퇴할 수 없습니다.");
request.setAttribute("url","info?id="+id);
return "alert";
}
return "member/deleteForm";
}
deleteController
@RequestMapping("delete")
@MSLogin("loginIdCheck")
public String delete(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("id");
String pass = request.getParameter("pass");
String login = (String)request.getSession().getAttribute("login");
if(id.equals("admin")) {
request.setAttribute("msg","관리자는 탈퇴할 수 없습니다.");
request.setAttribute("url","info?id="+id);
return "alert";
}
Member dbMem = dto.selectOne(login);
String msg = "비밀번호오류";
String url = "deleteForm?id="+id;
if(pass.equalsIgnoreCase(dbMem.getPass())) {
if(dto.delete(id)) {
if(login.equals("admin")) {
msg = "탈퇴성공";
url = "list";
}
else {//관리자가 아닌경우
request.getSession().invalidate();
msg = "(탈퇴성공) 로그아웃합니다";
url = "main";
}
}
else {
msg = "탈퇴실패";
}
}
request.setAttribute("msg",msg);
request.setAttribute("url",url);
return "alert";
}
6)list(목록)
사진등록

\java\.metadata\.plugins\ org.eclipse.wst.server.core\tmp0\wtpwebapps\model1Study\member\picture에 가서
저번에 했던 picture폴더의 사진들을 넣어준다
view / list.jsp
(main에서 넘어가는 페이지 관리자만 접근 가능함)
<%@ 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>
<head>
<meta charset="UTF-8">
<title>회원목록</title>
</head>
<body>
<h2>회원목록</h2>
<form action="mailForm" name="f" method="post"
onsubmit="return input_check(this)">
<table class="table">
<tr>
<th>아이디</th>
<th>사진</th>
<th>이름</th>
<th>성별</th>
<th>전화</th>
<th> </th>
<th><input type="checkbox" name="alchk"
onchange="allchkbox(this)">전체선택</th>
</tr>
<c:forEach var="mem" items="${list}"> <%--멤버객체가있는 list --%>
<tr>
<td><a href="info?id=${mem.id}">${mem.id}</a></td>
<td><img src="${pageContext.request.contextPath}/picture/${mem.picture}" width="30" height="30"></td>
<!--C:/java/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/model2Study/picture/ -->
<td>${mem.name}</td>
<td>${mem.gender==1?"남":"여"}</td>
<td>${mem.tel}</td>
<td><a href="updateForm?id=${mem.id}">수정</a> <c:if
test="${mem.id == 'admin'}">
<a href="deleteForm?id=${mem.id}">강제탈퇴</a>
</c:if></td>
<td><input type="checkbox" name="idchk" class="idchk" value="${mem.id}"
onchange="${mem.id}"></td>
</tr>
</c:forEach>
<tr>
<td colspan="7" id="center"align="right">
<button type="submit" class="btn btn-outline-dark">메일보내기</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function input_check(f){
let cnt=0;
document.querySelectorAll(".idchk").forEach((idchk)=>{
if(idchk.checked){
cnt++; //idchk : checkbox한개
}
})
if(cnt==0){ //선택된 checkbox가 없는경우
alert("이메일 전송 아이디를 선택하세요");
return false;
}
return true;
}
function allchkbox(chk) {
const checkboxes = document.querySelectorAll('.idchk').forEach((idchk)=>{
idchk.checked = chk.checked;
})
}
</script>
</body>
</html>
list controller 와
loginAdminCheck 함수
@RequestMapping("list")
@MSLogin("loginAdminCheck")
public String list(HttpServletRequest request, HttpServletResponse response) {
//관리자로 로그인시에만 실행
List<Member> list = dto.list(); //DB값들을 list형식으로 가져옴
request.setAttribute("list", list); //list속성에저장
return "member/list"; // forward방식으로 member/list 로 리턴(이동)
}
//--------------------------------loginAdminCheck (관리자만접근허용하는 함수)-----
public String loginAdminCheck(HttpServletRequest request, HttpServletResponse response) {
HttpSession session = request.getSession();
String login = (String)session.getAttribute("login");
if(login==null) {
request.setAttribute("msg", "로그인하세요");
request.setAttribute("url", "loginForm");
return "alert";
}
else if(!login.equals("admin")) {
request.setAttribute("msg", "관리자만 접근가능합니다");
request.setAttribute("url", "main");
return "alert";
}
return null; //정상인경우
}

7) sitemesh , layout

다음과같이 패키지를 만든 후 해당파일을 넣어주자
(id찾기,pw찾기등은 레이아웃을 제외하기위함)

https://www.w3schools.com/bootstrap/bootstrap_ver.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
해당사이트 --> bootstrap

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_template1

W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
해당코드를 layout.jsp에 붙여넣자
(전체적인 틀만 가져오는거지 다 바꿀거임)
/webapp/layout/layout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<title><sitemesh:write property="title" /></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
.footer {
display: flex;
flex-direction: column;
}
.footer_link {
height: 15%;
display: flex;
align-items: center;
}
.footer_link a {
text-decoration: none;
color: black;
font-weight: bold;
margin: 15px;
}
.footer_company {
height: 70%;
}
.footer_company>ul {
list-style: "- ";
padding-left: 15px;
}
.footer_copyright {
height: 15%;
text-align: center
}
.footer>div {
border-top: 1px solid gray
}
</style>
<sitemesh:write property="head" />
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1>dongPage</h1>
<p>부당거래</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">목록</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="main">회원관리</a></li>
<li class="nav-item"><a class="nav-link" href="#">공지사항</a></li>
<li class="nav-item"><a class="nav-link" href="list">자유게시판</a></li>
<c:if test="${sessionScope.login != null}">
<li class="nav-item"><a class="nav-link" href="#">${sessionScope.login}님 하이</a></li>
<li class="nav-item"><a class="nav-link" href="logout">로그아웃</a></li>
</c:if>
<li class="nav-item"><a class="nav-link" href="javascript:history.go(-1)">뒤로가기</a></li>
</ul>
</div>
</nav>
<div class="container" style="margin-top: 30px">
<sitemesh:write property="body" />
</div>
<footer class="footer">
<div class="footer_link">
<a href="">이용약관</a> | <a href="">개인정보취급방침</a> | <a href="">인재채용</a> |
<a href="">고객센터</a>
</div>
<div class="footer_company">
<ul>
<li>상호명 : GooDee Academy</li>
<li>대표자 : 이승엽</li>
<li>전화 : 02-818-7950</li>
<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>
<li>(08505) 서울특별시 금천구 가산디지털2로 95 (가산동, km타워) 2층, 3층</li>
</ul>
</div>
<div class="footer_copyright">Copyright ⓒ GooDee Academy.
Allrights reserved.</div>
</footer>
</body>
</html>
loginForm의 버튼들을 바꿔보자
<tr><td colspan="2"><button class="btn btn-outline-secondary" >로그인</button>
https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
다음링크에가면 버튼스타일들이 나올거임 원하는스타일이있다면 class을 똑같이 맞춰보자

\
'JSP' 카테고리의 다른 글
부트캠프50일차(Model2 : mail , id pw search , password수정 , pictureForm) (0) | 2025.04.14 |
---|---|
주말 (49일차에 이어짐 id.pw찾기 , loginForm관련 , picture절대경로만들기) (0) | 2025.04.12 |
부트캠프48일(core태그 , fmt태그 , fn태그 , model2시작) (0) | 2025.04.10 |
부트캠프47일 (EL , JSTL) (0) | 2025.04.09 |
부트캠프47일(pw찾기 , 비밀번호수정폼) (0) | 2025.04.09 |