본문 바로가기
개발 공부 Today I Learned

[국비 61일차 TIL] spring 글 삭제, 페이징, 로그인

by 개발자신입 2024. 2. 20.
반응형

detail.jsp

댓글 입력창 form태그에 onsubmit="return commentInsert()"

textarea id="comment", button id="comment-input"

			<hr>
			<div class="container">
				<form action="./commentWrite" method="post" onsubmit="return commentInsert()">
					<div class="row">
						<div class="col-xs-8 col-sm-8 col-md-11 col-xl-11">
							<textarea class="form-control" id="comment" name="comment" aria-describedby="comment-input" style="height: 100%;"></textarea>
						</div>
						<div class="col-xs-4 col-sm-4 col-md-1 col-xl-1">
							<button class="btn btn-success" type="submit" id="comment-input" onclick="commentInput()" style="width: 100px; height: 100%;">댓글쓰기</button>
						</div>
					</div>
					<input type="hidden" name="no" value="${detail.board_no }">
				</form>
			</div>

 

위의 function 수정 및 추가

<script type="text/javascript">
function deletePost(){
   Swal.fire({
        title: "글을 삭제합니다",
        //text: "post를 삭제합니다.",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes",
        cancelButtonText: "No",
      }).then(result => {
        if (result.isConfirmed) {
		
// 2024-02-20
// java에게 삭제 명령 -> 가상 form = post방식으로 (form 동적)
        let vform = $("<form></form>");
		vform.attr("name", "vform");
		vform.attr('method', 'post');
		vform.attr('action', './postDel'); // vform의 속성 지정 json으로
		vform.append($('<input/>', {type:'hidden', name:'no', value:${detail.board_no } })); // vform 값
		vform.appendTo('body'); // 여기에 붙임
		vform.submit(); // 동작시킴
		
		// Swal.fire("삭제했습니다.","", "success");
        }
      });
}

// 2024-02-20 댓글 글자 수 제한
function commentInsert(){
	let comment = $("#comment").val();
	if(comment.length < 10) {
		Swal.fire("댓글은", "10자 이상 적어주세요.", "warning");
		return false;
	}
}

//jquery start
// 2024-02-20 댓글 길이 수 확인 psd 
$(function(){
	$("#comment").keyup(function(){
		let text = $(this).val();
		if(text.length > 100) {
			Swal.fire("댓글은","100자까지 가능합니다.","warning");
			$(this).val(text.substr(0,100));
		}
		$("#comment-input").text("댓글쓰기 " + text.length + "/100");
	});
});
</script>

 

BoardController.java

1. 여기에서 생긴 postDel 메소드를 BoardService, BoardDAO에 생성해주기 

2. board-mapper.xml에 UPDATE sql문 추가하기

		// 2024-02-20
		@PostMapping("/postDel")
		public String postDel(@RequestParam("no") int no) {
//			System.out.println("no : " + no);
			int result = boardService.postDel(no);
			System.out.println("result : " + result);
			return "redirect:/board";
		}

BoardService.java 

BoardService에 postDel 생성

	public int postDel(int no) {
		return boardDAO.postDel(no);
	}

BoardDAO

postDel 메소드 생성

	public int postDel(int no) {
		return sqlSession.update("board.postDel", no); // 진짜 삭제가 아니라 0,1로 바꾸는거니까 update
	}

board-mapper.xml

HeidiSQL에서 enum으로 설정한 경우 숫자에 ' ' 필수 

<![CDATA[ ]]>

	<!-- 2024-02-20 -->
	<update id="postDel" parameterType="Integer">
		<![CDATA[
		UPDATE board SET board_del='0' WHERE board_no=#{no} 
		]]>
	</update>

Swal.fire

< 페이징 만들기 >

전자정부 페이징 사용

pom.xml에 코드가 있어야함.

참조 : https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:rte:ptl:view:paginationtag

 

egovframework:rte:ptl:view:paginationtag [eGovFrame]

전자정부프레임워크에서는 페이징 처리의 편의를 위해 <ui:pagination/> 태그를 제공한다. 페이징 기능을 사용할때 기능은 유사하지만 이미지나 라벨등의 포맷만 다양하게 사용하게 되는 경우가 있

www.egovframe.go.kr

 

