chap 11 - Ajax 상품정보 - 제품등록(JQuery다운 파일 사용),파일첨부(cos.jar)
오늘은 상품페이지에서 해당 상품을 클릭하면 상세페이지가 나오도록 할것이다.
먼저 오라클에서 테이블을 만든다.
jsp_product 테이블의 pname(상품이름)을 참조한다.
category 테이블을 만들때 남겨두었던 것이다. 오늘 추가해 주었다.
먼저 홈페이지 메뉴에 제품등록 이라고 하나 만든다.
[ header.jsp ]
일반 회원일땐 위에처럼 제품등록이 보이지 않는다.
관리자 계정인 admin 으로 로그인 했을시 제품등록이 보여진다.
제품등록 페이지까지 잘 나오는지 확인 하였다.
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue
jqueryui.com
위에처럼 jQuery 를 사용하면 익스플로러, 크롬, 엣지 등 상관없이 모양이 모두 똑같이 나온다.
즉, 호환성 때문에 사용하는 것이다.
테마를 눌러보면
여러가지를 다운로드 받아서 사용할수가 있다.
현재는 교수님이 주신 파일을 사용한다.
테마를 사용하기 위해서는
동일한 파일이 꼭 존재 하여야 한다.!!
MyMVC 에도 파일을 넣어준다.
현재 우리는 header.jsp 부분에 jQuery 를 사용하게 bootstrap 과 같이 정의되어 있다.
[ productRegister.jsp ] - 참조!! 교수님 파일 받아온 것이다.
위와 같이 화면이 나온다.
위에 있는 필수입력 이라는 붉은 글씨가 보이지 안도록 해준다.
위와 같이 필수입력 이라는 붉은 글씨가 보이지 않는다.
[ productRegister.jsp ]
위와 같이 select 에 option 을 줄때 넘겨준 값이 super.getCategoryList(request); 인데
super.getCategoryList(request); 를 까보면 DAO 안에 HashMap 으로 code, 와 cname 을 담아두었다.
즉, 부모클래스에 담아놓은 걸 불러와서 그안의 값들을 option 태그에 넣어준 것이다.
그러하면 테이블에 code 와 cname 이 추가 된다 하더라도 값을 일일이 다시 option 에 적어줄 필요가 없다.
파일을 업로드 할때는 항상!! method 는 POST 타입 이어야 하며 enctype 를 꼭 해주어야 한다.
위와같이 제품수량은 spinner 로 사용 할것이다.
spinner 을 사용하려면 위에서 설명한것과 같이 css 를 추가해주어야 한다.
[ header.jsp ]
이렇게 link 와 script 를 추가해주어야 한다.
위에서 주의해야 할점은 bootstrap 과 JQuery Ui 를 사용할땐 항상 jquerylibery script 가 항상!!! 먼저 와야한다.
[ productRegister.jsp ]
위와 같이 나온다.
또한 크롬 뿐만 아니라 엣지에서도 변동없이 똑같은 형태로 나온다.
현재 위에 제품수량을 사용해 보면 - 즉, 음수와 0 이 나온다. 음수와 0 을 막아주어야 한다.
위의 제품스펙에 Ajax로 option 등록하기.
파일갯수 에도 spinner 를 사용하겠다.
여기서!!! 파일갯수가 2개이면 [파일첨부] 를 2개 나타내어 주겠다.
유효성 검사 하기.
정상적으로 모두 작성 하였다면 submit(); 이 되는데
submit(): 경로는 자기 자신을 말한다.
즉, 제품등록을 누르면(정상적으로 모두 작성했다는 전제하에) productRegister.up 으로 POST 방식으로 넘어간다.
여기서 확인용으로 하나의 name 값을 getParameter 로 찍어 보았더니 null 값이 나왔다.
request.getParameter 로 받아올수가 없다.
라이브러리가 하나 필요하다.!!!!!
왜냐 파일첨부를 하게 되면 필요한 것이다.
cos.jar
위에 주소가 실제로 저장 되어지는 곳이다.
주의해야 할점은 Path: 에 있는 주소로 실제로 저장되어지는 것이지
Location: 에 있는 주소로 저장되어지는 것이 아니다.!!!!
IOException 파일을 올리고 다운받을때 Exception 이 유발될수 있다 라는 말이다.
ex) 파일을 올릴때 주소를 잘못 입력했을시.
ex) 용량을 넘어선 파일을 올릴때.
추후 스프링을 사용할때는 클레스로 사용한다. 즉, cos.jar 사용안한다.
나머지 코딩 참조하여 이해하기!!