JSP 강의 Day05

주세환·2023년 3월 20일
0

JSP

목록 보기
5/16

Seller

이미지 등록

지난 시간에 이어서 boardimageinsert.do를 만들자.

@WebServlet(urlPatterns = {"/board/boardimageinsert.do"})
@MultipartConfig(
		fileSizeThreshold = 1024*1024*1, //1M
		maxFileSize = 1024*1024*10,	//10M
		maxRequestSize = 1024*1024*100 //100M
)
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 게시글 번호
		Long boardno = Long.parseLong(request.getParameter("boardno"));
		// 이미지1개(파일명,크기,타입,이미지데이터)
		Part filePart = request.getPart("file");
		if(filePart.getSize() >0) { // 파일첨부함.
			
			BoardImage obj = new BoardImage();
			obj.setBoardno(boardno);
			obj.setFilename(filePart.getSubmittedFileName());			
			obj.setFiletype(filePart.getContentType());
			obj.setFilesize(filePart.getSize());
			obj.setFiledata(filePart.getInputStream().readAllBytes());
			
			MybatisContext.getSqlSession().getMapper(BoardImageMapper.class)
			.insertBoardImageOne(obj);
		}
		response.sendRedirect("boardimage.do?no=" + boardno);
	}

BoardImageInsertServlet을 만들어 위처럼 작성하자.

public class BoardImage {

	private long no;
	private String filename;
	private byte[] filedata; //blob
	private String filetype;
	private long filesize;
	private long boardno;
	private Date regdate;
}

dto에 BoardImage 파일도 생성하자.

@WebServlet(urlPatterns = {"/board/boardimageinsertbatch.do"})
@MultipartConfig(
		fileSizeThreshold = 1024*1024*1, //1M
		maxFileSize = 1024*1024*10,	//10M
		maxRequestSize = 1024*1024*100 //100M
)
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 게시글 번호
		Long boardno = Long.parseLong(request.getParameter("boradno"));
		// 이미지1개(파일명,크기,타입,이미지데이터)
		Collection<Part> partList = request.getParts();
		
		for(Part filePart : partList) {
			// name값이 files인것만 필터
			if(filePart.getName().equals("files")) {
				BoardImage obj = new BoardImage();
				obj.setBoardno(boardno);
				obj.setFilename(filePart.getSubmittedFileName());			
				obj.setFiletype(filePart.getContentType());
				obj.setFilesize(filePart.getSize());
				obj.setFiledata(filePart.getInputStream().readAllBytes());
				
				int ret = MybatisContext.getSqlSession().getMapper(BoardImageMapper.class)
						.insertBoardImageOne(obj);				
			}
		}
		response.sendRedirect("selectone.do?no=" + boardno);
	}

이어서 BoardImageInsertBatchServlet도 생성하자.

	@Insert({
		" INSERT INTO boardimage(filename, filesize, filetype, filedata, boardno) ",
		" VALUES(#{obj.filename}, #{obj.filesize}, #{obj.filetype}, #{obj.filedata}, #{obj.boardno}) "
	})
	public int insertBoardImageOne( @Param("obj")BoardImage obj );
    
    @Select({
		" SELECT i.* FROM boardimage i WHERE NO=#{no} "
	})
	public BoardImage selectBoardImageOne( @Param("no") long no );

Mapper도 생성하고

@WebServlet("/board/image")

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	long no = Long.parseLong( request.getParameter("no") );
    	
    	BoardImage obj =  MybatisContext.getSqlSession().getMapper(BoardImageMapper.class)
		.selectBoardImageOne(no);
    	// 이미지타입
    	response.setContentType(obj.getFiletype());
    	// 오류없음
    	response.setStatus(200);
    	// 실제이미지 표시
    	response.getOutputStream().write(obj.getFiledata());
    }

ImageServlet도 한 번에 만들고 확인해보자.


1개, 3개를 각각 등록하게되면

이렇게 등록된 모습을 볼 수 있다.


board/image?no=(사진번호)를 입력하게 되면 해당 사진을 볼 수 있다.

해당 번호에 대한 이미지 가져오기

		<hr />
		등록된 이미지목록
		<c:forEach var="tmp" items="${list}">
			<img src="${pageContext.request.contextPath}/board/image?no=${tmp}"
					 style="width:100px; height:100px" />
		</c:forEach>
		<hr />

select1.jsp 안에 body 맨 밑에 위 코드를 작성하자.

아래에 등록된 이미지목록을 보면 울고 화내고 난리난 페페가 보인다.

회원

회원가입


우선 시퀀스와 테이블을 생성한다.

dto에 Member와 Address를 생성한다.

@WebServlet(urlPatterns = {"/member/join.pknu"})

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setAttribute("title", "회원가입");
		request.getRequestDispatcher("/WEB-INF/member/join1.jsp").forward(request, response);
	}

