47일차_회원정보 수정

저번 시간이어서! 

Git hub

https://github.com/ujin302/Web2024/tree/main/projectJSP

1. 프로젝트명 : projectJSP

기능 

1. 회원정보 출력
2. 회원정보 수정 후, 세션 제거
3. 게시물 작성

jsp

1. memberInfo.jsp
2. memberUpdate.jsp
3. memberUpdateForm.jsp

js

1. memberUpdate.js

 

 

 

1. 회원정보 출력

memberUpdate.js: memberInfo()

회원정보 수정 메뉴 클릭 시, 로그인한 정보를 가지고 회원정보를 출력한다. 

session의 id 정보를 가지고 DB에서 조회한다. 

 

해댱 함수는 '다시입력' 버튼 클릭 시, 호출된다. 

function memberInfo() {
	$.ajax({
			type: 'post',
			url: './memberInfo.jsp',
			dataType: 'json',
			success: function(data) {
				$('#name').val(data.name);
				$('#id').val(data.id);
				$('#pwd').val(data.pwd);
				if(data.gender == "여") {
					$('#gender2').attr('checked', true);
				}else {
					$('#gender1').attr('checked', true);
				}
				$('#email1').val(data.email1);
				$('#email2').val(data.email2);
				$('#email3').val(data.email3);
				$('#tel1').val(data.tel1);
				$('#tel2').val(data.tel2);
				$('#tel3').val(data.tel3);
				$('#zipcode').val(data.zipcode);
				$('#addr1').val(data.addr1);
				$('#addr2').val(data.addr2);
			},
			error: function(e) {
				console.log(e);
			}
	});
}

 

화면

 

 

2. 회원정보 수정 및 섹션 제거 

memberUpdate.js: memberUpdate()

비밀번호랑 재확인 비밀번호가 동일한 경우에만 회원정보 수정이 가능하다. 그 이후, index.jsp 화면으로 이동한다.

회원정보 수정 버튼 클릭 시, DB 정보가 변경된다. 

function memberUpdate() {
	if($('#pwd').val() != $('#repwd').val()) {
		alert('비밀번호가 일치하지 않습니다. 비밀번호를 다시 확인하세요.')
	}else {
		let gender = null;
		
		if($('#gender1').attr('checked')) {
			gender = '남';
		}else {
			gender = '여';
		}
		
		$.ajax({
                        type: 'post',
                        url: './memberUpdate.jsp',
                        data: $('#updateInfo').serialize(),
                        dataType: 'text',
                        success: function(data) {
                            alert('회원정보 수정 완료되었습니다. ');
                            location.href = '../index.jsp';
                        },
                        error: function(e) {
                            console.log(e);
                        }
		});
	}
}

 

memberUpdate.jsp

회원정보 버튼 클릭 시, MemberDAO의 getMemberUpdate() 함수를 호출하여 DB에 데이터를 수정한다.

session.invalidate(); 를 통해 섹션을 제거한다. 

<%@page import="dto.MemberDTO"%>
<%@page import="DAO.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	MemberDAO memberDAO = MemberDAO.getInstance();
	MemberDTO memberDTO = new MemberDTO(
                                request.getParameter("name"),
                                session.getAttribute("memId").toString(),
                                request.getParameter("pwd"),
                                request.getParameter("gender"),
                                request.getParameter("email1"),
                                request.getParameter("email2"),
                                request.getParameter("tel1"),
                                request.getParameter("tel2"),
                                request.getParameter("tel3"),
                                request.getParameter("zipcode"),
                                request.getParameter("addr1"),
                                request.getParameter("addr2"),
                                null
							);
	boolean isUpdate = memberDAO.getMemberUpdate(memberDTO);
	session.invalidate(); // 섹션 제거 
%>

 

화면

 

 

3. 게시물 작성 

board.js

'작성 완료' 버튼 클릭 시, 아래와 같은 동작 발생 

제목 혹은 내용을 작성하지 않을 시, 데이터가 서버로 넘어가지 않으며, 작성해달라는 문구가 아래 발생된다.  

제목과 내용 모두 작성하였을 경우에만 서버로 데이터를 전송한다. 

$(function() {
	$('#subjectDiv').text('');
	$('#contentDiv').text('');
	
	$('#writeBtn').click(function(event) {
		event.preventDefault();
      	$('#subjectDiv').text('');
		$('#contentDiv').text('');
		
		let subject = $('#subject').val();
		let content = $('#content').val();
		let isWrite = true;
		console.log('subject: ' + subject);
		// 유효성 검사
		if(subject == '') {
			$('#subjectDiv').text('제목을 작성하세요.');
			isWrite = false;
		} 
		
		if(content == '') {
			$('#contentDiv').text('내용을 작성하세요.');
			isWrite = false;
		} 
		
		if(isWrite) {
			$.post(
				'./boardWrite.jsp',
				//$('#boardInfo').serialize(),
				{
					'subject' : subject,
					'content' : content
				},
				function(data) {
					location.href = '../index.jsp';
				}
			)
		}
		
	});
});

 

 화면

 

 

boardWrite.jsp

데이터를 받으면 DB에 저장한다. 

<%@page import="DAO.BoardDAO"%>
<%@page import="dto.BoardDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	BoardDTO boardDTO = new BoardDTO();
	System.out.println("request.getParameter('content') : " + request.getParameter("content"));
	System.out.println("request.getParameter('subject') : " + request.getParameter("subject"));
	
	boardDTO.setId(session.getAttribute("memId").toString());
	boardDTO.setName(session.getAttribute("memName").toString());
	boardDTO.setEmail(session.getAttribute("memEmail").toString());
	boardDTO.setSubject(request.getParameter("subject"));
	boardDTO.setContent(request.getParameter("content"));
	
	boolean isWrite = BoardDAO.getInstance().writeBoardItem(boardDTO);
%>