Mini Project - Stream Park 3

주세환·2023년 4월 27일
0

JSP

목록 보기
16/16

Github

바빠서 중간중간 기록을 하지 못하였다.

팀원들과 연동까지 한 상태이다.

Profile

package Controller.Sehwan_Controller;

import java.io.IOException;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// 127.0.0.1:8080/web02/api/profile/create.json
@WebServlet(urlPatterns = {"/profile/home.do"})
public class ProfileHomeController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/jsp_jsh/profile.jsp").forward(request, response);
	}

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

	}
}

ProfileHomeController.java


Mapper, Service & Service Impl

package Mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import dto.Profile;

public interface ProfileMapper {
	
	// 프로필 생성
	@Insert({ 
		" INSERT INTO profile (nickname, id, profilepw) ",
		" VALUES( #{obj.nickname}, #{obj.id}, #{obj.profilepw} ) " 
	})
	public int createProfileOne(@Param("obj") Profile obj);
	
	
	// #{ } => 값을 표현할때
		// ${ } => 컬럼명, 테이블명 등.   
		@Select({
			" SELECT p.* FROM profile p WHERE ${column} LIKE '%' || #{text} || '%' ORDER BY profileno DESC "
		})
		public List<Profile> selectProfileList(@Param("column") String column, 
				@Param("text")String text);
	
	// 프로필 암호 변경
	@Update({
		" UPDATE profile SET profilepw = #{obj.newprofilepw} WHERE id = #{obj.id} and nickname = #{obj.nickname} and profilepw = #{obj.profilepw} "
	})
	public int newProfilePw(@Param("obj") Profile obj);
	
	// 프로필 닉네임 변경
	@Update({
		" UPDATE profile SET nickname = #{obj.newnickname} WHERE id = #{obj.id} and nickname = #{obj.nickname} and profilepw = #{obj.profilepw} "
	})
	public int newProfileNickname(@Param("obj") Profile obj);
	
	// 프로필 삭제
	@Delete({
		" DELETE FROM profile WHERE nickname = #{obj.nickname} and profilepw = #{obj.profilepw} "
	})
	public int deleteProfile(@Param("obj") Profile obj);
	
	// 프로필 닉네임 조회
	@Select({
		" SELECT count(*) FROM profile WHERE nickname = #{obj.nickname} "
	})
	public Profile selectProfileNickname(@Param("obj") Profile obj);
	
	@Select({
		" SELECT p.* FROM profile p where id=#{id}"
	})
	public List<Profile> selectProfileAll(@Param("id") String id);
	
	// 물품번호를 받아서 해당하는 이미지 1개 반환 없으면 0 반환
	@Select({
		" SELECT NVL(min(no),0) FROM Profileimg WHERE profileno = #{profileno}"
	})
	public long selectProfileimgOne(@Param("profileno") long profileno);

	// 닉네임 중복체크
	@Select({
		" SELECT p.* FROM Profile p WHERE nickname = #{nickname} "
	})
	public List<Profile> selectNicknameCheck(@Param("nickname") String nickname);
	
	// 암호 일치한지 확인
	@Select({
		" SELECT p.profilepw FROM Profile p WHERE id = #{obj.id} and nickname = #{obj.nickname} "
	})
	public List<Profile> selectProfilePwCheck(@Param("obj") Profile obj);
	
	// 프로필 하나 불러오기
	@Select({
		" Select p.* FROM profile p WHERE profileno=#{profileno} "
	})
	public Profile selectProfileOne(@Param("profileno") long profileno);
	
	// 프로필 갯수 불러오기
	@Select({
		" SELECT COUNT(*) FROM profile WHERE id = #{id} "
	})
	public long selectProfileCount(@Param("id") String id);
}

ProfileMapper이다. Profile 관련된 Mapper를 모두 모아놓았다.


package Service;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import dto.Profile;

public interface ProfileService {

	// 프로필 생성
	public int createProfileOne(@Param("obj") Profile obj);

	// 프로필 암호 변경
	public int newProfilePw(@Param("obj") Profile obj);
	
	// 프로필 닉네임 변경
	public int newProfileNickname(@Param("obj") Profile obj);
	
	// 프로필 삭제
	public int deleteProfile(@Param("obj") Profile obj);
	
	// 프로필 리스트 조회
	public List<Profile> selectProfileList(@Param("column") String column, @Param("text")String text);

	public List<Profile> selectProfileAll(@Param("id") String id);

	public long selectProfileimgOne(@Param("profileno") long profileno);
	
	public List<Profile> selectNicknameCheck(@Param("nickname") String nickname);
	
	public List<Profile> selectProfilePwCheck(@Param("obj") Profile obj);
	
	public Profile selectProfileOne(@Param("profileno") long profileno);
	
	public long selectProfileCount(@Param("id") String id);
}

ProfileService.java


package Service;

import java.util.List;

import Mapper.ProfileMapper;
import config.MyBatisContext;
import dto.Profile;

public class ProfileServiceImpl implements ProfileService {

