프로젝트중간 (개인정보(userInfo) 내용들 , index매핑과정 controller변경)

프로젝트

프로젝트중간 (개인정보(userInfo) 내용들 , index매핑과정 controller변경)

동곤일상 2025. 5. 14. 23:15

1) 회원가입(registerUser) 시 테이블의전공이 모두 나타나게!!!!

2) 개인정보관련 (userInfo)

2-1) 수정버튼 클릭시

2-2) 비밀번호변경버튼 클릭시

2-3) 수정완료버튼

3) index부분 변경!!!(크게바뀜)

4)오늘의시연영상

1) 회원가입(registerUser) 시 테이블의전공이 모두 나타나게!!!!

기존에는 하드코딩을했었다(동적이지않음)

mypageController.java

registerUser 매핑을 추가했다( 해당 주소접근시 바로실행)

Dept의 모든내용들을 꺼내주는 selectAll메서드를 사용해준다!!!

select * from dept 임!!

꺼낸 Dept내용들을 registerUser로 보낸다

@RequestMapping("registerUser")
	public String  registerUser(HttpServletRequest request , HttpServletResponse response) throws ParseException {
		List<Dept> dept = new DeptDao().selectAll();
		request.setAttribute("dept", dept);
		return "mypage/registerUser";
	}

/mypage/regiserUser.jsp

foreach문을 활용해 전달받은 dept객체의

name만 꺼내서 각각 option으로 달아놓는다

선택하는 창은 이름이지만 form으로전달되는값은 deptId가될것임

(교수,학생 모두 deptId를 외래키로가지고있음)

(기존의방식은 주석처리함)

<select class="form-select" id="major" name="deptId">
                <option selected value="none">전공</option>
                <c:forEach items="${dept}" var="s">
                <option value="${s.deptId}">${s.deptName}</option>
                </c:forEach>
                <!-- <option value="Computer Science">컴퓨터공학과</option>
                <option value="Electrical Engineering">전자공학과</option>
                <option value="Mechanical Engineering">기계공학과</option>
                <option value="Business Administration">경영학과</option> -->
                
            </select>

예시를 들어 학생으로 회원가입을 하나해보겠다

DB에넘어가는값은 ID임을 확인할수잇음

2) 개인정보관련 (userInfo)

index(메인)에서 해당버튼을 누르면 나오는 창과 기능들이다

개인정보들을 담고있음

/mypage/userInfo.jsp

css부분은 생략할게요!