JoinServlet을 생성하고

<%@ 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}</title>
	</head>
		<body>
			<div class="container">
			<h3>${title}</h3>
				<form action="join.pknu" method="post">
					아이디 : <input type="text" name="id" /><br />
					암호 : <input type="password" name="password" /><br />
					암호확인 : <input type="password" name="password1" /><br />
					이름 : <input type="text" name="name" /><br />
					나이 : <input type="number" name="age" /><br />
				<input type="submit" value="회원가입" /><br />
				</form>
			</div>
		</body>
</html>
</html>

join1.jsp를 생성한 뒤

	// 회원가입
	@Insert({ 
		" INSERT INTO member (id, password, name, age) ",
		" VALUES( #{obj.id},  #{obj.password}, #{obj.name}, #{obj.age}) "
	})
	public int insertMemberOne(@Param("obj") Member obj);

MemberMapper를 생성하면

이렇게 생성이 된다.

가입을 하게되면 URL에 표시가 된다.
이러면 정보유출이니 수정해보자.

package config;

import java.security.MessageDigest;

public class Hash {
	public static String hashPW(String id, String pw) {
		try {
			// 1. Hash알고리즘 SHA-256
			MessageDigest md = MessageDigest.getInstance("SHA-256");
			md.update((pw + id).getBytes());
	        
			byte[] pwdSalt = md.digest();
	        StringBuffer sb = new StringBuffer();
	        for(byte b : pwdSalt) {
	            sb.append(String.format("%02x", b));
	        }
	        String result = sb.toString();
	        return result;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}
}

Config에 비밀번호를 암호화하는 Hash를 생성하자.

	// /member/join.pknu   ?   id=1&password=1&password1=1&name=1&age=1
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 이전화면에서 버튼을 눌러서 페이지가 이동되면서 전송된 데이터를 받기
		String id = request.getParameter("id");
		String pw = request.getParameter("password");
		String na = request.getParameter("name");
		int ag = Integer.parseInt(request.getParameter("age"));	
		// static 클래스 호출해서 기능 사용
		String pwHash = Hash.hashPW(id, pw);
		
		Member obj = new Member();
		obj.setId(id);
		obj.setPassword(pwHash);
		obj.setName(na);
		obj.setAge(ag);
		
		
		int ret = MybatisContext.getSqlSession().getMapper(MemberMapper.class).insertMemberOne(obj);
		
		// DB에 추가한후에
		// jsp를 보여주면 X, 주소창의 정보를 바꾸고 엔터키를 수행하는 것을 자동화.. => redirect
		if(ret == 1 ) {			
			response.sendRedirect("home.pknu");
		}
		else {
			response.sendRedirect("join.pknu");
		}
	}

JoinServlet의 doPost에 추가한다.

이젠 회원가입을 해도 뒤에 정보가 뜨지 않는다.

home

이제 home을 만들자.

@WebServlet(urlPatterns = {"/member/home.pknu"})
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setAttribute("title", "회원홈");
		request.getRequestDispatcher("/WEB-INF/member/home1.jsp").forward(request, response);
	}

HomeServlet을 생성하고

<%@ 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}</title>
	</head>
	<body>
		<div class="container">
			<h3>${title}</h3>
			<a href="login.pknu"><button>로그인</button></a>
			<a href="join.pknu"><button>회원가입</button></a>
			<a href="${pageContext.request.contextPath}/board/selectlist.do"><button>게시판</button></a>
			<a href="${pageContext.request.contextPath}/seller/selectlist.do"><button>판매자</button></a>
		</div>
	</body>
</html>

home1.jsp를 생성한 뒤 home으로 가보자

이 창이 보인다면 성공!

로그인

@WebServlet(urlPatterns = {"/member/login.pknu"})

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setAttribute("title", "로그인");
		request.getRequestDispatcher("/WEB-INF/member/login1.jsp").forward(request, response);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String id = request.getParameter("id");
		String pw = request.getParameter("password");
		String pwHash = Hash.hashPW(id, pw);
				
		
		Member obj = new Member();
		obj.setId(id);
		obj.setPassword(pwHash);
		
		Member ret = MybatisContext.getSqlSession().getMapper(MemberMapper.class).selectMemberLogin(obj);
		
		if(ret != null) { // 로그인 성공
			response.sendRedirect("home.pknu");
		}else { // 로그인 실패
			response.sendRedirect("login.pknu");
		}
	}