	ProfileMapper mapper = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class);


	// 프로필 생성
	@Override
	public int createProfileOne(Profile obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).createProfileOne(obj);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}


	@Override
	public int newProfilePw(Profile obj){
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).newProfilePw(obj);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public int newProfileNickname(Profile obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).newProfileNickname(obj);
			return ret;
		}catch(Exception e) {
			e.printStackTrace();
		return 0;
		}
	}

	@Override
	public int deleteProfile(Profile obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).deleteProfile(obj);
			return ret;
		}
		catch (Exception e) {			
			return 0;
		}
	}

	@Override
	public List<Profile> selectProfileList(String column, String text) {
		try {
			List<Profile> list = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectProfileList(column, text);
			return list;
		}
		catch (Exception e) {			
			return null;
		}
	}


	@Override
	public long selectProfileimgOne(long profileno) {
		try {
			long ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectProfileimgOne(profileno);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
		return 0;
		
		}
	}


	@Override
	public List<Profile> selectProfileAll(String id) {
		try {
			List<Profile> list = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectProfileAll(id);
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

	@Override
	public List<Profile> selectNicknameCheck(String nickname) {
		try {
			List<Profile> list = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectNicknameCheck(nickname);
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}


	@Override
	public List<Profile> selectProfilePwCheck(Profile obj) {
		try {
			List<Profile> list = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectProfilePwCheck(obj);
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}


	@Override
	public Profile selectProfileOne(long profileno) {
		try {
			Profile ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectProfileOne(profileno);
			return ret;
		}
		catch(Exception e) {
			e.printStackTrace();
			return null;
		}
	}


	@Override
	public long selectProfileCount(String id) {
		try {
			long ret = MyBatisContext.getSqlSession().getMapper(ProfileMapper.class).selectProfileCount(id);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}		
}

ProfileServiceImpl

Profile Create

package Controller.Sehwan_Controller;

import java.io.IOException;
import java.util.List;

import Service.ProfileService;
import Service.ProfileServiceImpl;
import config.Hash;
import dto.Profile;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// 127.0.0.1:8080/web02/api/profile/create.json
@WebServlet(urlPatterns = { "/profile/create.do" })
public class ProfileCreateController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private ProfileService pService = new ProfileServiceImpl();

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String id = (String)request.getSession().getAttribute("id");
		request.setAttribute("id", id);
		request.getRequestDispatcher("/WEB-INF/jsp_jsh/profile_create.jsp").forward(request, response);
	}

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

		String hashPw = Hash.hashPW(request.getParameter("id"), request.getParameter("profilepw"));
		Profile obj = new Profile();

//		세션에 저장된 id (나중에 수정)
//		String id = (String)request.getSession().getAttribute("id");
		obj.setId(request.getParameter("id"));
		obj.setNickname(request.getParameter("nickname"));
		obj.setProfilepw(hashPw);

		
		// 데이터베이스에서 닉네임이 이미 존재하는지 확인
		List<Profile> existingProfile = pService.selectNicknameCheck(request.getParameter("nickname"));
		
		if (existingProfile.isEmpty()) { // 닉네임이 사용 가능한 경우
		    int ret = pService.createProfileOne(obj);
		    if (ret == 1) {
		        request.setAttribute("message", "프로필이 생성되었습니다.");
		        request.setAttribute("url", "select.do");
		        request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		    }
		} else {
		    request.setAttribute("message", "중복된 닉네임입니다.");
		    request.setAttribute("url", "create.do");
		    request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		}
	}
}

ProfileCreateController이다.


<%@ 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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stream park</title>


<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<!-- 1. 부트스트렙용 css CDN 추가 -->
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
	crossorigin="anonymous">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
	rel="stylesheet">

<style>
body{
	background-color: black;
	
}
.container{
	display: block;
	margin: 50px 50px 50px 50px;
	
}
.prfileText{
	color: #EFC900;
	margin-left:30px;
	margin-top: 50px; 
	font-size: 60px;
	font-weight: 700;
}
.text{
	color: white;
	margin-left: 170px;
	margin-top: 70px;
}
.text1{
	font-size: 30px;
	font-weight: 600;
}
hr{
	color: white;
	width: 30px;
	height: 3px;
	background-color: white;
	margin-left: 180px;
	padding-left: 100px;
}
.main{
	 display: grid;
  place-items: center; 
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  height: 400px;
}


.plus{
	color: white;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: black;
	margin-left: 10px;
	margin-right: 10px;
	border: none;
}
.logout{
	color: #EFC900;
	text-decoration: none;
}
.info{
	color: #EFC900;
	text-decoration: none;
}
path{
	color: #EFC900;
}
</style>
</head>

<body class="d-flex justify-content-center">
	<div class="container">
		<header class="row"> 
			<h1 class="prfileText">StreamPark</h1>
		</header>
		<div class="text row ">
			<p class="text1">프로필을 생성</p>
			
		</div>	
		<hr class="title_line" />
		<div class="  row d-flex justify-content-center ">
			<form action="create.do" method="post" id="form">
	            <div class="row">
	                <div class="col-6" style="padding-left: 100px; margin-left: 200px;">
	                	<div class="form-floating mb-2" hidden="true">
						    <input type="text" name="id" id="id" class="form-control" value="${id}" readonly="readonly" />
						    <label for="id" class="form-label">아이디</label>
						</div>
		                <div class="form-floating mb-2">
		                    <input type="text" name="nickname" id="nickname" class="form-control"/>
		                    <label for="nickname" id="lbl_check" class="form-label">닉네임</label>
		                </div>
		                <div class="form-floating mb-2">
		                    <input type="password" name="profilepw" id="profilepw" class="form-control" />
		                    <label for="profilepw" class="form-label">암호</label>
		                </div>
		                <div class="form-floating mb-2">
		                    <input type="password" id="profilepw1" class="form-control"/>
		                    <label for="profilepw1" class="form-label">암호 확인</label>
		                </div>
		                <div>
	                    	<input type="button" value="프로필 생성" class="btn btn-warning" onclick="createAction()"/>
	                    </div>
	                </div>
	            </div>
            </form>
			
			
				
		
		</div>
		<footer>
			<div>
			 <a class="logout" href="${pageContext.request.contextPath}/member/login.do">Logout</a>
			 <br />
			 
			 <br/>
			 <a class="info" href="${pageContext.request.contextPath}/member/info.do"><i class="bi bi-gear"></i></a>
			</div>
			<br/>
			<a href="select.do" class="btn btn-warning">프로필 선택</a>
		</footer>

	</div>
	
	


	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.6.4.min.js"
		integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
		crossorigin="anonymous">
		
	</script>
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
		crossorigin="anonymous">
		
	</script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"
		integrity="sha512-frFP3ZxLshB4CErXkPVEXnd5ingvYYtYhE5qllGdZmcOlRKNEPbufyupfdSTNmoF5ICaQNO6SenXzOZvoGkiIA=="
		crossorigin="anonymous" referrerpolicy="no-referrer">
		
	</script>
	<!-- axios -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"
		integrity="sha512-nnNHpffPSgINrsR8ZAIgFUIMexORL5tPwsfktOTxVYSv+AUAILuFYWES8IHl+hhIhpFGlKvWFiz9ZEusrPcSBQ=="
		crossorigin="anonymous" referrerpolicy="no-referrer">
		
	</script>

	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
	<script>
	// 공통변수 모든 함수에서 사용가능함.
	
	var nicknamecheck = 0; // 1이면 사용가능 0은 사용불가
	
	function createAction() {
		const id = document.getElementById("id");
		const nickname = document.getElementById("nickname");
		const profilepw = document.getElementById("profilepw");
		const profilepw1 = document.getElementById("profilepw1");
		
		if(nickname.value.length <= 0){
			alert('닉네임을 입력하세요.');
			nickname.focus();
			return false; // 함수 종료, 전송하지 않음
		}
		
		if(profilepw.value.length <= 0){
			alert('암호를 입력하세요.');
			profilepw.focus();
			return false;
		}
		
		if( profilepw.value !== profilepw1.value){
			alert('암호가 일치하지 않습니다.');
			profilepw1.focus();
			return false;
		}
		
		
		document.getElementById("form").submit();
	}
	
	</script>
</body>
</html>

profile_create.jsp이다.


왼쪽 두개는 이미 만든 프로필이다. 오른쪽 + 를 누르면 새로운 프로필을 만들 수 있다.


세션에 저장된 id를 불러오기 때문에 닉네임, 암호만 입력하면 생성이 가능하다.


중복된 닉네임 작성 시 알림이 뜬다.


입력한 암호와 암호확인이 일치하지 않으면 알림창이 뜬다.


조건에 만족하면 이렇게 프로필 생성이 된다.


프로필은 계정당 최대 4개씩만 생성할 수 있도록 설정하였다.

프로필의 수가 4개가 되면 자동으로 프로필 추가하는 버튼이 사라진다.


Profile Update

Profile Update PW

package Controller.Sehwan_Controller;

import java.io.IOException;
import java.util.List;

import Service.ProfileService;
import Service.ProfileServiceImpl;
import config.Hash;
import dto.Profile;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// 127.0.0.1:8080/web02/api/profile/create.json
@WebServlet(urlPatterns = {"/profile/updatepw.do"})
public class ProfileUpdatePwController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private ProfileService pService = new ProfileServiceImpl();

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/jsp_jsh/profile_updatepw.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
//		String id = (String)request.getSession().getAttribute("id");
		String id = request.getParameter("id");
		String nickname = request.getParameter("nickname");
		String hashPw = Hash.hashPW(id, request.getParameter("profilepw"));
		String hashPw1 = Hash.hashPW(id, request.getParameter("newprofilepw"));

		Profile obj = new Profile();
		
		obj.setId(id);
		obj.setNickname(nickname);
		obj.setProfilepw(hashPw);
		obj.setNewprofilepw(hashPw1);
		
		List<Profile> currentpwList = pService.selectProfilePwCheck(obj);
		String currentpw = currentpwList.isEmpty() ? "" : currentpwList.get(0).getProfilepw();
		
		if(currentpw.toString().equals(hashPw)) {
			int ret = pService.newProfilePw(obj);
			if(ret == 1) {
				request.setAttribute("message", "암호가 변경되었습니다.");
		        request.setAttribute("url", "home.do");
		        request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
		}
		else {
		    request.setAttribute("message", "현재 암호가 일치하지 않습니다.");
		    request.setAttribute("url", "updatepw.do");
		    request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		}
//		response.sendRedirect(request.getContextPath() + "/profile/home.do");
	}				
}