root-context.xml

	<!-- Root Context: defines shared resources visible to all other web components -->
	<bean id="textRanderer" class="egovframework.rte.ptl.mvc.tags.ui.pagination.DefaultPaginationRenderer"/>>
	
	<!-- 이미지 렌더 만들어줘야함.  -->
	<bean id="imageRenderer" class="org.green.util.ImagePaginationRenderer"></bean>

 

-> util 폴더에 class 만들기

ImagePaginationRenderer.java

import egovframework.rte.ptl.mvc.tags.ui.pagination.AbstractPaginationRenderer;

public class ImagePaginationRenderer extends AbstractPaginationRenderer{
	
	public ImagePaginationRenderer() {
		firstPageLabel = "<a href=\"#\" onclick=\"{0}({1}); return false;\"><image src=\"/easycompany/images/bt_first.gif\" border=0/></a>&#160;"; 
		previousPageLabel = "<a href=\"#\" onclick=\"{0}({1}); return false;\"><image src=\"/easycompany/images/bt_prev.gif\" border=0/></a>&#160;";
		currentPageLabel = "<strong>{0}</strong>&#160;";
		otherPageLabel = "<a href=\"#\" onclick=\"{0}({1}); return false;\">{2}</a>&#160;";
		nextPageLabel = "<a href=\"#\" onclick=\"{0}({1}); return false;\"><image src=\"/easycompany/images/bt_next.gif\" border=0/></a>&#160;";
		lastPageLabel = "<a href=\"#\" onclick=\"{0}({1}); return false;\"><image src=\"/easycompany/images/bt_last.gif\" border=0/></a>&#160;";
	}
}

root-context.xml

-> 다시 root-context.xml로 가서 내용 추가

   <bean id="textRenderer" class="egovframework.rte.ptl.mvc.tags.ui.pagination.DefaultPaginationRenderer"></bean>
   
   <bean id="imageRenderer" class="org.green.util.ImagePaginationRenderer"></bean>   

   <bean id="paginationManager" class="egovframework.rte.ptl.mvc.tags.ui.pagination.DefaultPaginationManager">
      <property name="rendererType">
         <map>
            <entry key="text" value-ref="textRenderer"></entry>
            <entry key="image" value-ref="imageRenderer"></entry>
         </map>
      </property>
   </bean>
</beans>

 

-> 보드컨트롤러로 넘어가서 잡아줘야함.

BoardController.java

board에 전체 글 수 추가하기

-> totalRecordCount 메소드 생성 (service, dao)

		// 2024-02-20 페이징 추가하기 psd
		
		@GetMapping("/board")
		public String board(Model model) {
			// 전체 글 수 totalRecordCount (0, 1인 것들만 가져오기)
			int totalRecordCount = boardService.totalRecordCount();
			System.out.println("totalRecordCount : "+totalRecordCount);

			// pagination
 
			List<BoardDTO> list = boardService.boardList();
			model.addAttribute("list", list); // ("이름", 값)
			return "board"; // jsp file name
		}

board-mapper.xml

  	<select id="totalRecordCount" resultType="Integer">
  		SELECT COUNT(*) FROM board WHERE board_del='1'
  	</select>

BoardService.java

	public int totalRecordCount() {
		return boardDAO.totalRecordCount();
	}

BoardDAO.java

페이징

selectList에 pageNo 추가하기

	public List<BoardDTO> boardList(int pageNo) {
		return sqlSession.selectList("board.boardList", pageNo); // namespace.ID
	}

	public int totalRecordCount() {
		return sqlSession.selectOne("board.totalRecordCount"); // 매개변수 1개
	}

BoardController.java

