[JSP] 입력 - 결과창 웹페이지 만들기 (성적처리 프로그램)

 

성적을 입력하고 결과를 확인할 수 있는 리스트 페이지

및 성적 수정, 삭제까지 하는 방법을 배웠다.

 

중요한 핵심적인 코딩 위주로 살펴보겠다.

 

 

1. 데이터 값 저장 <ScoreDTO.java>

	private String hak;
	private String name;
	private int kor;
	private int eng;
	private int mat;
	
	private int tot;
	private int ave;
	private int rank;

 

변수를 선언해주며 getter, setter 오버라이딩도 함께 해줘야 한다.

값을 받고 넣어야 하기 때문이다.

 

 

2. 성적 입력 <write.jsp>

성적 입력 페이지이다.

write.jsp

 

지난 시간에 만들었던 내용인데, 블로그에는 따로 적지 않았다.

테이블 만드는 등의 디자인은 모양대로 만들면 되기 때문에

추가적으로 중요한 코딩을 보자면,

 

<script type="text/javascript">

	function sendIt(){		
		var f = document.myForm;		
		f.action = "<%=cp%>/score/write_ok.jsp";
		f.submit();
	}	
</script>

<tr height="35">
	<td align="center" colspan="2">
	<input type="button" class="btn" value="입력완료" onclick="sendIt();">
	<input type="reset" class="btn" value="다시입력" onclick="document.myForm.hak.focus">
	<input type="button" class="btn" value="입력취소" onclick="javascript:location.href='<%=cp%>/score/list.jsp';"/>
	</td>
</tr>

 

값을 넣고 '입력완료'를 눌렀을 때 sendIt함수가 실행되도록 script에 적어주었다.

action에 write_ok.jsp라는 입력처리 파일로 연결시켰다.

cp 부분은 String cp = request.getContextPath();을 상단에 입력해줘야 하며, 경로를 연결해준다.

 

'다시입력'은 type에 초기화되는 reset을 입력해주고 가장 위의 칸인 학번란에 포커스를 두었다.

위에 document.myForm을 f로 선언하였지만, 이는 script내에서만 가능하므로 밑에는 원래 이름을 입력해야 한다.

'입력취소'는 밑에 나올 list.jsp라는 리스트 페이지로 가게 하였다.

 

 

3. 성적 처리 <write_ok.jsp>

입력을 했을 때 이를 처리해주는 페이지이다.

 

<jsp:useBean id="dto" class="com.score.ScoreDTO" scope="page"/>
<jsp:setProperty property="*" name="dto"/>

<% 
	Connection conn = DBConn.getConnection();	
	ScoreDAO dao = new ScoreDAO(conn);	
	int result = dao.insertData(dto);	
	DBConn.close();
	
	if(result!=0)
		response.sendRedirect("list.jsp");
%>

 

connection으로 연결하여 db에 데이터를 넣도록 한다.

 

ScoreDAO라는 파일은 db에 데이터를 올려주는 중요한 곳이며

이 곳에서 입력, 수정, 삭제 등 모든 것을 담당한다.

insertData는 ScoreDAO에 입력한 메소드이며 밑에 설명할 것이다.

 

result는 잘 실행됐다면 1, 아니면 0을 반환한다.

따라서 if문은 잘 실행된 경우를 의미한다.

 

지난 redirect 글에서도 알 수 있듯이, 지금 insert했기 때문에 redirect를 해주는 것이다.

 

 

4. db에 데이터를 전달하는 <ScoreDAO>

입력, 수정, 삭제 등의 데이터 관련된 실행은 이 곳을 거쳐간다.

 

public class ScoreDAO {
	
	private Connection conn;
	
	public ScoreDAO(Connection conn) {
		this.conn = conn;
	}

DB의 위치 정보를 알아야 연결을 하므로 connection을 입력해준다.

 

//입력
	public int insertData(ScoreDTO dto) {
		
		int result = 0;
		PreparedStatement pstmt = null;
		String sql;
		
		try {			
			sql = "insert into score(hak,name,kor,eng,mat) ";
			sql+= "values (?,?,?,?,?)";
			
			pstmt = conn.prepareStatement(sql); 
			
			pstmt.setString(1, dto.getHak());
			pstmt.setString(2, dto.getName());
			pstmt.setInt(3, dto.getKor());
			pstmt.setInt(4, dto.getEng());
			pstmt.setInt(5, dto.getMat());
			
			result = pstmt.executeUpdate();
			
			pstmt.close();			
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}		
		return result;		
	}

 

write_ok.jsp에 보았던 insertData 메소드를 입력해준 것이다.

try문으로 진행한다.

 

""안에 sql문을 입력해주며, 입력이기 때문에 insert를 써준다.

중요한 것은 sql을 +=로 연결할 때 뒤에 한 칸 공백을 줘야 한다.

 

?로 된 값을 pstmt.set~으로 번호 순서대로 dto의 값을 넣어준다.

result은 실행된 결과를 받는다.

 

