과제풀이

brave_chicken·2024년 5월 21일

Spring 잇(IT)생 챌린지

잇(IT)생 챌린지

목록 보기

51/90

과제1. mainContent에 Ajax로 요청 처리

메인페이지 게시판/사내소식/경조사 각각에 맞게 데이터 출력

BoardController.java

mainContent.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/erp/common/css/main.css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
	margin-bottom: 0;
	border-radius: 0;
}

</style>
<title>Insert title here</title>
	<script type="text/javascript">
		$(document).ready(function() {
			//id가 boardCategory인 엘리먼트의 하위엘리먼트인 li태그에 동일한 코드적용하겠다는말
			$("#boardCategory>li").each(function() {
				//li가 클릭될때마다 alert실행 - 현재 선택한 객체를 지칭(this)
				$(this).click(function() {
					//선택한 li의 텍스트를 가져오기
					let category = $(this).text();
					//alert("선택:"+category);
					//기존선택되었던 li의 class속성을 모두 지우기
					$("#boardCategory>li").removeAttr("class");
					//클릭한 li탭이 선택되어있도록 active속성을 active로 정의
					$(this).attr("class","active");
					//선택한 탭에 대한 데이터를 조회해서 출력하기
					//=>해당카테고리데이터를 DB에서 조회해서 myboardlist에 <tr>로 출력되도록 Ajax로 처리하기
				/*	<tr>
						<td class="boardContent" style="">
						<a href="/erp/board/read?board_no=${board.board_no }&action=READ">${board.title }</a>
						</td>
						<td class="boardDate" style="">${board.write_date }</td>
					</tr> */
					$.ajax({
						url:"/erp/board/ajax/list",
						type:"get",
						data:{"category":category},
						success:function(result){
							//조회된 레코드 갯수만큼 출력하는 뷰를 만들기
							//alert(result.length)
							let printdata="";
							result.forEach(value =>{
								printdata = printdata + "<tr><td class='boardContent'>"
								+ "<a href='/erp/board/read?board_no="+value.board_no+"&action=READ'>"+value.title+"</a>"
								+ "</td><td class='boardDate'>"+value.write_date+"</td></tr>";
							})
							//만들어진 결과를 테이블에 row로 출력되도록 처리
							//데이터가 쌓이지 않도록 기존의 데이터를 지우고 하위 엘리먼트를 추가
							$("#myboardlist").empty();//<tr>태그 모두 지우기
							$("#myboardlist").append(printdata);
						}//end success
					})
				});
			});
		});//end ready
	</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-7">
				<div id="myCarousel" class="carousel slide" data-ride="carousel"
					style="width: 600px; height: 300px">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="/erp/images/multi1.jpg" alt="Image"
								style="width: 600px; height: 300px">

						</div>

						<div class="item">
							<img src="/erp/images/multi2.jpg" alt="Image"
								style="width: 800px; height: 300px">

						</div>
						<div class="item">
							<img src="/erp/images/multi3.jpg" alt="Image"
								style="width: 600px; height: 300px">

						</div>

						
					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel" role="button"
						data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a> <a class="right carousel-control" href="#myCarousel" role="button"
						data-slide="next"> <span
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
			<div class="col-sm-5">
				<div class="panel panel-primary"
					style="border-color: #edeef1; height: 300px; width: 450px">
					<div class="panel-footer">사내소식</div>
					<div class="panel-body">
						<ul class="nav nav-tabs" id="boardCategory">
							<li class="active"><a href="#">게시판</a></li>
							<li><a href="#">사내소식</a></li>
							<li><a href="#">경조사</a></li>
						</ul>
						<div id="boardMain" style="padding-top: 20px; padding-left: 10px">
							<table id="myboardlist">
								<c:forEach var="board" items="${boardlist }">
									<tr>
										<td class="boardContent" style="">
										<a href="/erp/board/read?board_no=${board.board_no }&action=READ">${board.title }</a>
										</td>
										<td class="boardDate" style="">${board.write_date }</td>
									</tr>
								</c:forEach>
								
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr />
		<div class="row main-row">
			<div class="col-sm-3">
				<div class="panel panel-primary"
					style="border-color: #edeef1; height: 300px">
					<div class="panel-footer">News</div>
					<div class="panel-body"></div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="panel panel-primary"
					style="border-color: #edeef1; height: 300px">
					<div class="panel-footer">회사소식</div>
					<div class="panel-body"></div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="panel panel-primary"
					style="border-color: #edeef1; height: 300px">
					<div class="panel-footer">회사소식</div>
					<div class="panel-body"></div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="panel panel-primary"
					style="border-color: #edeef1; height: 300px">
					<div class="panel-footer">회사소식</div>
					<div class="panel-body"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

BoardDTO

날짜데이터 형식 제이슨포멧적용

과제2. 아이디 중복체크

member.xml

MemberDAOImpl

@Repository
public class MemberDAOImpl implements MemberDAO {
	SqlSession sqlSessionTemplate;
	
	@Autowired
	public MemberDAOImpl(SqlSession sqlSessionTemplate) {
		super();
		this.sqlSessionTemplate = sqlSessionTemplate;
	}

	@Override
	public boolean idCheck(String id) {
		boolean result = true;
		MemberDTO user = sqlSessionTemplate.selectOne("com.multi.erp.member.idcheck", id);
		if(user==null) {//해당 아이디가 db에 존재하지 않는경우
			result = false;
		}
		return result;
	}
}

MemberServiceImpl

@Service
public class MemberServiceImpl implements MemberService {
	private MemberDAO dao;
	
	@Autowired
	public MemberServiceImpl(MemberDAO dao) {
		super();
		this.dao = dao;
	}

	@Override
	public boolean idCheck(String id) {
		return dao.idCheck(id);
	}
}

MemberController

@Controller
@RequestMapping("/member")
@SessionAttributes("user")
public class MemberController {
	private MemberService service;
	private DeptService deptservice;
	private FileUploadService fileuploadService;
	@Autowired
	public MemberController(MemberService service, DeptService deptservice, FileUploadService fileuploadService) {
		super();
		this.service = service;
		this.deptservice = deptservice;
		this.fileuploadService = fileuploadService;
	}

	@GetMapping(value = "/ajax/idcheck", produces = "application/text;charset=utf-8")
	public @ResponseBody String idCheck(String id) {
		String msg="";
		boolean check = service.idCheck(id);
		if(check) {
			//기존 DB에 저장이 되어있는 아이디
			msg = "사용불가능한 아이디";
		}else {
			msg = "사용가능한 아이디";
		}
		return msg;
	}
}