ProfileUpdatePw.java


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>프로필</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
		<a href="select.do" class="btn btn-primary">프로필 선택</a>
        <a href="create.do" class="btn btn-primary">프로필 생성</a>
        <a href="updatepw.do" class="btn btn-primary">프로필 암호 변경</a>
        <a href="updatenickname.do" class="btn btn-primary">닉네임 변경</a>
        <a href="delete.do" class="btn btn-primary">프로필 삭제</a>
		<hr />
		<div
			style="width: 600px; margin: 0 auto; padding: 50px; border: 1px solid #efefef;">
			<form action="updatepw.do" method="post" id="form">
				<div class="row">
					<div class="col-sm">
						<div class="form-floating mb-2">
							<div>
								<input type="text" id="id" name="id" placeholder="아이디"
									value="${obj.id}" />
							</div>
							<div class="form-floating mb-2">
								<input type="text" id="nickname" name="nickname"
									placeholder="닉네임" value="${obj.nickname}" />
							</div>
							<div class="form-floating mb-2">
								<input type="password" name="profilepw"
									id="profilepw" placeholder="현재 암호" value="${obj.profilepw}" />
							</div>
							<div class="form-floating mb-2">
								<input type="password"  name="newprofilepw"
									id="newprofilepw" placeholder="변경할 암호"
									value="${obj.newprofilepw}" />
							</div>
							<div class="form-floating mb-2">
								<input type="password" name="newprofilepw1"
									id="newprofilepw1" placeholder="암호 확인"
									value="${obj.newprofilepw}" />
							</div>
							<div>
								<input type="button" value="암호 변경" class="btn btn-primary"
									onclick="updatePassword()" />
							</div>
						</div>
					</div>
				</div>
			</form>

		</div>
	</div>
</body>
<script>
	function updatePassword() {
		// 유효성 검사
		const id = document.getElementById("id");
		const nickname = document.getElementById("nickname");
		const profilepw = document.getElementById("profilepw");
		const newprofilepw = document.getElementById("newprofilepw");
		const newprofilepw1 = document.getElementById("newprofilepw1");

		if (profilepw.value.length <= 0) {
			alert('현재 암호를 입력하세요.');
			profilepw.focus();
			return false; // 함수 종료, 전송하지 않음
		}

		if (newprofilepw.value.length <= 0) {
			alert('변경할 암호를 입력하세요.');
			newprofilepw.focus();
			return false; // 함수 종료, 전송하지 않음
		}

		if (newprofilepw.value !== newprofilepw1.value) {
			alert('암호가 일치하지 않습니다.');
			newprofilepw.focus();
			return false;
		}

		document.getElementById("form").submit();
	}
</script>

profile_updatepw.jsp이다.


현재암호를 입력하지 않고 변경버튼을 눌렀을 때.


현재 암호가 일치하지 않을 때.


암호와 암호확인이 일치하지 않을 경우에도 알림창이 뜬다.


Profile Update Nickname

package Controller.Sehwan_Controller;

import java.io.IOException;
import java.util.List;

import Service.ProfileService;
import Service.ProfileServiceImpl;
import config.Hash;
import dto.Profile;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// 127.0.0.1:8080/web02/api/profile/create.json
@WebServlet(urlPatterns = { "/profile/updatenickname.do" })
public class ProfileUpdateNicknameController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private ProfileService pService = new ProfileServiceImpl();

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/jsp_jsh/profile_updatenickname.jsp").forward(request, response);
	}

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

