728x90
top.jsp
사진경로 추가
<c:if test="${!empty memberVo }">
<ul class="nav navbar-nav">
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="${root}/memberUpdateForm">회원수정</a></li>
<li><a class="dropdown-item" href="${root}/memberImageForm">사진</a></li>
<li><a class="dropdown-item" href="${root }/memberLogout">로그아웃</a></li>
</ul>
</li>
</ul>
</c:if>
memberImageForm
<%--
Created by IntelliJ IDEA.
User: thddm
Date: 2024-05-22
Time: 오후 12:16
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="root" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- jQuery 라이브러리 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- Bootstrap 라이브러리 -->
<script type="text/javascript">
$(document).ready(function () {
if(${!empty msg1}){
$("#msgType").attr("class","modal-content panel-warning");
$("#failModal").modal("show");
}
});
</script>
<title>Title</title>
</head>
<style>
body {
background-color: #f8f9fa; /* 배경색 변경 */
}
.panel-heading {
background-color: #007bff; /* 헤더 색 변경 */
color: white;
}
.form-control {
border-radius: 25px; /* 입력 필드 둥글게 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 입력 필드 그림자 */
}
.btn-primary {
background-color: #ff4081; /* 버튼 색 변경 */
border-color: #ff4081;
border-radius: 25px;
display : flex;
position: relative;
left: 50%;
padding: 10px 20px ;
}
.btn-primary:hover {
background-color: mediumpurple; /* 버튼 호버 효과 */
border-color: #f06292;
color: #f8f9fa;
}
</style>
<body>
<div class="container">
<jsp:include page="../include/top.jsp"/>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">사진 등록</h3>
</div>
<div class="panel-body">
<form action="${root }/memberImageUpdate" method="post" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="memberID" value="${memberVo.memberID }">
<div class="form-group">
<label class="control-label col-sm-2" >아이디:</label>
<div class="col-sm-8">
<label class="form-control" >${memberVo.memberID } </label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="memberProfile">사진 업로드:</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="memberProfile" name="memberProfile"
placeholder="사진을 등록 해 주세요">
</div>
</div>
<div class="form-group">
<button class="btn-primary">사진 업로드</button>
</div>
</form>
</div>
</div>
<!-- 실패 -->
<div class="modal fade" id="failModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" id="msgType">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>${msg1 }</h3>
</div>
<div class="modal-body">
<p>${msg2 }</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>
</body>
</html>
home.jsp
~~님 옆에 사진 띄우기
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- jQuery 라이브러리 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- Bootstrap 라이브러리 -->
<script type="text/javascript">
$(document).ready(function () {
if (${!empty msg1}) {
$("#msgType").attr("class", "modal-content panel-warning");
$("#failModal").modal("show");
}
});
</script>
</head>
<body>
<div class="container">
<jsp:include page="include/top.jsp"/>
<c:if test="${empty memberVo }">
<h3>Spring Legacy</h3>
</c:if>
<!-- 디비를 확인해보면 공백 -->
<c:if test="${!empty memberVo}">
<c:if test="${memberVo.memberProfile eq ''}">
<img src="${root }resources/image/naver.png" style="width: 50px; height: 50px;">
</c:if>
<!-- 로그인한 후 사진등록하면 사진을 upload에 저장하도록 -->
<c:if test="${memberVo.memberProfile ne ''}">
<img src="${root }/resources/upload/${memberVo.memberProfile}" style="width: 40px; height: 40px;">
</c:if>
<h3>${memberVo.memberName}님 환영합니다!</h3>
</c:if>
<div class="panel panel-default">
<div>
<img src="${root }/resources/image/naver.png" style="width:50px; height:50px">
</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a href="MainBoard">게시판</a></li>
<li><a href="#" data-toggle="tab">공지</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h4>Home</h4>
<p>content</p>
</div>
<div class="tab-pane fade show " id="home1">
<h4>게시판</h4>
<p>content</p>
</div>
<div class="tab-pane fade show " id="home2">
<h4>공지</h4>
<p>content</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="failModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" id="msgType">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>${msg1 }</h3>
</div>
<div class="modal-body">
<p>${msg2 }</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>
</body>
</html>
MemberController
@RequestMapping("/memberImageForm")
public String memberImageForm() {
return "member/memberImageForm";
}
@RequestMapping("/memberImageUpdate")
public String memberImageUpdate(HttpServletRequest request, HttpSession session,
RedirectAttributes rttr) throws IOException {
MultipartRequest multi=null;
int maxSize=40*1024*1024;
String savePath=request.getRealPath("/resources/upload");
System.out.println(savePath);
multi=new MultipartRequest(request, savePath, maxSize, "UTF-8",
new DefaultFileRenamePolicy());
String memberID=multi.getParameter("memberID"); //클라이언트에서 넘김 memberID값 받음
String newProfile="";
File file=multi.getFile("memberProfile"); //input type file의 name값으로 파일가져옴
if(file!=null) {
String str=file.getName().substring(file.getName().lastIndexOf(".")+1); //확장자
str=str.toUpperCase();
if(str.equals("PNG") || str.equals("GIF") || str.equals("JPG")) {
String origin=memberMapper.getMember(memberID).getMemberProfile();
//resources/upload/.../...
File file1=new File(savePath+"/"+origin);
if(file1.exists()) {
file1.delete();
}
newProfile=file.getName();
}
else {
if(file.exists()) {
file.delete();
}
rttr.addFlashAttribute("msg1", "실패");
rttr.addFlashAttribute("msg2", "이미지 파일만 업로드할 수 있습니다");
return "redirect:/memberImageForm";
}
}
Member member=new Member();
member. setMemberID(memberID);
member. setMemberProfile(newProfile);
memberMapper.memberProfileUpdate(member); //id기준으로 사진업데이트 됨
Member m=memberMapper.getMember(memberID);
session.setAttribute("memberVo", m);
rttr.addFlashAttribute("msg1", "성공");
rttr.addFlashAttribute("msg2", "업로드 되었습니다");
return "redirect:/";
}
}
MemberMapper
package kr.bit.mapper;
import kr.bit.entity.Member;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface MemberMapper {
public Member registerCheck(String memberID);
public int memberRegister(Member member);
public Member memberLogin(Member memberVo);
public int memberUpdate(Member memberVo);
public Member getMember(String memberID);
public void memberProfileUpdate(Member memberVo);
}
MemberMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="kr.bit.mapper.MemberMapper">
<select id="registerCheck" resultType="kr.bit.entity.Member">
select *
from member_table
where memberID = #{memberID}
</select>
<insert id="memberRegister" parameterType="kr.bit.entity.Member">
insert into member_table(memberID, memberPw, memberName, memberAge,
memberGender, memberEmail, memberProfile)
values (#{memberID}, #{memberPw}, #{memberName},
#{memberAge}, #{memberGender}, #{memberEmail}, #{memberProfile})
</insert>
<select id="memberLogin" parameterType="kr.bit.entity.Member" resultType="kr.bit.entity.Member">
select *
from member_table
where memberID = #{memberID}
and memberPw = #{memberPw}
</select>
<update id="memberUpdate" parameterType="kr.bit.entity.Member">
update member_table
set memberPw=#{memberPw},
memberName=#{memberName},
memberAge=#{memberAge},
memberGender=#{memberGender},
memberEmail=#{memberEmail}
where memberID = #{memberID}
</update>
<select id="getMember" resultType="kr.bit.entity.Member">
select *
from member_table
where memberID = #{memberID}
</select>
<update id="memberProfileUpdate" parameterType="kr.bit.entity.Member">
update member_table
set memberProfile=#{memberProfile}
where memberID = #{memberID}
</update>
</mapper>
맨 위 디자인 변경
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="root" value="${pageContext.request.contextPath }"/>
<nav class="navbar navbar-expand-Lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${root }/">Spring Legacy</a>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="nav navbar-nav">
<li><a href="MainBoard">게시판</a></li>
</ul>
<c:if test="${empty memberVo }">
<!-- 회원정보 비어있을 경우 -->
<ul class="nav navbar-nav navbar-right">
<li><a class="dropdown-item" href="${root }/memberLoginForm">로그인 </a></li>
<li><a class="dropdown-item" href="${root }/memberJoin">회원가입</a></li>
</ul>
</c:if>
<c:if test="${!empty memberVo }">
<ul class="nav navbar-nav navbar-right">
<li><a href="${root}/memberUpdateForm">회원수정</a></li>
<li><a href="${root}/memberImageForm">사진</a></li>
<li><a href="${root }/memberLogout">로그아웃</a></li>
<c:if test="${!empty memberVo}">
<c:if test="${memberVo.memberProfile eq ''}">
<img src="${root }resources/image/예.png" style="width: 100px; height: 100px;">
${memberVo.memberName}님 안녕하세요!
</c:if>
<c:if test="${memberVo.memberProfile ne ''}">
<img src="${root }/resources/upload/${memberVo.memberProfile}"
style="width: 40px; height: 40px;">
${memberVo.memberName}님 안녕하세요!
</c:if>
</c:if>
</ul>
</c:if>
</div>
</div>
</nav>
<html>
main.jsp
//로그인이 안되어있으면 글작성 버튼이 안보임
if(${!empty memberVo}) {
li += "<tr>";
li += "<td colspan='5'>";
li += "<button class='btn btn-primary btn-sm' onclick='getForm()'>글작성</button>";
li += "</td>";
li += "</tr>";
}
li += "</table>";
// 생성한 테이블을 화면에 적용
$("#view").html(li);
// 화면에 테이블을 표시
$("#view").css("display", "block");
// 글 작성 폼을 숨
$("#wfrom").css("display", "none");
}
728x90
'Frameworks > Spring' 카테고리의 다른 글
| [Spring] Board with xml (Ajax) II (0) | 2024.05.22 |
|---|---|
| [Spring] Board with xml (Ajax) I (1) | 2024.05.20 |
| [Spring] BOARD CRUD 기능 설명 (0) | 2024.05.17 |
| [Spring] Board CRUD (Board Delete, Page ) (0) | 2024.05.17 |
| [Spring] Board CRUD (Board info, Board Modify) (0) | 2024.05.17 |
