(5-2) [Spring&mybatis] 학생관리 프로그램 만들기 (추가, 수정, 삭제)

씩씩한 조약돌·2023년 1월 28일
0

미니프로젝트🤹

목록 보기
14/21
post-thumbnail

학생관리 프로그램

참고자료 : spring 프로젝트 생성 / mybatis연결 / spring+mybatis연결 / Bootstrap

구현내용

  • 기존의 데이터 조회, 추가, 수정, 삭제를 포함
  • 조회 페이지를 2개로 나누기
    -> main.jsp : 성적의 총점, 평균을 구하고 순위를 보여줌
    -> admin.jsp : 데이터 추가, 수정, 삭제를 처리
  • 각 페이지에는 이동할 수 있는 버튼 추가 (메인->관리자 / 관리자->메인)
  • 부트스트랩 이용해서 스타일 적용하기

개발환경

언어 : JAVA (JDK 11)
서버 : Apache Tomcat 9.0
프레임워크 : Spring Framework 3.9.18, MyBatis 3.5.8, Bootstrap 5.2.3
DB : OracleXE 11gR2
IDE : Eclipse 2020-12, SQL Developler

6. 추가(INSERT)

admin.jsp에서 '학생추가'버튼이 눌리면
-> GET : 추가데이터를 입력할 폼(insert.jsp)화면으로 넘어감 (insert.do)
-> POST : insert.jsp에서 입력받은 데이터를 받아와서 / 쿼리문으로 넘겨서 실행 / redirect로 admin.jsp화면으로 넘겨줌

6-1 GET

1. GET / '학생추가'버튼 누르면 화면이동 : StuController클래스

	@RequestMapping(value="/insert.do", method=RequestMethod.GET)
	public String insert() {
		return "stu/insert";
	}

2. View구현 : insert.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert</title>
<style>
form {margin:10px; width:300px;}
#btn {float:right}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
	<form name = "frm" action="insert.do" method="post">
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">번호</span>
  			<input type="text" name="num" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">이름</span>
  			<input type="text" name="name" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">국어</span>
  			<input type="text" name="kor" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">영어</span>
  			<input type="text" name="eng" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>				
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">수학</span>
  			<input type="text" name="math" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>	

		<p><input type="submit" value="추가" class="btn btn-secondary" id="btn"/></p>
	</form>
</body>
</html>

3. 중간확인


6-1 POST