<body>
    <div class="container">
        <!-- Personal Information -->
        <div class="card">
            <h2>개인 정보</h2>

            <form action="userUpdate" class="form-section" name="f" method="post">
                <div class="profile-section">
                    <%--c:set var="img" value="${fn:contains(sessionScope.login, 's') ? m.studentImg : m.professorImg}" /> --%>
                    <img src="${path}/dist/assets/picture/${m.img}" id="pic" class="profile-img" alt="Profile Image">
                    <input type="hidden" name="picture" value="${m.img}">
                    <button type="button" class="btn btn-secondary" onclick="win_upload()">이미지 변경</button>
                </div>
                <c:choose>
                    <c:when test="${fn:contains(sessionScope.login, 's')}">
                        <!-- Student Information -->
                        <div>
                            <strong>이름:</strong>
                            <input type="text" readonly="readonly" value="${m.studentName}" name="name">
                        </div>
                        <div>
                            <strong>학번:</strong>
                            <input type="text" readonly="readonly" value="${m.studentNum}" name="studentNum">
                        </div>
                        <div>
                            <strong>생년월일:</strong>
                            <input type="text" readonly="readonly" value="<fmt:formatDate value='${m.studentBirthday}' pattern='yyyy-MM-dd'/>" name="birthday">
                        </div>
                        <div>
                            <strong>학과:</strong>
                            <input type="text" readonly="readonly" value="${deptName}" name="deptName">
                        </div>
                    </c:when>
                    <c:when test="${fn:contains(sessionScope.login, 'p')}">
                        <!-- Professor Information -->
                        <div>
                            <strong>이름:</strong>
                            <input type="text" readonly="readonly" value="${m.professorName}" name="name">
                        </div>
                        <div>
                            <strong>생년월일:</strong>
                            <input type="text" readonly="readonly" value="<fmt:formatDate value='${m.professorBirthday}' pattern='yyyy-MM-dd'/>" name="birthday">
                        </div>
                        <div>
                            <strong>학과:</strong>
                            <input type="text" readonly="readonly" value="${deptName}" name="deptName">
                        </div>
                    </c:when>
                </c:choose>

                <div>
                    <c:choose>
                        <c:when test="${fn:contains(sessionScope.login, 's')}">
                            <strong>연락처:</strong>
                            <input type="text" readonly="readonly" value="${m.studentPhone}" name="phone" id="phone">
                            <button class="btn btn-secondary" type="button" onclick="updatePhone()">수정</button>
                        </c:when>
                        <c:when test="${fn:contains(sessionScope.login, 'p')}">
                            <strong>연락처:</strong>
                            <input type="text" readonly="readonly" value="${m.professorPhone}" name="phone" id="phone">
                            <button class="btn btn-secondary" type="button" onclick="updatePhone()">수정</button>
                        </c:when>
                    </c:choose>
                </div>
                <div>
                    <c:choose>
                        <c:when test="${fn:contains(sessionScope.login, 's')}">
                            <strong>이메일:</strong>
                            <input type="email" readonly="readonly" value="${m.studentEmail}" name="email" id="email">
                            <button class="btn btn-secondary" type="button" onclick="updateEmail()">수정</button>
                        </c:when>
                        <c:when test="${fn:contains(sessionScope.login, 'p')}">
                            <strong>이메일:</strong>
                            <input type="email" readonly="readonly" value="${m.professorEmail}" name="email" id="email">
                            <button class="btn btn-secondary" type="button" onclick="updateEmail()">수정</button>
                        </c:when>
                    </c:choose>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-primary" type="submit">수정완료</button>
                </div>
            </form>

            <div class="action-buttons">
                <button class="btn btn-primary" onclick="updatePw()">비밀번호 변경</button>
                <button class="btn btn-danger" onclick="deleteUser()">퇴학</button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function updateEmail() {
            let op = "width=500,height=500,top=50,left=150";
            window.open("updateEmail", "", op);
        }

        function updatePhone() {
            let op = "width=500,height=500,top=50,left=150";
            window.open("updatePhone", "", op);
        }

        function win_upload() {
            let op = "width=500,height=500,top=50,left=150";
            window.open("registerImg", "", op);
        }

        function updatePw() {
            let id = "${sessionScope.login}";
            console.log(id);
            let op = "width=500,height=500,top=50,left=150";
            window.open("pwUpdate?id=" + id, "", op);
        }

        function deleteUser() {
            if (confirm("정말 퇴학하시겠습니까? 이 작업은 되돌릴 수 없습니다.")) {
                window.location.href = "deleteUser";
            }
        }
    </script>
</body>

c:when문을 사용해서

sessionScope.login의 문자에따라 professor인지member인지판단해서

각각 다른 HTML을 띄워놨음!

(나중에 그냥 컬럼명을 통일시켜도상관이없다고느끼면 바꿀 예정)

모든 정보들은 readonly로 설정해서 보이는화면에서는 바꿀수없게해놨음!!

바꿀수있는건오직 이메일,전화번호뿐이다

연락처,이메일 옆에 수정버튼을 누르게된다면

onclick함수에 의해

updateImg 혹은 updateEmail창이 띄워질거임

2-1) 수정버튼 클릭시

/mypage/updateEmail.jsp