LoginServlet을 만들고

	<head>
		<meta charset="UTF-8">
		<title>${title}</title>
	</head>
	<body>
		<div class="container">
		<h3>${title}</h3>
			<form action="${pageContext.request.contextPath}/member.login.pknu" method="post"> <!-- post : 암호화 -->
				아이디 : <input type="text" name="id" /><br />
				암호 : <input type="password" name="password" /><br />
				<input type="submit" value="로그인" /><br />
			</form>
		</div>
	</body>

login1.jsp도 만든다

	@Select({
		" SELECT m.id, m.name, m.age FROM m ",
		" WHERE ID = #{obj.id} AND PASSWORD = #{obj.password} "
	})
	public Member selectMemberLogin(@Param("obj") Member obj);

Mapper까지 생성해주면

이렇게 로그인이 된다.

로그아웃

<head>
		<meta charset="UTF-8">
		<title>${title}</title>
	</head>
	<body>
		<div class="container">
			<h3>${title}</h3>
			<c:if test="${sessionScope.UID eq null}">
				<a href="${pageContext.request.contextPath}/member/login.pknu"><button>로그인</button></a>
			</c:if>
			
			<c:if test="${sessionScope.UID ne null}">
			${sessionScope.UNAME}님 로그인중.
			<form action="logout.pknu" method="post" style="display:inline-block;">
				<input type="submit" value="로그아웃" />
			</form>
            <a href="mypage.pknu"><button>마이페이지</button>
			</c:if>
			
			<a href="join.pknu"><button>회원가입</button></a>
			<a href="${pageContext.request.contextPath}/board/selectlist.do"><button>게시판</button></a>
			<a href="${pageContext.request.contextPath}/seller/selectlist.do"><button>판매자</button></a>
		</div>
	</body>

home1.jsp를 위와 같이 수정해준다.

@WebServlet(urlPatterns = {"/member/logout.pknu"})

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession httpSession = request.getSession();
		httpSession.invalidate(); // 초기화
		response.sendRedirect("home.pknu");
	}

LogoutServlet을 생성하고 확인해보자.


로그인 된 상태

로그인을 눌렀을 때 home으로 간 모습.

마이페이지

@WebServlet(urlPatterns = {"/member/mypage.pknu"})

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String menu = request.getParameter("menu");
		if(menu == null) { // 주소창에 ?menu=1이 없으면 자동으로 생성시킴.
			response.sendRedirect("mypage.pknu?menu=1");
			return; // 여기서 메소드 종료
		}
        HttpSession httpSession = request.getSession();
		String uid = (String)httpSession.getAttribute("UID");
		if( uid != null ) {
		request.setAttribute("title", "마이페이지");
		request.getRequestDispatcher("/WEB-INF/member/mypage1.jsp").forward(request, response);
		}
		else {
			response.sendRedirect("login.pknu");
		}
	}
	

MypageServlet 생성하고

	<body>
		<div class="container">
			<h3>${title}</h3>
			
			<c:if test="${sessionScope.UID ne null}">
				<a href="mypage.pknu?menu=1"><button>회원정보변경</button></a>
				<a href="mypage.pknu?menu=2"><button>회원암호변경</button></a>
				<a href="mypage.pknu?menu=3"><button>회원탈퇴</button></a>
			</c:if>
			
			
		</div>
	</body>

mypage1.jsp 생성하면

마이페이지를 누르면

회원정보변경, 회원암호변경, 회원탈퇴 버튼이 생긴다.

직접 입력하여 마이페이지로 가려고 해도

로그인창으로 이동하게 된다.

	<body>
		<div class="container">
			<h3>${title}</h3>
			
			<c:if test="${sessionScope.UID ne null}">
				<a href="mypage.pknu?menu=1"><button>회원정보변경</button></a>
				<a href="mypage.pknu?menu=2"><button>회원암호변경</button></a>
				<a href="mypage.pknu?menu=3"><button>회원탈퇴</button></a>
				<hr />
			
				<c:if test="${param.menu == 1}">
					회원정보변경화면만들기
				</c:if>
				<c:if test="${param.menu == 2}">
					회원암호변경
				</c:if>
				<c:if test="${param.menu == 3}">
					회원탈퇴
				</c:if>
			</c:if>
		</div>
	</body>

위처럼 mypage1.jsp를 수정해보자

아래에 글자가 생길 것이다.

회원정보변경

