JSP 파일 업로드를 통한 쇼핑몰 만들어보기 [중요]

쇼핑몰을 위해서 필요한 JSP와 서블릿, js파일, DAO, VO 가 필요합니다.

1. 다음과 같은 product라는 테이블에 데이터를 넣어줍니다.

1. productVO 클래스 만들기

2.DBManager 클래스를 만들어서 자주 쓰는 코드들 모아놓기

이제 전체 css를 만들어주겠습니다

css폴더 안에 css 파일 만들어줍니다.

---

이제 productDAO안에 selectAllproducts() 메서드를 작성해야 합니다.

product들은 객체 형태로 몇 개가 들어올지는 모르겠지만, 컬렉션 중에서 List 컬렉션 클래스를 통해서 

list (데이터베이스에서 가져온 데이터를 담을 변수)를 만들고 칼럼에 맞춰서 데이터를 집어넣는다

 sql = 최근 등록한 상품을 먼저 출력하기 위해서 order by 절을 추가하여 code 칼럼을 기준으로 내림차순으로 정렬

list = 상품 정보를 한 개 이상 저장하기 위해서 ArrayList 클래스로 객체 생성

conn =DBManager.getConnection() >> 쿼리문을 시작하기 전에 커넥션 객체를 얻어오기 위해서 DBManager클래스의 정적 메서드인 getConnection()을 호출합니다. ResultSet 객체는 여러 개의 상품 정보를 저장하고 있기 때문에 반복문을 돌면서 ResultSet 객체인 rs의 next()를 호출하여 행 단위로 이동하면서 상품 테이블에 접근합니다.

이제 고객이 웹에서 버튼 또는 링크를 클릭하면 상품 리스트로 넘어갈 수 있도록 서블릿을 만들어 줘야 합니다

버튼 클릭 >> 웹에서 요청 >> 서블릿에서 안내 >> jsp(view)를 보여줌 

다음과 같은 단계로 움직이게 됩니다.

그래서 이제 서블릿을 만들어 보도록 하겠습니다.

doGet 방식으로 DAO 객체 pDao를 통해서 테이블 정보를 받은걸 productList에 넣어주고

ProductList는 이제 화면에 보일 준비를 해야 하기 때문에 request.setAttribute를 통해서 넣어준다.

하지만 객체 상태로 넘어가기 때문에 인지하고 있어야 한다.

JSTL에서 제공하는 <c:foreach>를 사용하여 상품 리스트를 출력해야 하는데 <c:forEach>에 대해 한 번 더

복습하고 가는 걸 추천합니다.

forEach 구문에서 items(배열)에서 var = " abc "라는 abc에 하나하나 넣어주는데

그걸 출력하고 싶으면 ${abc.code}, ${abc.name} 등등으로 불러올 수 있다.

---

 

위에 사진에서 상품 등록을 누르면 상품 등록 페이지로 넘어가야 하기 때문에 이를 위한 서블릿을 만듭니다.

링크를 클릭하면 get 방식으로 요청이 일어나는 것이기 때문에 doGet메서드에 상품 등록 화면으로 이동하도록 합니다

productWirte.do라는 요청을 받으면 상품 등록 화면을 표시하기 위한 서블릿을 만들어보겠습니다.

이제 상품 등록 화면을 위한 jsp 페이지를 만들어 보겠습니다.

productWirte.do를 요청받으면 상품등록- 관리자 페이지로 보낸다.

밑에 보면 버튼이 3개가 있습니다.

등록 - submit >> 클릭하는 순간 form 태그가 정의한 액션 속성으로 페이지 이동하는 걸로 배워왔습니다.

하지만 여기엔 액션 속성이 없는데 페이지 이동이 일어난다??  >>

이런 경우에는 현재 url을 액션 속성의 기본값으로 넣은 것과 똑같다.

해당 페이지를 요청할 때와 동일한 방식으로 요청됩니다.

즉 >> 등록 버튼을 누르면 productWrite.do 를 다시 요청하면서 //  method = "post" 방식이기 때문에 

ProductWriteServlet의 doPost() 메소드가 적용된다.

하지만 등록을 해주고 싶어도 이 서블릿이 DAO  객체는 불러올수 있지만, 지금 현재 있는 메서드는 

모든 상품 조회하는 메서드 밖에 없으니 insert 메서드를 만들어줘야 한다.

---

productDAO 클래스에 상품 등록을 위한 메서드 추가하기

60번 줄 - productWrite.jsp의 입력 폼에서 입력받은 값을 ProductWriteServlet의 doPost() 메서드에서 얻어와 이를 

ProductVO 객체의 필드에 채워 넣은 다음 이를 ProductDAO 객체의 insertProduct() 메서드에 전달해 줍니다.

productDAO 객체에서 상품명만 얻어오기 위해서 getName() 메서드를 호출합니다.

이렇게 얻은 상품명을 첫 번째 바인딩 변수(?)에 채워 넣습니다.

---

productDAO 클래스에 상품 등록을 위한 insertProduct() 메서드를 추가하였으면 이제 상품 정보를 