<body>
    <h2>변경할 이메일을 입력하세요</h2>
    <input type="email" id="email" onkeyup="eChk(this)">
    <br>
    <font id="emailValid"></font>
    <br>
    <button onclick="update()" type="button">변경</button>
    <button onclick="closeWindow()" type="button">취소</button>

    <script type="text/javascript">
    function update() {
  
            // 부모 창의 #email 요소 찾기
            const parentEmailInput = window.opener.document.querySelector("#email");
            const newEmail = document.querySelector("#email").value;

            // 부모 창의 이메일 값 변경
            parentEmailInput.value = newEmail;
            window.close();
    }

    function closeWindow() {
        window.close();
    }
    
    function eChk(e){
    	const emailVal = document.querySelector("#emailValid");
    	if(!valid(e.value,'email')){
    		emailVal.innerHTML= '올바른 Email형식작성하세요';
    		emailVal.style.color='red';
    	}
    	else{
    		emailVal.innerHTML= '유효한E-mail';
    		emailVal.style.color='green';
    	}
    }
    
    function valid(text,type){
    	if(type==='email'){//넘어온값과 name=email의 값이 동일할때
    		const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9._]+\.[a-zA-Z]{2,}$/;
    		return regex.test(text);
    	}
    }
    
    </script>
</body>

변경할 이메일을 형식에맞게입력한 후 변경버튼을 누르게된다면

다음과같이 input태그안의 값이 바뀌게될거임(DB에는 영향X)

전화번호도 비슷한느낌이므로생략!!!!

2-2) 비밀번호변경버튼 클릭시

function updatePw() {
            let id = "${sessionScope.login}";
            console.log(id);
            let op = "width=500,height=500,top=50,left=150";
            window.open("pwUpdate?id=" + id, "", op);
        }

세션정보를 pwUpdate의 파라미터로 넘겨준다(post방식)

findPw 할때도 사용하는 화면이다

하지만 파라미터값이 주소로넘어가므로위험하다

session정보와 주소의 id가 일치하지않는다면 변경할수없게 막아놨음!!!!

(남의 비번은 바꿀수없어)

@pw
if(!id.equals(request.getSession().getAttribute("login"))) {
			request.setAttribute("msg", msg);
			return "mypage/close";
		}

2-3)수정완료버튼

수정을 했든 안했든 화면에나타나있는값들을
DB에 update하는 과정

loginCheck함수는 로그인하지않고 접근을막는것!

	@MSLogin("loginIdCheck")
	@RequestMapping("userUpdate")
	public String userUpdate(HttpServletRequest request, HttpServletResponse response) {
		String id = (String)request.getSession().getAttribute("login");
		String img = request.getParameter("picture");
		String phone = request.getParameter("phone");
		String email = request.getParameter("email");
		String msg="수정실패";
		request.setAttribute("url", "index");
		if(ProStuDao.userUpdate(id,img,phone,email)) {
			msg=id+"님 수정성공";
			request.setAttribute("msg", msg);
			return "alert";
		}
		else {
			request.setAttribute("msg", msg);
			return "alert";
		}
	}

화면상에 있는 picture , phone , email을 모두 form으로넘겨받음

session정보(id)도 가져온다!!

/model/dao/ProStuDao.java

userUpdate메서드부분

(넘겨받은 id에 포함된문자에 따라 교수를업데이트할지 학생을업데이트할지 분리)

public static boolean userUpdate(String id,String img, String phone, String email) {
		SqlSession conn = MyBatisConnection.getConnection();

		try {
			if(id.toLowerCase().contains("p")) {
				UpdateProInfoDto dto = new UpdateProInfoDto();
				dto.setProfessorId(id);
				dto.setProfessorEmail(email);
				dto.setProfessorImg(img);
				dto.setProfessorPhone(phone);
				if(conn.update("prostu.updateProInfo",dto)>0) {
					conn.commit();
					return true;
				}
			}
			else {
				UpdateStuInfoDto dto = new UpdateStuInfoDto();
				dto.setStudentEmail(email);
				dto.setStudentId(id);
				dto.setStudentImg(img);
				dto.setStudentPhone(phone);
				if(conn.update("prostu.updateStuInfo",dto)>0) {
					conn.commit();
					return true;
				}
			}
		}
		catch (Exception e) {
			e.printStackTrace();
		}
		finally {
			MyBatisConnection.close(conn);
		}
		return false;


	}