	//전체 데이터
	public List<ScoreDTO> getLists(){
		
		List<ScoreDTO> lists = new ArrayList<ScoreDTO>();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;
		
		try {
			
			sql = "select hak,name,kor,eng,mat,";
			sql += "(kor+eng+mat) tot,(kor+eng+mat)/3 ave, ";
			sql += "rank() over (order by (kor+eng+mat) desc) rank ";
			sql += "from score";
			
			pstmt = conn.prepareStatement(sql);
			
			rs = pstmt.executeQuery();
			
			while(rs.next()) {
				
				ScoreDTO dto = new ScoreDTO();
				
				dto.setHak(rs.getString("hak"));
				dto.setName(rs.getNString("name"));
				dto.setKor(rs.getInt("kor"));
				dto.setEng(rs.getInt("eng"));
				dto.setMat(rs.getInt("mat"));
				dto.setTot(rs.getInt("tot"));
				dto.setAve(rs.getInt("ave"));
				dto.setRank(rs.getInt("rank"));
				
				lists.add(dto);							
			}
			
			pstmt.close();
			rs.close();
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}		
		return lists;		
	}

 

전체 데이터를 가져오는 코딩이다.

List 인터페이스를 사용하며 ScoreDTO에 입력해준 데이터들을 담는다.

 

마찬가지로 sql문을 통해 데이터를 가져오는 것이기에 select문을 입력해준다.

 

while문으로 데이터가 있는 만큼 next()로 찾아서 값을 가져온다.

데이터가 100개라면 dto의 갯수도 100개이다.

다 찾은 데이터들은 lists에 넣어준다.

 

 

5. 결과를 보여주는 <list.jsp>

 

입력했던 결과들은 list.jsp에서 보게 한다.

 

 

디자인은 이미지에 맞게 해주면 되기 때문에 마찬가지로

데이터를 주고 받는 코딩 부분을 살펴보겠다.

 

<%for(ScoreDTO dto : lists){%>
<tr height="30">
	<td align="center" bgcolor="#ffffff"><%=dto.getHak() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getName() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getKor() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getEng() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getMat() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getTot() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getAve() %></td>
	<td align="center" bgcolor="#ffffff"><%=dto.getRank() %></td>
	<td align="center" bgcolor="#ffffff"> 
	<a href="<%=cp%>/score/update.jsp?hak=<%=dto.getHak()%>">수정</a>
	<a href="<%=cp%>/score/delete_ok.jsp?hak=<%=dto.getHak()%>">삭제</a>
	
	</td>
</tr>
<%} %>

 

이 부분은 테이블 안에 각 칸에 맞게 값을 넣어준 부분이다.

 

확장 for문으로 위에 ScoreDAO에서 입력했던 lists의 값을 가져왔다.

각각에 맞게 순서대로 값을 입력하면 되는 것이다.

 

 

---

이렇게 해서 입력창에 값을 입력하고 결과를 출력하는 코딩을 알아보았다.

변형으로 수정과 삭제까지 진행하였지만

내용은 비슷하다.

 

sql문에서 수정은 update, 삭제는 delete를 통해 진행해주면 되고

물론 각자 해당하는 jsp파일도 만들어야 한다.

 

특히 중요한 것은 수정할 때 만들 update jsp파일에서

기준이 되는 학번과, 수정할 필요가 없는 이름의 name 및 value을 지워줘야 하며

학번만 

<input type="hidden" name="hak" value="<%=dto.getHak()%>"/>

'hidden'으로 처리해줘야 하는 점 잊지 말자!

 

 

---

이렇게 해서 입력, 수정, 삭제까지 모두 배웠으며

과제로 naver 사이트의 회원가입창을 만들어 이번에 배운 내용을 활용하였다.

입력 후에 회원가입 진행, 회원 정보 수정 및 삭제까지 모두 할 수 있게 되었다!

 

 

 

2월 14일