@getMapping("/board) 전체 코드 수정

* pagination 코드 추가

		@GetMapping("/board")
		public String board(@RequestParam(value = "pageNo", required = false) String no, Model model) {
			
            // pageNo가 오지 않는다면
			int currentPageNo = 1;
			if(util.str2Int(no) > 0) { // 정수=1, 정수가 아니면 currentPageNo
				currentPageNo = Integer.parseInt(no);
			}
			
			// 전체 글 수 totalRecordCount (0, 1인 것들만 가져오기)
			int totalRecordCount = boardService.totalRecordCount();
			System.out.println("totalRecordCount : "+totalRecordCount);
			
			// pagination
			PaginationInfo paginationInfo = new PaginationInfo();
			paginationInfo.setCurrentPageNo(currentPageNo); // 현재 페이지 번호
			paginationInfo.setRecordCountPerPage(10); // 한 페이지에 게시되는 게시물 수 
			paginationInfo.setPageSize(10); // 페이징 리스트의 사이즈 (페이징 숫자 수)
			paginationInfo.setTotalRecordCount(totalRecordCount); // 전체 게시물 건 수
			
			List<BoardDTO> list = boardService.boardList(paginationInfo.getFirstRecordIndex()); // boardList -> change method 
			model.addAttribute("list", list);
			
			//페이징 관련 정보가 있는 PaginationInfo 객체를 모델에 반드시 넣어준다.
			model.addAttribute("paginationInfo", paginationInfo); 
			model.addAttribute("pageNo", currentPageNo);
			
			return "board"; // jsp file name
		}

 

-> boardList()를 change method로 변경하기 클릭해서 BoardService로 넘어감

BoardService.java

	public List<BoardDTO> boardList(int pageNo) {
		return boardDAO.boardList(pageNo);
	}

BoardDAO.java

boardList(ing pageNo)로 변경하기

리턴에 pageNo 추가하기

	public List<BoardDTO> boardList(int pageNo) {
		return sqlSession.selectList("board.boardList", pageNo); 
	}

board-mapper.xml

parameterType을 Integer로, LIMIT에 0을 #{pageNo}로 수정

	<select id="boardList" parameterType="Integer" resultType="boardDTO">
		SELECT board_no, board_title, board_write, board_date, board_count, comment 
		FROM boardview		<!-- board.boardList -->
		LIMIT #{pageNo}, 10
	</select>

board.jsp

전자정부프레임워크 페이징 추가

<%@ taglib uri="http://egovframework.gov/ctl/ui" prefix="ui"%>

 

스크립트에 전자정부 페이징 부분 추가하기

	// 전자정부 페이징 이동 스크립트
	function linkPage(pageNo){
		location.href="./board?pageNo="+pageNo;
	}
	</script>

 

아래의 게시판 테이블 끝나는 </table> 아래에 페이징 jsp 추가
타입을 텍스트로 변경.

				<!-- 페이징 -->
				<div class="m-2 bg-secondary">
					<ui:pagination paginationInfo = "${paginationInfo}" type="text" jsFunction="linkPage"/>
				</div>

pom.xml

springframework를 5.0.7에서 4.3.25로 변경함. 

	<properties>
		<java-version>11</java-version>
		<org.springframework-version>4.3.25.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>

 

버전 바꾸니까 오류가 많이 생김. 
톰캣을 지웠다가 다시 설치하고, root-context.xml을 수정 후, 프로그램 재접속 하니까 다시 된다.
root-context.xml 파일이 문제였던듯.

 

페이징 이미지로 변경하기

1. board.jsp 페이징 코드 부분에 text를 image로 변경

				<!-- 페이징 -->
				<div class="m-2 bg-secondary" >
					<ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="linkPage"/>
				</div>

 

2. 이미지 다운받아서 img 폴더에 추가하기

3. ImagePaginationRenderer.java

util폴더에 있는 파일에 이미지 경로 추가하기
<image src=\"/img/bt_first.png\" border=0/>

로그인 페이지 만들기

menu.jsp

<li class="nav-item"><a class="nav-link" href="./login">로그인</a></li>

LoginController.java

@Controller
public class LoginController {
	// get (/login)
	@GetMapping("/login")
	public String login() {
		return "login";
	}
	
}

login.jsp 

index.jsp 복사해서 만들기

<body> 태그 안에 login <section> 생성

	<!-- Login -->
	<section class="page-section" id="login">
		<div class="container">
			
		</div>
	</section>

 

로그인 페이지 css 만들기

<style type="text/css">
.page-section#login {
	margin-top: 150px; /* 원하는 위치에 따라 값 조절 */
}

.page-section#login .form-group {
	margin-bottom: 0;
}
</style>