//		String id = (String)request.getSession().getAttribute("id");
		String id = request.getParameter("id");
		String nickname = request.getParameter("nickname");
		String newnickname = request.getParameter("newnickname");
		String hashPw = Hash.hashPW(id, request.getParameter("profilepw"));

		Profile obj = new Profile();

		obj.setId(id);
		obj.setNickname(nickname);
		obj.setNewnickname(newnickname);
		obj.setProfilepw(hashPw);

		System.out.println(nickname.toString());
		System.out.println(newnickname.toString());
		// 기존 닉네임과 새 닉네임이 같은 경우 중복확인을 하지 않음
		if (!nickname.equals(newnickname)) {
		    List<Profile> existingProfile = pService.selectNicknameCheck(newnickname);
		    if (!existingProfile.isEmpty()) { // 닉네임이 이미 사용중인 경우
		        request.setAttribute("message", "중복된 닉네임입니다.");
		        request.setAttribute("url", "updatenickname.do");
		        request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		        return;
		    } else { // 닉네임이 사용 중이지 않은 경우
		        obj.setNewnickname(newnickname);
		    }
		} else { // 기존 닉네임과 새 닉네임이 같은 경우
		    obj.setNewnickname(nickname);
		}

		int ret = pService.newProfileNickname(obj);
		if (ret == 1) {
			request.setAttribute("message", "닉네임 변경 성공");
			request.setAttribute("url", "home.do");
			request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		}
		else {
			request.setAttribute("message", "닉네임이 변경되지 않았습니다.");
			request.setAttribute("url", "updatenickname.do");
			request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		}
	}
}

ProfileUpdateNickname.java


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>프로필</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
</head>
<div class="container">
		<a href="select.do" class="btn btn-primary">프로필 선택</a>
        <a href="create.do" class="btn btn-primary">프로필 생성</a>
        <a href="updatepw.do" class="btn btn-primary">프로필 암호 변경</a>
        <a href="updatenickname.do" class="btn btn-primary">닉네임 변경</a>
        <a href="delete.do" class="btn btn-primary">프로필 삭제</a>
	<hr />
	<div
		style="width: 600px; margin: 0 auto; padding: 50px; border: 1px solid #efefef;">
		<form action="updatenickname.do" method="post" id="form">
			<div class="row">
				<div class="col-sm">
					<div>
						<input type="text" id="id" name="id" placeholder="아이디"
							value="${obj.id}" />
					</div>
					<div>
						<input type="text" id="nickname" name="nickname"
							placeholder="현재 닉네임" value="${obj.nickname}" />
					</div>
					<div>
						<input type="text" id="newnickname" name="newnickname"
							placeholder="변경할 닉네임" value="${obj.newnickname}" />
					</div>
					<div>
						<input type="password" id="profilepw" name="profilepw"
							placeholder="암호" value="${obj.profilepw}" />
					</div>
					<input type="button" value="닉네임 변경" onclick="updateNickname()" />
				</div>
			</div>
		</form>
	</div>
</div>
<script>
	function updateNickname() {
		// 유효성 검사
	
		const id = document.getElementById("id");
		const nickname = document.getElementById("nickname");
		const newnickname = document.getElementById("newnickname");
		const profilepw = document.getElementById("profilepw");		
	
		if (nickname.value == newnickname.value) {
			alert("현재 사용중인 닉네임입니다.");
			nickname.focus();
			return false;
		}
	
		document.getElementById("form").submit();
		return true;
	}
</script>

profile_updatenickname.jsp


닉네임 변경창


중복된 닉네임 입력시.


성공적으로 변경했을 때.


변경 전

변경 후


Profile delete

package Controller.Sehwan_Controller;

import java.io.IOException;

import Service.ProfileService;
import Service.ProfileServiceImpl;
import config.Hash;
import dto.Profile;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// CustomerFilter에 url 등록
@WebServlet(urlPatterns = { "/profile/delete.do" })
public class ProfileDeleteController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private ProfileService pService = new ProfileServiceImpl();

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/jsp_jsh/profile_delete.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String hashPw = Hash.hashPW(request.getParameter("id"), request.getParameter("profilepw"));
		Profile obj = new Profile();
//		String id = (String)request.getSession().getAttribute("id");

		obj.setId(request.getParameter("id"));
		obj.setNickname(request.getParameter("nickname"));
		obj.setProfilepw(hashPw);
		int ret = pService.deleteProfile(obj);
			if (ret == 1) {
				request.setAttribute("message", "프로필이 삭제되었습니다.");
				request.setAttribute("url", "select.do");
				request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
			else {
				request.setAttribute("message", "암호가 올바르지 않습니다.");
				request.setAttribute("url", "delete.do");
				request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
	}
}

ProfileDeleteController.java


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>프로필</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
</head>
<div class="container">
		<a href="select.do" class="btn btn-primary">프로필 선택</a>
        <a href="create.do" class="btn btn-primary">프로필 생성</a>
        <a href="updatepw.do" class="btn btn-primary">프로필 암호 변경</a>
        <a href="updatenickname.do" class="btn btn-primary">닉네임 변경</a>
        <a href="delete.do" class="btn btn-primary">프로필 삭제</a>
	<hr />
	<div
		style="width: 600px; margin: 0 auto; padding: 50px; border: 1px solid #efefef;">
		<form action="delete.do" method="post">
			<div class="row">
				<div class="col-sm">
					<div>
						<input type="text" name="id" placeholder="아이디 입력"
							value="${obj.id}" />
					</div>
					<div>
						<input type="text" name="nickname" placeholder="닉네임 입력"
							value="${obj.nickname}" />
					</div>
					<div>
						<input type="password" name="profilepw" placeholder="암호 입력"
							value="${obj.profilepw}" />
					</div>
					<input type="button" value="프로필 삭제" onclick="deleteMemberOne()" />
				</div>
			</div>
		</form>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
<script>



	function deleteMemberOne() {
		// 유효성 검사
		const id = document.getElementsByName("id")[0];
		const nickname = document.getElementsByName("nickname")[0];
		const profilepw = document.getElementsByName("profilepw")[0];

		//  document.getElementsByTagName("form")[0].submit();
		const form = document.getElementsByTagName("form");
		form[0].submit();
	}