다음과같은 쿼리를 이용해

아이디에맞는 정보(img,Email,Phone)업데이트

<update id="updateProInfo" parameterType="UpdateProInfoDto">
	update professor 
	set professor_img=#{professorImg},
	professor_email=#{professorEmail},
	professor_phone=#{professorPhone}
	where professor_id = #{professorId}
	</update>
	
	<update id="updateStuInfo" parameterType="UpdateStuInfoDto">
	update student 
	set student_img=#{studentImg},
	student_email=#{studentEmail},
	student_phone=#{studentPhone}
	where student_id = #{studentId}
	</update>

3) index부분 변경!!!(크게바뀜)

가끔 우측상단에 사진이안뜨거나 세션정보를 불러오지못하는 경우가생겼었다

위부분이 다 비어있었다 (세션속성이null 이었던문제)

기존에는 doLogin시 m속성을 넣어줬었는데

그렇게되면 다른곳에서 index로넘어오게되면 m속성이 초기화되는 문제가생기는것같았다.

그래서index를 매핑할때 속성을 등록하는것으로변경했음

index에 접근 시 session에등록된 id를 이용해 모든쿼리를 불러온 후 session속성으로등록

@MSLogin("loginIdCheck")
	@RequestMapping("index") //왜이렇게해야지만 index로가는거지??????
	public String main(HttpServletRequest request , HttpServletResponse response) {
		String dbId = (String)request.getSession().getAttribute("login");
		HttpSession session = request.getSession();
		if(dbId.toLowerCase().contains("s")) {
			StudentDao dao = new StudentDao();
			Student student = dao.selectOne(dbId);
			session.setAttribute("m", student);
		}
		else if(dbId.toLowerCase().contains("p")){
			ProfessorDao dao = new ProfessorDao();
			Professor professor = dao.selectOne(dbId);
			session.setAttribute("m", professor);	
		}
		
		return "index"; //forward 됨
		//redirect시 다른 request영역이므로 속성이 넘어가지않음

	}

<!-- 교수와학생인경우 컬럼명이다르므로 삼항연산자를활용해처리 -->
<%-- 						<c:set var="img"
								value="${fn:contains(sessionScope.login, 's') ? m.studentImg : m.professorImg}" />
 --%>
 							<img src="${path}/dist/assets/picture/${m.img}"
							class="user-image rounded-circle shadow" alt="User Image" /> <span
							class="d-none d-md-inline" style="font-size: 20px">${sessionScope.m.id}님
								반갑습니다</span>

그결과 다음과같이 속성을받아사용해도 아무런문제가생기지않음

4) 오늘의시연영상

개인정보수정부분test(퇴학부분은아직).mp4

1.86MB

회원가입부분.mp4

12.64MB

'프로젝트' 카테고리의 다른 글

개인정보(userInfo)퇴학 , 성적확인 , 임시비밀번호알고리즘변경 (3)	2025.05.19
비밀번호암호화 , 비밀번호찾기(임시비밀번호발급 및 메일전송) , 회원가입->인증번호인증->완료 순으로 바꿈 , 회원가입 ,pw찾기 , 개인정보수정 시 유효성검사추가 (1)	2025.05.16
프로젝트진행중 ( 로그인시 index에 정보몇개전달 , id/pw찾기) (0)	2025.05.13
프로젝트진행중 - 회원가입 , 로그인? (0)	2025.05.12
주말에 프로젝트조금해보기(회원가입만 해보자...!) (1)	2025.05.10

현재글프로젝트중간 (개인정보(userInfo) 내용들 , index매핑과정 controller변경)

web동곤

백엔드위주

형변환, 코딩, Spring, 초보, 꿀팁, 자바, 반복문, 기본, 메서드, Eclipse, 이클립스, 유익한, `, Easy, Method, 유익, 인텔리제이, 기초, 스코프, java,

Today :
Yesterday :

web동곤