<c:if test="${sessionScope.UID ne null}">
				<a href="mypage.pknu?menu=1"><button>회원정보변경</button></a>
				<a href="mypage.pknu?menu=2"><button>회원암호변경</button></a>
				<a href="mypage.pknu?menu=3"><button>회원탈퇴</button></a>
				<hr />
			
				<c:if test="${param.menu == 1}">
					<h3>회원정보변경</h3>
					<form action="update.pknu" method="post">
						이름 : <input type="text" name="name" /><br />
						나이 : <input type="number" name="age" /><br />
						<input type="submit" name="변경" /><br />
					</form>
				</c:if>
				
				<c:if test="${param.menu == 2}">
					<h3>회원암호변경</h3>
					<form action="updatepw.pknu" method="post">
						<input type="password" name="pw" placeholder="현재암호"/><br />
						<input type="password" name="pw1" placeholder="변경할 암호"/><br />
						<input type="password" name="pw2" placeholder="변경할 암호 확인"/><br />
						<input type="submit" name="변경" />
					</form>
				</c:if>
				
				<c:if test="${param.menu == 3}">
					<h3>회원탈퇴</h3>
					<form action="delete.pknu" method="post">
						<input type="password" name="pw" placeholder="현재암호"/><br />
						<input type="submit" name="탈퇴" />
					</form>

mypage1.jsp를 위처럼 변경해보자.

회원정보 변경

암호 변경

탈퇴
각각 이렇게 바뀐 걸 볼 수 있다.

회원정보 변경, 암호 변경, 회원탈퇴

	// 회원정보변경
	@Update ({
		" UPDATE member set name = #{obj.name}, age = #{obj.age} WHERE id = #{obj.id} "
	})
	public int updateMember(@Param("obj") Member obj);
	
	// 비밀번호 변경
	@Update ({
		" UPDATE member set password = #{obj.newpw} WHERE id = #{obj.id} and password = #{obj.password} "
	})
	public int updatepwMember(@Param("obj") Member obj);
	
	// 회원탈퇴
	@Update ({
		" DELETE from member where id = #{obj.id} and password = #{obj.password} "
	})
	public int deleteMemberOne (@Param("obj") Member obj);

MemberMapper를 만들고 시작하자

이름,나이 변경
@WebServlet(urlPatterns = {"/member/update.pknu"})

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		HttpSession httpSession = request.getSession();
		String id = (String)httpSession.getAttribute("UID");
		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		
		Member obj = new Member();
		obj.setId(id);
		obj.setName(name);
		obj.setAge(age);
		
		int ret = MybatisContext.getSqlSession().getMapper(MemberMapper.class).updateMember(obj);
		
		if(ret == 1) {
			response.sendRedirect("login.pknu");
		}
		else {
			response.sendRedirect("mypage.pknu?menu=1");
		}	
	}

UpdateServlet을 만들고 실행해보자
변경에 성공하면 로그인창, 실패하면 다시 변경하는 창으로 간다.

제출을 누르면

이렇게 로그인창으로 가게 된다.

암호 변경
@WebServlet(urlPatterns = {"/member/updatepw.pknu"})

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// 비밀번호 변경
		HttpSession httpSession = request.getSession();
		String id = (String)httpSession.getAttribute("UID");
		String pw = request.getParameter("pw");
		String newpw = request.getParameter("pw1");
		String pwHash = Hash.hashPW(id, pw);
		String newpwHash = Hash.hashPW(id, newpw);
		
		Member obj = new Member();
		obj.setId(id);
		obj.setPassword(pwHash);
		obj.setNewpw(newpwHash);
		
		
		int ret = MybatisContext.getSqlSession().getMapper(MemberMapper.class).updatepwMember(obj);
		
		if(ret != 0) {
			response.sendRedirect("login.pknu");
		}
		else {
			response.sendRedirect("mypage.pknu?menu=2");
		}

	}

UpdatepwServlet을 만들고 또 실행해보자.
마찬가지로 변경 성공하면 로그인창, 실패하면 다시 변경창으로 간다.

현재암호는 3인데 일부러 틀려서 작성해보겠다.

제출!!

틀렸다고 다시 하란다.

올바르게 작성하였더니 로그인창으로 왔다.

바꾼 비밀번호로 다시 로그인한 모습.

탈퇴
@WebServlet(urlPatterns = {"/member/delete.pknu"})

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		HttpSession httpSession = request.getSession();
		String id = (String)httpSession.getAttribute("UID");
		String pw = request.getParameter("pw");
		String pwHash = Hash.hashPW(id, pw);
		
		Member obj = new Member();
		obj.setId(id);
		obj.setPassword(pwHash);
		
		
		int ret = MybatisContext.getSqlSession().getMapper(MemberMapper.class).deleteMemberOne(obj);
		
		if(ret != 0) {
			response.sendRedirect("login.pknu");
		}
		else {
			response.sendRedirect("mypage.pknu?menu=3");
		}
	}

역시나 DeleteServlet을 만들고 실행해보자.

이번에도 마찬가지로 성공하면 로그인창, 실패하면 같은 창이다.


틀린 암호 입력하고 제출!

어림도 없다. 다시 올바른 암호를 적어보자.

성공하여 로그인창으로 왔다.

DB에도 3이 사라진 걸 확인할 수 있다.

0개의 댓글