</script>

profile_delete.jsp


프로필 삭제 창


올바르지 않은 암호를 입력했을 때.


성공적으로 삭제했을 때.


삭제 전

삭제 후


Profileimg

package Controller.Sehwan_Controller;

import java.io.IOException;

import Service.ProfileimgService;
import Service.ProfileimgServiceImpl;
import dto.Profileimg;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// 컨트롤러 X, DB의 이미지를 url형태로 변경해서 반환

// jsp에서 scr에 리소스의 이미지의 위치를 설정하는 용도로 사용
// <img src="/item/image?no=4" style="width:60px; height:60px" />
//			화면에 출력하기 위한 용도

// 크롬에서 http://127.0.0.1:8000/web03/item/image?no=1 확인
@WebServlet(urlPatterns = "/profile/image")
@MultipartConfig()
public class ProfileimgServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private ProfileimgService piService = new ProfileimgServiceImpl();

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

		long no = Long.parseLong(request.getParameter("no"));
		//no를 전달하여 mapper에서 ItemImage정보 1개 가져옴.
		Profileimg obj = piService.selectProfileimgOne(no);
		
		response.setContentType(obj.getFiletype()); // 이건 이미지다. html 아니다.
		response.setStatus(200); // 200은 정상적인 처리결과다.
		response.getOutputStream().write(obj.getFiledata()); // 이게 실제 정보다.
		
	}
}

ProfileimgServlet.java


Mapper, Service & Service Impl

package Mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import dto.Profileimg;

@Mapper
public interface ProfileimgMapper {
	
	// 프로필 이미지 1개 등록
	@Insert({
		" INSERT INTO profileimg(filename, filesize, filetype, filedata, profileno) ",
		" VALUES(#{obj.filename}, #{obj.filesize}, #{obj.filetype}, #{obj.filedata}, #{obj.profileno}) "
	})
	public int insertProfileimgOne(@Param("obj") Profileimg obj);
	
	// 프로필 이미지 수정
	@Update({
		" UPDATE profileimg SET filename = #{obj.filename}, filesize = #{obj.filesize}, filetype = #{obj.filetype},", 
		" filedata = #{obj.filedata} WHERE profileno = #{obj.profileno} AND NO = #{obj.no} "
	})
	public int updateProfileimgOne(@Param("obj") Profileimg obj);
	
	// 프로필 이미지 삭제
	@Delete({
		" DELETE FROM profileimg WHERE NO = #{no} "
	})
	public int deleteProfileimgOne(@Param("no") long no);
	
	// 물품번호를 이용해서 관련된 전체 이미지 번호 반환
	@Select({
		" SELECT p.NO FROM profileimg p WHERE profileno = #{profileno} ORDER BY no DESC "
	})
	public List<Long> selectProfileimgNo (@Param("profileno") long profileno);
	
	@Select({
		" SELECT p.no FROM profileimg p "
	})
	public List<Long> selectProfileNoAll();
	
	// 프로필 이미지를 받아서 해당하는 이미지 1개 반환 없으면 0 반환
	@Select({
		" SELECT * FROM profileimg WHERE profileno = #{profileno}"
	})
	public Profileimg selectProfileimgOne(@Param("profileno") long profileno);
}

ProfileimgMapper.java


package Service;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import dto.Profileimg;

public interface ProfileimgService {

	// 프로필 이미지 추가
	public int insertProfileimgOne(@Param("obj") Profileimg obj);
	
	// 프로필 이미지 수정
	public int updateProfileimgOne(@Param("obj") Profileimg obj);
	
	// 프로필 이미지 삭제
	public int deleteProfileimgOne(@Param("no") long no);
	
	// 프로필 이미지 1개 가져오기
	public Profileimg selectProfileimgOne(@Param("profileno") long profileno);
	
	// 프로필 이미지번호 가져오기
	public List<Long> selectProfileimgNo (@Param("profileno") long profileno);
	
	// 프로필 no 다 가져오기
	public List<Long> selectProfileimgAll();
}

ProfileimgService.java


package Service;

import java.util.List;

import Mapper.ProfileimgMapper;
import config.MyBatisContext;
import dto.Profileimg;

public class ProfileimgServiceImpl implements ProfileimgService {

	ProfileimgMapper mapper = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class);

	@Override
	public int insertProfileimgOne(Profileimg obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class).insertProfileimgOne(obj);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public int updateProfileimgOne(Profileimg obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class).updateProfileimgOne(obj);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public int deleteProfileimgOne(long no) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class).deleteProfileimgOne(no);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public List<Long> selectProfileimgNo(long profileno) {
		try {
			List<Long> list = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class).selectProfileimgNo(profileno);
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

	@Override
	public List<Long> selectProfileimgAll() {
		try {
			List<Long> list = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class).selectProfileNoAll();
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

	@Override
	public Profileimg selectProfileimgOne(long profileno) {
		try {
			Profileimg ret = MyBatisContext.getSqlSession().getMapper(ProfileimgMapper.class).selectProfileimgOne(profileno);
			return ret;
		}
		catch (Exception e) {
			return null;
		}
	}
}

ProfileimgServiceImpl.java


Profileimg Insert

package Controller.Sehwan_Controller;

import java.io.IOException;
import java.util.List;

import Service.ProfileimgService;
import Service.ProfileimgServiceImpl;
import dto.Profile;
import dto.Profileimg;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;

@WebServlet(urlPatterns = {"/profile/imageinsert.do"})
@MultipartConfig()
public class ProfileimgInsertController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private ProfileimgService pService = new ProfileimgServiceImpl();

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1. 주소창의 물품번호 가져오기
		String profileno =(String) request.getSession().getAttribute("profileno");
		request.setAttribute("profileno", profileno);
		
		System.out.println(profileno);
		// 2. 물품번호에 해당하는 이미지 번호들...
		List<Long> imageNo = pService.selectProfileimgNo(Long.parseLong(profileno));
		request.setAttribute("imageNo", imageNo);
				
		System.out.println(imageNo);
		request.getRequestDispatcher("/WEB-INF/jsp_jsh/profileimg_insert.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Long profileno = Long.parseLong( request.getParameter("profileno"));
		Part file = request.getPart("file");
		
		Profile obj1 = new Profile();
		obj1.setNickname(request.getParameter("nickname"));
		
		Profileimg obj = new Profileimg();
		obj.setProfileno(profileno);
		obj.setFilename(file.getSubmittedFileName());
		obj.setFilesize(file.getSize());
		obj.setFiletype(file.getContentType());
		obj.setFiledata(file.getInputStream().readAllBytes());
		System.out.println(obj);
		// mapper로 추가 후
		
		int ret = pService.insertProfileimgOne(obj);
		if( ret == 1 ) {
			// 절대 경로를 이용한 페이지 이동
			response.sendRedirect(request.getContextPath() +"/profile" + "/imageinsert.do?profileno="+profileno);
		}
		else {
			// 상대 경로를 이용한 페이지 이동
			response.sendRedirect("imageinsert.do?profileno="+profileno);

		}
	}
}

