Backend/JAVA_WEB
09. JavaBeans를 이용한 성적 테이블 CRUD 게시판 만들기 ② (성적입력, 성적목록, 공통코드 처리)
개발개발빈이
2022. 7. 15. 20:20
○ 성적입력 폼 (sungjukForm.jsp)
- main/webapp/sungjukBean/sungjukForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>sungjukForm.jsp</title>
<style>
h3 {
font: 40px Montserrat, sans-serif;
font-weight: 500;
}
a {
font: 20px Montserrat, sans-serif;
font-weight: 400;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h3>★ 성적 입력 폼 ★</h3>
<p><a href="sungjukList.jsp">[성적목록]</a></p>
<form method="post" action="sungjukIns.jsp">
<table class="table">
<tr>
<th class="active">이름</th>
<td>
<input type="text" name="uname" class="form-control" maxlength="20"
required autofocus>
</td>
</tr>
<tr>
<th class="active">국어</th>
<td>
<input type="number" name="kor" class="form-control" size="5"
min="0" max="100" placeholder="숫자입력">
</td>
</tr>
<tr>
<th class="active">영어</th>
<td>
<input type="number" name="eng" class="form-control" size="5"
min="0" max="100" placeholder="숫자입력">
</td>
</tr>
<tr>
<th class="active">수학</th>
<td>
<input type="number" name="mat" class="form-control" size="5"
min="0" max="100" placeholder="숫자입력">
</td>
</tr>
<tr>
<th class="active">주소</th>
<td>
<select name="addr" class="form-control">
<option value="Seoul">서울</option>
<option value="Jeju">제주</option>
<option value="Suwon">수원</option>
<option value="Busan">부산</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="전송" class="btn btn-default btn-lg">
<input type="reset" value="취소" class="btn btn-default btn-lg">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
○ 성적입력 결과 (sungjukIns.jsp)
- main/webapp/sungjukBean/sungjukIns.jsp
- 자바빈 객체(object)생성 (참고 : JSP 자바빈즈)
<jsp:useBean id="dao" class="net.sungjuk.SungjukDAO" scope="page"></jsp:useBean>
<jsp:useBean id="dto" class="net.sungjuk.SungjukDTO" scope="page"></jsp:useBean>
① 사용자가 입력한 값 가져오기
<body>
<h3>☆ 성적 결과 페이지 ☆</h3>
<%
request.setCharacterEncoding("UTF-8");
String uname = request.getParameter("uname").trim();
int kor = Integer.parseInt(request.getParameter("kor").trim());
int eng = Integer.parseInt(request.getParameter("eng").trim());
int mat = Integer.parseInt(request.getParameter("mat").trim());
String addr = request.getParameter("addr");
int aver = (kor+eng+mat)/3;
%>
</body>
② sungjuk 테이블에 값 추가 : DTO 객체 사용하기 전
int cnt=dao.insert(uname, kor, eng, mat, aver, addr);
③ sungjuk 테이블에 값 추가 : DTO 객체 사용
dto.setUname(uname);
dto.setKor(kor);
dto.setEng(eng);
dto.setMat(mat);
dto.setAver(aver);
dto.setAddr(addr);
int cnt=dao.create(dto);
- 전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="dao" class="net.sungjuk.SungjukDAO" scope="page"></jsp:useBean>
<jsp:useBean id="dto" class="net.sungjuk.SungjukDTO" scope="page"></jsp:useBean>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>sungjukIns.jsp</title>
</head>
<body>
<h3>☆ 성적 결과 페이지 ☆</h3>
<%
request.setCharacterEncoding("UTF-8");
String uname = request.getParameter("uname").trim();
int kor = Integer.parseInt(request.getParameter("kor").trim());
int eng = Integer.parseInt(request.getParameter("eng").trim());
int mat = Integer.parseInt(request.getParameter("mat").trim());
String addr = request.getParameter("addr");
int aver = (kor+eng+mat)/3;
//1)DTO 객체를 사용하기 전
int cnt=dao.insert(uname, kor, eng, mat, aver, addr);
//2)DTO 객체를 사용한 경우
//전달값을 모두 dto객체에 담기
dto.setUname(uname);
dto.setKor(kor);
dto.setEng(eng);
dto.setMat(mat);
dto.setAver(aver);
dto.setAddr(addr);
int cnt=dao.create(dto);
if(cnt==0){
out.println("<p>성적 입력이 실패했습니다</p>");
out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
}else{
out.println("<script>");
out.println(" alert('성적이 입력되었습니다');");
out.println(" location.href='sungjukList.jsp';");
out.println("</script>");
}//if end
%>
</body>
</html>
○ 공통코드 (ssi.jsp)
- main/webapp/sungjukBean/ssi.jsp
- 모든 페이지에서 공통으로 쓰이는 class, 자바빈 객체 등을 jsp 파일로 만들어서 import하여 사용
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- ssi.jsp 공통코드 --%>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.util.*" %>
<%@ page import="net.sungjuk.*" %>
<jsp:useBean id="dao" class="net.sungjuk.SungjukDAO" scope="page"></jsp:useBean>
<jsp:useBean id="dto" class="net.sungjuk.SungjukDTO" scope="page"></jsp:useBean>
<% request.setCharacterEncoding("UTF-8"); %>
○ 성적목록 (sungjukList.jsp)
- main/webapp/sungjukBean/sungjukList.jsp
-
공통코드 ssi.jsp 불러오기 : 페이지에 태그가 많을때는 액션태그 / jsp코드가 많을때는 include
<%@ include file="ssi.jsp" %>
<jsp:include page="ssi.jsp"></jsp:include>
- 전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>sungjukList.jsp</title>
<style>
h3 {
font: 40px Montserrat, sans-serif;
font-weight: 500;
}
tbody td {
text-align: left;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h3>★ 성적 목록 ★</h3>
<p><a href="sungjukForm.jsp">[성적쓰기]</a></p>
<table class="table table-hover">
<thead>
<tr class="active">
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<%
ArrayList<SungjukDTO> list = dao.list();
if(list==null){
out.println("<tr>");
out.println(" <td colspan='5'>자료없음</td>");
out.println("</tr>");
}else{
for(int i=0; i<list.size(); i++){
dto=list.get(i);//한줄 가져오기
%>
<tr>
<td><a href='sungjukRead.jsp?sno=<%=dto.getSno()%>'><%=dto.getUname()%></a></td>
<td><%=dto.getKor()%></td>
<td><%=dto.getEng()%></td>
<td><%=dto.getMat()%></td>
<td><%=dto.getWdate().substring(0,10)%></td>
</tr>
<%
}//for end
}//if end
%>
</tbody>
</table>
</div>
</body>
</html>