</head>
<body id="page-top">
	<!-- Navigation 코드 이동 : menu.jsp -->
	<c:import url="menu.jsp" />

	<!-- LOGIN -->
	<section class="page-section" id="login">
		<div class="container">
			<div class="row">
				<div class="col-md-4 mx-auto">
					<form action="./login" method="post">
						<h2 class="text-center text-uppercase text-primary mb-4">LOGIN</h2>

						<div class="form-group">
						<!-- <label id="id"></label> -->
							<input type="text" id ="id" name="id" class="form-control"
								placeholder="아이디">
						</div>

						<div class="form-group">
							<input type="password" id="pw" name="pw" class="form-control"
								placeholder="비밀번호">
						</div>

						<div class="mb-3 row">
							<div class="col-sm-12">
								<div class="form-group text-center">
									<button type="reset" class="btn btn-danger mr-2">초기화</button>
									<button type="submit" class="btn btn-primary">로그인</button>
								</div>
							</div>
						</div>
					</form>
					<div class="text-center">
						<button type="button" id="join" class="btn btn-info">가입하기</button>
					</div>

				</div>
			</div>
		</div>
	</section>

 

LoginController.java

@PostMapping 추가

	@PostMapping("/login")
	public String login(HttpServletRequest request) {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");

		System.out.println("id: "+id+" / pw : "+pw);

		return "";
	}

LoginDTO.java

@Data
public class LoginDTO {
	private int count;
	private String id, pw, mname;
}

LoginController.java

	@PostMapping("/login")
	public String login(HttpServletRequest request) {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
//		System.out.println("id: "+id+" / pw : "+pw);
		
		LoginDTO loginDTO = new LoginDTO();
		loginDTO.setId(id);
		loginDTO.setPw(pw);
		
		LoginDTO login = loginService.login(loginDTO);
		
		return "";
	}
}

 

-> LoginService 

-> LoginDAO 만들기

LoginDAO.java

@Repository
public class LoginDAO {

	@Autowired
	private SqlSession sqlSession;
	
	public LoginDTO login(LoginDTO dto) {
		return sqlSession.selectOne("login.login", dto); // login 이라는 mapper
	}
}

LoginService.java

@Service
public class LoginService {
	
	@Autowired
	private LoginDAO loginDAO;
	
	public LoginDTO login(LoginDTO dto) {
		return loginDAO.login(dto); // 연결시켜주기
	}
}

 

-> 컨트롤러 연결해주기

LoginController.java

@Controller
public class LoginController {
	
	// 컨트롤러 맨 위에 autowired로 연결해주기
	@Autowired
	private LoginService loginService;
}

login-mapper.xml 생성

<mapper namespace="login"> <!-- namespace와 id는 단 하나 -->

	<select id="login" parameterType="loginDTO" resultType="loginDTO">
	<![CDATA[
		SELECT COUNT(*) as count, mname
		FROM member
		WHERE mid=#{id} AND mpw=#{pw} AND mgrade > 4
	]]>
	</select>  
  	
</mapper>

mybatis-config.xml

mybatis에 alias 추가해주기!

<typeAlias type="org.-----.dto.LoginDTO" alias="loginDTO"/>

LoginController.java

	@PostMapping("/login")
	public String login(HttpServletRequest request) {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
//		System.out.println("id: "+id+" / pw : "+pw);
		
		LoginDTO loginDTO = new LoginDTO();
		loginDTO.setId(id);
		loginDTO.setPw(pw);
		
		LoginDTO login = loginService.login(loginDTO);
//		System.out.println("count : " + login.getCount());
//		System.out.println("name : " + login.getMname());
		
		return "";
	}
}

 

콘솔 출력 결과
count : 1
name : test1

 

-> 세션 추가

	@PostMapping("/login")
	public String login(HttpServletRequest request) {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
//		System.out.println("id: "+id+" / pw : "+pw);
		
		LoginDTO loginDTO = new LoginDTO();
		loginDTO.setId(id);
		loginDTO.setPw(pw);
		
		LoginDTO login = loginService.login(loginDTO);
		if(login.getCount() == 1) {
//			System.out.println("count : " + login.getCount());
//			System.out.println("name : " + login.getMname());
			
			// 세션 만들기
			HttpSession session = request.getSession();
			session.setAttribute("mid", id);
			session.setAttribute("mname", login.getMname()); // mname은 DTO에 있으니까
		}
		return "redirect:/index"; // 로그인 성공,실패 어떤 상황이어도 인덱스로 넘어감
	}
}

로그아웃 만들기

	@GetMapping("/logout")
	public String logout(HttpServletRequest request) { // 세션 종료시켜야하니까
		HttpSession session = request.getSession();
		if(session.getAttribute("mid") != null) {
			session.removeAttribute("mid");
		}
		if(session.getAttribute("mname") != null) {
			session.removeAttribute("mname");
		}
		session.invalidate(); // 세션 무효화
		
		return "redirect:/login";
	}
}