ProfileimgInsertController.java


<%@ 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="ko">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 등록</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
</head>

<body>
	<div class="container">
        <div style="width:800px; margin:0 auto; padding: 50px; border:1px solid #efefef;">
        	<h3>이미지 등록</h3>
        	<hr />
        	<form id="form" action="${pageContext.request.contextPath}/profile/imageinsert.do" method="post"
        		enctype="multipart/form-data">
	            <div class="row">
	                <div class="col-sm">
		                <div class="form-floating mb-2">
		                    <input type="text" name="profileno" id="profileno"
		                    	style="background-color:#efefef;" 
		                    	value="${profileno}" class="form-control" readonly />
		                    <label for="profileno" class="form-label">프로필 고유 번호</label>
		                </div>
		                
		                <div class="form-floating mb-2">
		                	<img src="${pageContext.request.contextPath}/resources/profile_images/default.png" 
		                		id="img" style="width:50px;height:50px; cursor:pointer;"
		                		onclick="clickImage()">
		                		
		                    <input type="file" name="file" id="file" class="form-control"
		                    	style="display:block"
		                    	onchange="imageChange(this)" />
		                </div>
	
	                    	<input type="button" value="등록" class="btn btn-primary" 
	                    		onclick="insertImageProfile()"/>
	                    	<a href="select.do" class="btn btn-success" >목록으로</a>	
	                </div>
	            </div>
            </form>
            
            <hr />
            
            
            <hr />
            <c:forEach var="no" items="${imageNo}">
            	<img src="${pageContext.request.contextPath}/profile/image?no=${profileno}"
            		style="width:100px;height:100px" />
            	<button onclick="profileUpdateModal('${no}', '${profileno}')">수정</button>	
            	<button onclick="profileImageDelete('${no}', '${profileno}')">삭제</button>
            	<br />	
            </c:forEach>
            
		</div>
	</div>
	
	<!-- 이미지 수정 모달창 -->
	<!-- Modal -->
	<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <form action="imageupdate.do" method="post" enctype="multipart/form-data">
	  <div class="modal-dialog">
	    <div class="modal-content">
	    
			<div class="modal-header">
			  <h5 class="modal-title fs-5" id="exampleModalLabel">이미지 수정</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			
			<div class="modal-body">
			  이미지 번호 : <input type="text" name="imageno" id="modal_image_no" readonly /><br />
			  현재 이미지 : <img src="" style="width:100px;height:100px" id="modal_image_src" /><br />
			  <input type="hidden" name="profileno" value="${profileno}" />
			  변경 이미지 : <input type="file" name="file" id="modal_image_file" /><br />
			</div>
			
			<div class="modal-footer">
			  <input type="submit" class="btn btn-primary" value="이미지변경" />
			  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
			</div>
	    </div>
	  </div>
	  </form>
	</div>
	
	<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.4.min.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
	<script>
	
		function profileUpdateModal(no, profileno) {
			const imageNo = document.getElementById("modal_image_no");
			const imageSrc = document.getElementById("modal_image_src");
			const imageFile = document.getElementById("modal_image_file");
			
			imageNo.value = no;
			imageSrc.src = '${pageContext.request.contextPath}/profile/image?no=' + profileno;
			
			const modal = new bootstrap.Modal(document.getElementById("exampleModal"),{});
			modal.show();
		}
	
	
	function profileImageDelete(no, profileno) { // 삭제할이미지번호, 물품번호
		const ret = confirm('삭제할까요?');
		if(ret === true) {
			//<form action="imagedelete.do" method="post" style="display:none;">
			var form = document.createElement("form");
			form.setAttribute("action", "imagedelete.do");
			form.setAttribute("method", "post");
			form.style.display="none";

			//<input type="hidden" name="imageno" value="삭제할번호" />
			var input = document.createElement("input");
			input.setAttribute("type", "hidden")
			input.setAttribute("name", "imageno");
			input.setAttribute("value", Number(no)); // typescript
			
			//<input type="hidden" name="videocode" value="삭제할번호" />
			var input1 = document.createElement("input");
			input1.setAttribute("type", "hidden")
			input1.setAttribute("name", "profileno");
			input1.setAttribute("value", Number(profileno));
			
			// form태그에 추가
			form.appendChild(input);
			form.appendChild(input1);
			// body에 추가
			document.body.appendChild(form);
			// form전송
			form.submit();
		}
	}
	
		// document.getElementById("아이디"); id가 일치하는 1개 찾기
		// document.getElementsByName("name값"); name값이 일치하는 n개 찾기 
		// document.getElementsByClassName("class값"); class값이 일치하는  n개 찾기
		// document.getElementsByTagName("img"); 태그가 img인 n개 찾기
		
		const imgs  = document.getElementsByClassName("imgs"); //<img src class="imgs" />
		const files = document.getElementsByName("file[]");    //<input type="file" name="file[]" />

		function clickImage () {
			document.getElementById("file").click();
		}
	
		function imageChange(e) {
			const img = document.getElementById("img"); 
			console.log( e.files );
			
			if(e.files.length > 0) { //첨부
				// 파일을 첨부하면 크롬에서 blob:http://1.237.....
				img.src = URL.createObjectURL( e.files[0] );// 가상의 url정보를 생성해서 추가함.
			}
			else { //취소
				img.src = "${pageContext.request.contextPath}/resources/images/default.png";
			}
		}
		
		function insertImageProfile() {
			// 유효성 검사 한 후
			const file = document.getElementById("file");
			if(file.value.length <= 0){
				alert('파일첨부 하세요');
			}
			
			// form태그 전송
			document.getElementById("form").submit();
		}
	</script>