데이터베이스에 저장하는 작업을 위해서 ProductWriteServlet클래스의 doPost() 메서드에 다음과 같은 코드를 추가합니다

---

상품 수정하기

상품 수정을 클릭하면 ProductUpdate.do 가 요청되어 상품 수정 페이지로 이동해야하기 때문에

이런 요청을 처리할 서블릿 클래스를 만듭니다.

링크를 클릭하면 get 방식으로 요청이 일어나기 때문에 doGet 메서드에 상품 수정 화면으로 이동하도록 합니다.

//현재 상품 수정 누르면 url 이 다음과같이 나오고? code = 26이라고 나와서  코드번호에 맞게 테이블 정보가 나오게

해야 한다. 그렇기 때문에 수정 화면에서는 이전에 입력되었던 상품정보가 출력되어야 하기 때문에 현재 선택된

상품의 정보를 데이터 베이스에서 찾아오기 위해서 상품 코드 값을 매개변수 값으로 넘겨줍니다.

productUpdate.jsp 페이지를 출력하기 위한 productUpdateServlet 서블릿 클래스에 doGet 메서드에

데이터베이스에 상품 정보를 얻어오는 작업을 하기 위해서

DAO 클래스에 메서드를 만들고, 서블릿에서는 그 메소드를 사용해야 합니다.

82 - productUpdate.do를 요청하면서 전달한 상품 코드값을 ProductDAO 객체의 selectProductByCode() 메서드에

전달해줍니다. 전달된 값은 매개 변수 code로 받아옵니다. 이렇게 받아온 상품 코드를 바인딩 변수 (?)에 채워 넣습니다.

83 - 82번째 줄의 sql 문의 1개의 바인딩 변수 값을  채운 후 PreparedStatement 객체의 excuteQuery() 메서드를 호출하여 

select 문을 실행시켜 데이터베이스의 상품 정보를  resultSet 객체로 얻어옵니다.

---

productDAO 클래스에 상품 정보를 얻어오기 위한 selectProductByCode () 메서드를 추가하였으면

이렇게 얻어온 상품 정보를 화면에 출력하는 doGet 메소드 작성하러 ㄱㄱ

pVo 객체는 상품 코드를 ProductDAO의 selectProductByCode() 메서드의 매개변수로 넘겨주어 상품 정보를 얻어옵니다.

---

다음은 상품 수정 화면을 위한 jsp 페이지입니다.

 

16 -  productUpdateServlet의 request.setAttribute("product", pVo) 데이터베이스에서 얻어온 상품 정보를

request의 속성 값으로 저장해두었습니다. 속성 이름은 product 였으므로 ${product.code}로 상품 코드를 

얻어 올 수 있습니다. 상품 코드는 화면에 출력할 용도가 아닌 수정할 상품 정보를 입력한 후 상품을 수정할 때

어떤 상품을 수정할지를 위한 검색 조건에 사용할 것이기 때문에 hidden 태그에 출력합니다.

 17-상품 이미지는 file 태그에서 선택할 것인데, 혹시 상품 이미지를 수정하지 않을 경우

이전에 등록된 상품 이미지로 업데이트해야 하기  때문에 데이터베이스에서 얻어온 상품 이미지를

hidden 태그에서 실어서 상품을 수정할 때 사용할 것입니다.

21~24 - 상품 정보를 등록하면서 이미지 파일을 선택하지 않았다면 noimage.gif를 화면에 출력합니다.

이번에는 업로드된 파일명(문자열 형태)을 데이터베이스에 저장해 놓고 이 파일명으로 이미지를

가져와 <img> 태그의 src 속성에 지정하여 화면에 이미지를 출력합니다.

---

이제 상품 수정을 위해 서블릿을 작성해 보도록 하겠습니다 

(프런트 쪽 >> 서버에 정보를 입력 후 서버>> 데이터베이스로 보내줘야 한다.)

45 - MultipartRequest 객체를 생성합니다. 생성된 순간 서버로 파일이 업로드됩니다.

51~55 MultipartRequest 객체의 getparameter 메서드를 사용해서 폼에서 입력한 코드, 상품명, 가격, 이미지, 상품 설명

을 얻어옵니다.

63 - 데이터 베이스 처리를 위한 ProductDAO의 insertProduct() 메서드는 상품 정보를 productVO 객체 단위로

전달해주기 때문에 상품 정보를 저장할  ProductVO 객체를 생성합니다.

---

상품 정보 수정을 위한 ProductDAO 클래스에 updateProduct메서드 추가하기

---

이제 상품 삭제 기능을 구현해보겠습니다.

상품 삭제 링크 클릭 >> 상품 삭제 화면으로 이동합니다.

상품 삭제를 클릭하면 바로 상품 정보가 삭제되는 것이 아니고, 이전에 등록했던 상품 정보를 확인한 후에

삭제하기  때문에 상품 삭제 화면으로 이동하도록 합니다.

이를 위해 상품 삭제를 위한 서블릿을 만들어 보도록 하겠습니다.

 

상품 수정과 유사하므로 자세한 설명은 생략

---

상품 삭제 화면을 위한 jsp 페이지

---

DAO