menu.jsp

myInfo 추가

로그인 한 ID 불러오도록 : ${sessionScope.mname }

<li class="nav-item"><a class="nav-link" href="./myInfo">${sessionScope.mname } 님</a></li>

 

* 로그인, 로그아웃, 마이페이지 전체 코드

					<c:choose>
						<c:when test="${sessionScope.mid ne null }">
							<li class="nav-item"><a class="nav-link" href="./myInfo@${sessionScope.mid }">${sessionScope.mname } 님</a></li>
							<li class="nav-item"><a class="nav-link" href="./logout">로그아웃</a></li>
						</c:when>
						<c:otherwise>
							<li class="nav-item"><a class="nav-link" href="./login">로그인</a></li>
						</c:otherwise>
					</c:choose>

글쓰기 /write

mybatis-config.xml

<typeAlias type="org.od.dto.WriteDTO" alias="writeDTO"/>

BoardController.java

HttpServletRequest request

		// 2024-02-16 글쓰기 + 02-20 
		
		@PostMapping("/write") // 내용,제목 -> DB에 저장 -> 게시판으로 
		public String write(WriteDTO dto, HttpServletRequest request) { 
			int result = boardService.write(dto, request);
			
			if(result == 1) {
				return "redirect:/detail?no="+dto.getBoard_no();
			} else {
			return "redirect:/error";
		}
		
	}

 

-> write()를 BoardService에 생성해주기 

BoardService.java

	public int write(WriteDTO dto, HttpServletRequest request) {
		HttpSession session = request.getSession();
		dto.setMid(session.getAttribute("mid"));
		return boardDAO.write(dto);
	}

 

-> setMid에서 오류가 나는데, String으로 변경

	public int write(WriteDTO dto, HttpServletRequest request) {
		HttpSession session = request.getSession();
		dto.setMid((String) session.getAttribute("mid"));
		return boardDAO.write(dto);
	}

BoardController.java

-> commentWrite 부분에 session 추가 (HttpServletRequest request)

setMid 오류나는 거 String 추가해주기

	// 2024-02-19 댓글쓰기 psd = 글 번호 no, 댓글 내용 comment, 글쓴이 필요함.
		// 2024-02-20 session 추가
		@PostMapping("/commentWrite")
		public String commentWrite(CommentDTO comment, HttpServletRequest request) {
			HttpSession session = request.getSession();
			comment.setMid((String) session.getAttribute("mid"));
			
			int result = boardService.commentWrite(comment); // boardService 실행 시 dto를 가지고 날아감
			System.out.println("댓글쓰기 결과 : " + result); // 1이면 정상, 0이면 에러
			return "redirect:/detail?no="+comment.getNo(); // 글 번호를 받아서 글 번호로 페이지 이동 
			
		}

 

menu.jsp

menu.jsp에서 c tag를 지우고 

board, index, login, detail.jsp 에 스크립트 태그 <%@ include file="menu.jsp" %> 이거 사용

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
.
.
.
.
					<c:choose>
						<c:when test="${sessionScope.mid ne null }">
							<li class="nav-item"><a class="nav-link" href="./myInfo">${sessionScope.mname } 님</a></li>
							<li class="nav-item"><a class="nav-link" href="./logout">로그아웃</a></li>
						</c:when>
						<c:otherwise>
							<li class="nav-item"><a class="nav-link" href="./login">로그인</a></li>
						</c:otherwise>
					</c:choose>

 

 

반응형
저작자표시 비영리 변경금지

'개발 공부 Today I Learned' 카테고리의 다른 글

[국비 62일차 TIL] 로그인 확인, 횟수 제한  (0) 2024.02.21
[국비 61일차 TIL_2] 필수 파일의 대략적인 기본 로직 정리  (0) 2024.02.20
[국비 60일차 TIL] spring 글쓰기, 디테일, 댓글 modal  (0) 2024.02.19
[국비 59일차 TIL] Spring - 게시판 detail, error, 모달 창 구현  (0) 2024.02.16
[국비 58일차 TIL] 스프링 다시 만들기 3  (0) 2024.02.15

관련글

댓글

티스토리툴바