</body>
</html>

profileimg_insert.jsp


프로필 이미지 등록창이다.


기본이미지 또는 파일선택을 누르면 사진을 정할 수 있도록 창이 나온다.


사진을 선택하고 등록을 누르면

정상적으로 등록된 모습을 볼 수 있다.


프로필 선택창으로 가면 변경된 모습을 볼 수 있다.


Profileimg Update & Delete

package Controller.Sehwan_Controller;

import java.io.IOException;

import Service.ProfileimgService;
import Service.ProfileimgServiceImpl;
import dto.Profileimg;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;

@WebServlet(urlPatterns = {"/profile/imageupdate.do"})
@MultipartConfig()
public class ProfileimgUpdateController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private ProfileimgService pService = new ProfileimgServiceImpl();

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Long profileno = Long.parseLong( request.getParameter("profileno") ); // 물품 번호
		Long imageNo = Long.parseLong( request.getParameter("imageno") ); // 이미지 번호
		Part file = request.getPart("file"); // 첨부한 파일
		
		if(file.getSize() > 0) { // 첨부가 되었다면 수정하기
			// mapper를 이용하여 수정
			Profileimg obj = new Profileimg();
			obj.setNo( imageNo );
			obj.setProfileno(profileno);
			obj.setFilename( file.getSubmittedFileName() );
			obj.setFiletype( file.getContentType() );
			obj.setFilesize( file.getSize() );
			obj.setFiledata( file.getInputStream().readAllBytes() );
			int ret = pService.updateProfileimgOne(obj);
		
			System.out.println(imageNo);
			System.out.println(profileno);
			// 적절한 페이지로 이동
			if( ret == 1 ) { // 변경 완료
				request.setAttribute("message", "변경 완료");
				request.setAttribute("url", "imageinsert.do?profileno="+profileno);
				request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
			else {// 변경 완료 안됨
				request.setAttribute("message", "변경 실패");
				request.setAttribute("url", "imageinsert.do?profileno="+profileno);
				request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
		}
		else { // 변경사항 없습니다.
			request.setAttribute("message", "변경 사항 없음");
			request.setAttribute("url", "imageinsert.do?profileno="+profileno);
			request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		}
	}	
}

ProfileimgUpdateContrller.java


package Controller.Sehwan_Controller;

import java.io.IOException;

import Service.ProfileimgService;
import Service.ProfileimgServiceImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/profile/imagedelete.do"})
@MultipartConfig()
public class ProfileimgDeleteController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private ProfileimgService pService = new ProfileimgServiceImpl();

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Long profileno = Long.parseLong( request.getParameter("profileno"));
		Long imageNo = Long.parseLong( request.getParameter("imageno"));

		// mapper를 이용해서 삭제
		
		int ret = pService.deleteProfileimgOne(imageNo);
		if( ret == 1 ) {
			// 절대 경로를 이용한 페이지 이동
			response.sendRedirect(request.getContextPath() +"/profile" + "/imageinsert.do?profileno="+profileno);
		}
		else {
			// 상대 경로를 이용한 페이지 이동
			response.sendRedirect("imageinsert.do?profileno="+profileno);
		}
	}
}

ProfileimgDeleteController.java


profileimg_insert.jsp와 연동하기 때문에 따로 jsp파일을 생성하지 않았다.

마동석 사진 옆 수정버튼을 누르면


이미지를 수정할 수 있는 모달창이 나온다.


이미지 등록과 동일하게 파일선택을 누르면 사진을 선택할 수 있다.


profileimg6.png를 선택하였다.


이미지 변경을 누르면 변경완료 창이 뜬다.


마동석에서 귀여운 아이콘으로 변경된 모습을 볼 수 있다.


이제 프로필사진 삭제를 해보자.

프로필 사진 수정창으로 왔다.


삭제버튼을 누르면 삭제할까요? 하는 창이 뜬다. 확인을 누르면

등록된 사진이 사라진 모습을 볼 수 있다.


등록한 프로필 사진이 없으니 기본 프로필로 바뀐 모습을 볼 수 있다.


Videoimg

package Controller.Sehwan_Controller;

import java.io.IOException;

import Service.VideoimgService;
import Service.VideoimgServiceImpl;
import dto.Videoimg;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

// 컨트롤러 X, DB의 이미지를 url형태로 변경해서 반환

// jsp에서 scr에 리소스의 이미지의 위치를 설정하는 용도로 사용
// <img src="/item/image?no=4" style="width:60px; height:60px" />
//			화면에 출력하기 위한 용도

// 크롬에서 http://127.0.0.1:8000/web03/item/image?no=1 확인
@WebServlet(urlPatterns = "/video/image")
@MultipartConfig()
public class VideoimgServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private VideoimgService vService = new VideoimgServiceImpl();

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

		long no = Long.parseLong(request.getParameter("no"));
		//no를 전달하여 mapper에서 ItemImage정보 1개 가져옴.
		Videoimg obj = vService.selectVideoimgOne(no);
		
		response.setContentType(obj.getFiletype()); // 이건 이미지다. html 아니다.
		response.setStatus(200); // 200은 정상적인 처리결과다.
		response.getOutputStream().write(obj.getFiledata()); // 이게 실제 정보다.
		
	}
}

VideoimgServlet.java


Mapper, Service & ServiceImpl

package Mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import dto.Videoimg;

@Mapper
public interface VideoListImgMapper {
	@Select({
		"  SELECT v.* FROM Videoimg v WHERE NO=#{no}  "
	})
	public Videoimg selectVideoImageOne(@Param("no") long no);
	
	@Select({
		"   SELECT v.no FROM Videoimg v WHERE videocode=#{videocode}  "
	})
	public List<Long> selectVideoImageNo(@Param("videocode") long videocode);
	
	@Select({
		"   SELECT NVL(min(no),0) FROM Videoimg  WHERE videocode=#{videocode}  "
	})
	public long selectImageNo(@Param("videocode") long videocode);
}

VideoimgMapper


package Service;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import dto.Videoimg;
import dto.Videolist;

public interface VideoimgService {

	// 프로필 이미지 추가
	public int insertVideoimgOne(@Param("obj") Videoimg obj);
	
	// 프로필 이미지 수정
	public int updateVideoimgOne(@Param("obj") Videoimg obj);
	
