[KH정보교육원 당산] 35일차 (검색기능을 통하여 리스트 출력)

Learn/KH정보교육원

[KH정보교육원 당산] 35일차 (검색기능을 통하여 리스트 출력)

Dahoon06 2021. 4. 27. 22:22

728x90

파일 구성

데이터 구성

code char(5) not null,

title varchar2(50) not null,

writer varchar2(50),

price number(8) not null,

PRIMARY KEY(code_

코드번호를 검색해서 해당하는 데이터를 가져오고 수정

** 파일이름은 사진과 다르다(데이터 흐름에 맞춰 작성)

goodsInfoIndex.jsp (첫화면)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>코드 번호 조회</title>
</head>

<body>
<h2>상품 코드 번호를 입력해주세요.</h2>
	<form action="goodsAction.jsp" method="post">
		코드번호 입력 : <input type="text" name="code" required="required" />
		<br />
		<input type="submit" value="입력" />
	</form>
</body>
</html>

코드 번호를 입력받아 goodsAction.jsp로 파라미터값 전달(파라미터명 : code)

goodsAction.jsp (데이터 처리 페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="DBError.jsp" %>
    
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%!
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/web_db?useSSL=false";
	String id = "dahoon226";
	String pw = "ekgns00";
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	String query = "select * from goodinfo where code=?";
%>

<%
	String code = request.getParameter("code");
	try{
	Class.forName(driver);
	conn = DriverManager.getConnection(url,id,pw);
	
	pstmt = conn.prepareStatement(query);
	
	pstmt.setString(1,code);
	
	ResultSet rs = pstmt.executeQuery();
	
	//값을 goodsInfo.jsp로 전달
	if(rs.next()){
		String title = rs.getString("title");
		String writer = rs.getString("Writer");
		int price = rs.getInt("price");
		
		session.setAttribute("CODE", code);
		session.setAttribute("TITLE", title);
		session.setAttribute("WRITER", writer);
		session.setAttribute("PRICE", new Integer(price));
	}
} finally{
	try{
		if(pstmt != null){
			pstmt.close();
		}
		if(conn != null){
			conn.close();
		}
	} catch(Exception e){
		System.err.print("CLOSE ERR"+e.getMessage());
	}
}
	
	RequestDispatcher rd = request.getRequestDispatcher("goodsInfo.jsp");
	rd.forward(request, response);
	
%>

goodsAction.jsp에서는 넘어온 값을 데이터베이스에서 가져다가 비교하여 다른 페이지로 전달.

데이터 처리만 하는 페이지 이기 때문에 HTML코드는 없다.

** 맥북으로 만든 프로젝트라 사용한 데이터는 MySQL을 사용하였다(오라클이 한글이 깨지는데 아직 해결을 못해서...)

session.setAttribute("CODE",code);

=> 데이터 베이스에 접속하여 code컬럼에 있는 값을 새로운 변수 CODE에 저장한다.

** 페이지를 전환할때 sendRedirect를 사용하지 않고 ResultDisptcher 를 사용한 이유

=> sendRedirect는 단순히 페이지만 바꾸고 이 페이지에서 생성한 변수의 값을 넘길 수 없다.

변수의 값을 그대로 사용하기 위해서 ResultDisptcher의 객체를 생성하여 페이지 전환

*** 액션 페이지를 보면 try~catch구문이 전에 쓰던 방식과 다르다.

상단 선언부에 errorPage="DBError.jsp"를 선언하여 에러 발생시 에러페이지로 전환된다.

자원 해제를 하기위한 finally이 필요하므로 try~finally만 사용했다.

*** <%! %>과 <% %>에서 변수 선언의 차이점

전자의 경우 쉽게 생각하면 전역변수 생성이라고 생각하면되고

후자의 경우 지역변수로 생각하면 된다.

goodsInfo.jsp (가져온 데이터값)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>상품 정보</title>
</head>

<body>
	<h3>상품 정보</h3>
	코드 : ${CODE } <br />
	제목 : ${TITLE } <br />
	작성자 : ${WRITER } <br />
	가격 : ${PRICE } <br />
	<input type="button" value="수정하기" onclick="document.location.href='goodsUpdate.jsp'" />	
</body>
</html>

값을 가져올때 EL로 값을 가져왔다.

액션 페이지에서 변수명을 CODE,TITLE...으로 하여 값을 넘겨줬기 때문에 EL표현법으로도 같은 이름으로 받아준다.

** JSP에서 사용했던 방법 <%= %> 과 EL표현법 ${ }은 같은 의미

**** 액션 페이지에서 session으로 값을 저장 한 이유

=> request.setAttribute => 사용하기 위해서는 foward를 해야하는데 "버튼"으로는 사용이 불가

그래서 session에 값을 저장해서 사용

goodsUpdate.jsp (수정 페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>수정 페이지</title>
</head>
<body>
	<h2>수정 페이지</h2>
	<form action="goodsUpdateAction.jsp" method="get">
			코드 : <input type="text" value="${CODE }" name="code" readonly="readonly" /><br />
			제목 : <input type="text" placeholder="${TITLE }" name="title" /><br />
			작성자 : <input type="text" placeholder="${WRITER }" name="writer" /><br />
			가격 : <input type="text" placeholder="${PRICE }" name="price" /><br />
			<br />
		<input type="submit" value="수정하기" />
	</form>
</body>
</html>

placeholder 속성을 사용하여 수정할때 그 전의 글씨가 보이도록 표현. ( EL표현으로 값을 가져왔다. )

** 코드 번호는 바뀌면 안되기 때문에 readonly 속성을 사용하여 수정 불가능 하게

goodsUpdateAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="DBError.jsp" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%!
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/web_db?useSSL=false";
	String id = "dahoon226";
	String pw = "ekgns00";
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	String query = "update goodinfo set title=?,writer=?,price=? where code=?";
%>

<%
	String code=request.getParameter("code");
	String title=request.getParameter("title");
	String writer=request.getParameter("writer");
	String price = request.getParameter("price");
	try{
		
	Class.forName(driver);
	conn = DriverManager.getConnection(url,id,pw);

	pstmt = conn.prepareStatement(query);
	
	pstmt.setString(4, code);
	pstmt.setString(1, title);
	pstmt.setString(2, writer);
	pstmt.setString(3, price);
	
	int n = pstmt.executeUpdate();
	
	} finally {
		try{
			if(pstmt != null){
				pstmt.close();
			}
			if(conn != null) {
				conn.close();
			}
		} catch(Exception e) {
			System.err.print("CLOSE ERR" +e.getMessage());
		}
	} 
	
	response.sendRedirect("goodsIndex.jsp");
	
%>

크게 달라진 코드는 없다.

위에서 했던 검색 기능을 통하여 검색창 아래 쪽에 데이터 리스트를 뽑아 보자.

데이터를 가져오기 위한 자바 파일(getter,setter) =>DTO

DTO => Data Transfer Object 데이터를 싣고 다니면서 전송해주는 파일 같은말로 VO ( Value Object )

* DAO(Data Access Object)

: 데이터를 건드리는 파일 ( 데이터접속/쿼리문/결과 등등)

package com.jdh.dto;

public class Goods {

private String code=null;

private String title=null;

private String writer=null;

private int price=0;

public Goods() {

}

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getWriter() {

return writer;

}

public void setWriter(String writer) {

this.writer = writer;

}

public int getPrice() {

return price;

}

public void setPrice(int price) {

this.price = price;

}

코드 번호를 입력 받아 데이터베이스 에서 검색을 한다.

기존의 사용했던 액션페이지를 수정할 것이다.

goodsAction.jsp (데이터 처리)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="DBError.jsp" %>
    
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>

<%@ page import="com.jdh.dto.Goods" %>
<%@ page import="java.util.ArrayList" %>
<%!
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/web_db?useSSL=false";
	String id = "dahoon226";
	String pw = "ekgns00";
	
	Connection conn = null;
	Statement stmt = null;
	PreparedStatement pstmt = null;
	
	//이런식으로 2가지 쿼리문을 사용할 수 있다.
	String query = "select * from goodsinfo";
	String query_where = " where code=?";
	
	//데이터를 담을 ArrayList 선언 상단에 필요한 패키지를 임포트 해줘야한다.
	ArrayList<Goods> list = null;
%>

<%
	String searchCode;	

	try{
	Class.forName(driver);
	conn = DriverManager.getConnection(url,id,pw);
	
	pstmt = conn.prepareStatement(query);
	
	ResultSet rs = null;
	//조회 버튼 눌렀을 때
	searchCode = request.getParameter("searchCode"); //파라미터명 code->searchCode로 변경(보기 편하게)
	
	if(searchCode == null) {
		//목록 조회
		stmt=conn.createStatement();
		stmt.executeQuery(query);
	} else {
		//검색 조회
		query = query+query_where;
		pstmt = conn.prepareStatement(query);
		pstmt.setString(1,searchCode);
		//검색된 값을 rs 객체에 넣어놓는다.
		rs = pstmt.executeQuery();
	}
		//rs에 담긴 값을 선언만 해둔 ArrayList에 담아준다.
		list = new ArrayList<Goods>();
		//rs를 만들때마다 변수를 만들어야하기 때문에 그러지않기 위해 변수 생성
		Goods goods = null;
		
		//기존의 if문을 while문으로 변경
		while(rs.next()){
			String code = rs.getString("code");
			String title = rs.getString("title");
			String writer = rs.getString("writer");
			int price = rs.getInt("price");
			
			goods = new Goods();
			goods.setCode(code);
			goods.setTitle(title);
			goods.setWriter(writer);
			goods.setPrice(price);
			//list에 값 추가
			list.add(goods);
		}
		request.setAttribute("GOODS_List",list);
} finally{
	try{
		if(pstmt != null){
			pstmt.close();
		}
		if(conn != null){
			conn.close();
		}
	} catch(Exception e){
		System.err.print("CLOSE ERR"+e.getMessage());
	}
}
	
	RequestDispatcher rd = request.getRequestDispatcher("goodsIndex.jsp");
	rd.forward(request, response);
	
%>

** where => 띄어쓰기 주의!!!

goodsInfo.jsp (가져온 데이터값)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ page import="java.util.ArrayList" %>
<%@ page import="com.jdh.Goods" %>
<%
	ArrayList<Goods> list = (ArrayList<Goods>)request.getAttribute("GOODS List");
	pageContext.setAttribute("goodsList", list);
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<body>
	<h1>GoodsInfoIninForm.jsp</h1>
		<form action="GoodsInfoReader.jsp" method="post">
			<b>상품 코드를 입력해주세요.</b>
			<br />
			상품코드 : <input type="text" required="required" name="code" />
			<input type="submit" value="확인" />
		</form>
	<h3>상품 목록</h3>
	<table>
		<c:forEach var="goods" items="${goodsList }" varStatus="status"> 
			<tr>
				<td>${status.count }</td>
				<td>${goods.getCode() }</td>
				<td>${goods.getTitle() }</td>
				<td>${goods.getWriter() }</td>
				<td>${goods.getPrice() }</td>
			</tr>
		</c:forEach>
	</table>
		

</body>
</html>

forEach태그를 사용하여 게시글 앞에 숫자를 붙였다.(데이터베이스를 구성할때 번호는 따로 만들지 않았기 때문)

goods라는 변수를 만들어서 goodsList에 들어있는 값을 저장하고 status 속성을 통해 데이터 값이 하나 나올때마다 카운트를 센다.

728x90

'Learn > KH정보교육원' 카테고리의 다른 글

[KH정보교육원 당산] 37일차 (로그인, 회원가입 구현) (0)	2021.04.29
[KH정보교육원 당산] 36일차 (어제 했던 예제 MVC-model2방식으로 변경) (0)	2021.04.28
[KH정보교육원 당산] 34일차 (JSTL 실습, Servlet) (0)	2021.04.26
[KH정보교육원 당산] 33일차 (Cookie, Session, JavaBeans, EL , JSTL) (0)	2021.04.23
[KH정보교육원 당산] 32일차 ( forward 예제 풀이, Action Tag) (0)	2021.04.22

현재글[KH정보교육원 당산] 35일차 (검색기능을 통하여 리스트 출력)

Dahoon06 Store