4. INSERT 쿼리문 작성 : StuMapper.xml

	<insert id="ins" parameterType="model.StuDTO">
		INSERT INTO studentlist(num, name, kor, eng, math)
		VALUES(#{num}, #{name, jdbcType=VARCHAR}, #{kor}, #{eng}, #{math})
	</insert>

5. SqlSession-쿼리문 연결 : StuDaoImp클래스

  • insert("stu.ins", dto) : "stu.ins"라는 INSERT쿼리문을 실행, dto는 #{파라미터}에 값을 공급할 객체
	@Override
	public void insertMethod(StuDTO dto) {
		sqlSession.insert("stu.ins", dto);
	}

6. POST / input에 넣은 데이터 받아서 쿼리문 실행 및 admin.jsp로 이동 : : StuController클래스

	@RequestMapping(value="/insert.do", method=RequestMethod.POST)
	public String insert(StuDTO dto) {
		stuDao.insertMethod(dto);
		return "redirect:/admin.do";
	}

7. 실행

7. 수정(UPDATE)

GET : '수정'버튼을 누르면 update.jsp로 이동 / SELECT쿼리문으로 선택된 num의 데이터값을 가져와서 input value에 보여줌
POST : input으로 받은 데이터를 UPDATE쿼리문으로 넘겨서 실행 / admin.jps로 이동

7-1 GET

1. 수정할 데이터만 가져올 INSERT쿼리문 : StuMapper.xml

	<select id="one" parameterType="int" resultType="model.StuDTO">
		SELECT * FROM studentlist
		WHERE num=#{num}
	</select>

2. SqlSession-쿼리문 연결 : StuDaoImp클래스

  • selectOne(query_id, '조건') : id에 대한 select문을 실행하면서 조건(쿼리문에서 사용할 인자)를 전달
    -> controller에서 받아온 num을 ${num}으로 넘겨줌
	@Override
	public StuDTO updateMethod(int num) {
		return sqlSession.selectOne("stu.one", num);
	}

3. GET / '수정'버튼이 눌리면 update.jsp화면으로 이동, insert쿼리문으로 선택된 데이터를 input value로 넘겨줌 : StuController클래스

  • addObject() : "dto"에 stuDao.one(num)리턴값 넣어주기
    -> stuDao.one(num)리턴값 = 쿼리문에 대한 데이터를 받아옴
    -> "dto"에 담긴 값은 update.jsp에 value값에서 받아옴
  • setViewName() : view로 보여줄 update.jsp와 연결
    리턴값 : ModelAndView (쿼리문실행값과 update.jsp)
	@RequestMapping(value="/update.do", method=RequestMethod.GET)
	public ModelAndView update(int num, ModelAndView mav) {
		mav.addObject("dto", stuDao.one(num));
		mav.setViewName("stu/update");		
		return mav;
	}

4. update.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Update</title>
<style>
form {margin:10px; width:300px;}
#btn {float:right}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
	<form name = "frm" action="update.do" method="post">
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">이름</span>
  			<input type="text" name="name" value="${dto.name}" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">국어</span>
  			<input type="text" name="kor" value="${dto.kor}" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">영어</span>
  			<input type="text" name="eng" value="${dto.eng}" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>				
		<div class="input-group mb-3">
 			<span class="input-group-text" id="inputGroup-sizing-default">수학</span>
  			<input type="text" name="math" value="${dto.math}" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
		</div>	
		<input type="hidden" name = "num" value="${dto.num}"/>
		<p><input type="submit" value="수정" class="btn btn-outline-primary" id="btn"/></p>
	</form>
</body>
</html>

5. 중간확인

7-2 POST

6. UPDATE쿼리문 : StuMapper.xml

	<update id="upd" parameterType="model.StuDTO">
		UPDATE studentlist SET name=#{name}, kor=#{kor}, eng=#{eng}, math=#{math}
		WHERE num=#{num}
	</update>

7. SqlSession-쿼리문 연결 : StuDaoImp클래스

	@Override
	public void updateMethod(StuDTO dto) {
		sqlSession.update("stu.upd", dto);		
	}

8. POST / input에 넣은 데이터 받아서 쿼리문 실행 및 admin.jsp로 이동 : StuController클래스

	@RequestMapping(value="/update.do", method=RequestMethod.POST)
	public String update(StuDTO dto) {
		stuDao.updateMethod(dto);
		return "redirect:/admin.do";
	}

9. 실행

8. 삭제(DELETE)

'삭제'버튼을 누르면 delete.do가 호출되고, 쿼리문 실행 후 admin.jsp로 이동

1. DELETE쿼리문 작성 : StuMapper.xml

	<Delete id="del" parameterType="int">
		DELETE FROM studentlist
		WHERE num=#{num}
	</Delete>

2. SqlSession-쿼리문 연결 : StuDaoImp클래스

	@Override
	public void deleteMethod(int num) {
		sqlSession.delete("stu.del", num);
	}

3. 쿼리문 실행 및 admin.jsp로 이동 : StuController클래스

	@RequestMapping(value="/delete.do")
	public String delete(int num) {
		stuDao.deleteMethod(num);
		return "redirect:/admin.do";
	}

4. 실행

profile
씩씩한 조약돌
씩씩하게 공부중 (22.11~)
이전 포스트

(5-1) [Spring&mybatis] 학생관리 프로그램 만들기 (전체 데이터 조회)

다음 포스트

(5-3) [Spring&mybatis] 학생관리 프로그램 만들기 (main화면, 시퀀스 연결하기)

0개의 댓글