[Spring] Board with xml (Ajax) III

강 해 리 2024. 5. 23. 14:20

2024. 5. 23. 14:20

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">&times;</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">&times;</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

해리코딩

[Spring] Board with xml (Ajax) III

'Frameworks > Spring' 카테고리의 다른 글

+ Recent posts

티스토리툴바