	// 프로필 이미지 삭제
	public int deleteVideoimgOne(@Param("no") long no);
	
	// 이미지 1개 가져가기
	public Videoimg selectVideoimgOne(@Param("no") long no);
	
	// 물품번호를 이용해서 관련된 전체 이미지 번호 반환
	public List<Long> selectVideoimgNo (@Param("no") long no);
	
	public List<Videolist> selectVideoList(@Param("column") String column, 
			@Param("text")String text);
	
	public List<Long> selectVideoNoAll();
}

VideoimgService.java


package Service;

import java.util.List;

import Mapper.VideoimgMapper;
import config.MyBatisContext;
import dto.Videoimg;
import dto.Videolist;

public class VideoimgServiceImpl implements VideoimgService {

	VideoimgMapper mapper = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class);

	@Override
	public int insertVideoimgOne(Videoimg obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).insertVideoimgOne(obj);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public int updateVideoimgOne(Videoimg obj) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).updateVideoimgOne(obj);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public int deleteVideoimgOne(long no) {
		try {
			int ret = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).deleteVideoimgOne(no);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return 0;
		}
	}

	@Override
	public Videoimg selectVideoimgOne(long no) {
		try {
			Videoimg ret = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).selectVideoimgOne(no);
			return ret;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

	@Override
	public List<Long> selectVideoimgNo(long no) {
		try {
			List<Long> list = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).selectVideoimgNo(no);
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

	@Override
	public List<Videolist> selectVideoList(String column, String text) {
		try {
			List<Videolist> list = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).selectVideoList(column, text);
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

	@Override
	public List<Long> selectVideoNoAll() {
		try {
			List<Long> list = MyBatisContext.getSqlSession().getMapper(VideoimgMapper.class).selectVideoNoAll();
			return list;
		}
		catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}
}

VideoimgServiceImpl.java


Controller

package Controller.Sehwan_Controller;

import java.io.IOException;
import java.util.List;

import Mapper.VideoListMapper;
import Service.VideoimgService;
import Service.VideoimgServiceImpl;
import config.MyBatisContext;
import dto.Videoimg;
import dto.VideolistView;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;

@WebServlet(urlPatterns = {"/video/imageinsert.do"})
@MultipartConfig()
public class VideoimgInsertController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private VideoimgService vService = new VideoimgServiceImpl();

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

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String title = request.getParameter("title");
		Part file = request.getPart("file");
		 VideolistView v=MyBatisContext.getSqlSession().getMapper(VideoListMapper.class).selectvideoOne(title);
		// 2. 물품번호에 해당하는 이미지 번호들...
		 Long videocode=v.getVideocode();
		Videoimg obj = new Videoimg();
		obj.setVideocode(videocode);
		obj.setFilename(file.getSubmittedFileName());
		obj.setFilesize(file.getSize());
		obj.setFiletype(file.getContentType());
		obj.setFiledata(file.getInputStream().readAllBytes());
		System.out.println(file.getSize());
		System.out.println(obj);
		// mapper로 추가 후
		
		int ret = vService.insertVideoimgOne(obj);
		if( ret == 1 ) {
			// 절대 경로를 이용한 페이지 이동
			response.sendRedirect(request.getContextPath() +"/videolist" + "/manage.do?title="+title);
		}
		else {
			// 상대 경로를 이용한 페이지 이동
			response.sendRedirect("imageinsert.do?title="+title);

		}
	}
}

VideoimgInsertController.java


package Controller.Sehwan_Controller;


import java.io.IOException;

import Service.VideoimgService;
import Service.VideoimgServiceImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/video/imagedelete.do"})
@MultipartConfig()
public class VideoimgDeleteController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private VideoimgService vService = new VideoimgServiceImpl();

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Long videocode = Long.parseLong( request.getParameter("videocode"));
		Long imageNo = Long.parseLong( request.getParameter("imageno"));

		// mapper를 이용해서 삭제
		
		int ret = vService.deleteVideoimgOne(imageNo);
		if( ret == 1 ) {
			// 절대 경로를 이용한 페이지 이동
			response.sendRedirect(request.getContextPath() +"/profile" + "/imageinsert.do?videocode="+videocode);
		}
		else {
			// 상대 경로를 이용한 페이지 이동
			response.sendRedirect("imageinsert.do?videocode="+videocode);
		}
	}
}

VideoimgDeleteController.java


package Controller.Sehwan_Controller;

import java.io.IOException;

import Service.VideoimgService;
import Service.VideoimgServiceImpl;
import dto.Videoimg;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;

@WebServlet(urlPatterns = {"/video/imageupdate.do"})
@MultipartConfig()
public class VideoimgUpdateController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private VideoimgService vService = new VideoimgServiceImpl();

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Long videocode = Long.parseLong( request.getParameter("videocode") ); // 물품 번호
		Long imageNo = Long.parseLong( request.getParameter("imageno") ); // 이미지 번호
		Part file = request.getPart("file"); // 첨부한 파일
		
		if(file.getSize() > 0) { // 첨부가 되었다면 수정하기
			// mapper를 이용하여 수정
			Videoimg obj = new Videoimg();
			obj.setNo( imageNo );
			obj.setVideocode(videocode);
			obj.setFilename( file.getSubmittedFileName() );
			obj.setFiletype( file.getContentType() );
			obj.setFilesize( file.getSize() );
			obj.setFiledata( file.getInputStream().readAllBytes() );
			int ret = vService.updateVideoimgOne(obj);
		
			System.out.println(imageNo);
			System.out.println(videocode);
			// 적절한 페이지로 이동
			if( ret == 1 ) { // 변경 완료
				request.setAttribute("message", "변경 완료");
				request.setAttribute("url", "imageinsert.do?videocode="+videocode);
				request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
			else {// 변경 완료 안됨
				request.setAttribute("message", "변경 실패");
				request.setAttribute("url", "imageinsert.do?videocode="+videocode);
				request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
			}
		}
		else { // 변경사항 없습니다.
			request.setAttribute("message", "변경 사항 없음");
			request.setAttribute("url", "imageinsert.do?videocode="+videocode);
			request.getRequestDispatcher("/WEB-INF/jsp_jsh/alert.jsp").forward(request, response);
		}
	}	
}

VideoimgUpdateController.java


따로 구현한 사진은 첨부하지 않는다.

이상 프로젝트 끝.

0개의 댓글