| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 이클립스
- 맥
- crud
- 생활코딩
- pyqt
- Oracle
- jsp
- Error
- nodejs
- ddit
- spring
- Mac
- Java
- 자바
- FastAPI
- python
- Homebrew
- API
- 대덕인재개발원
- html
- 컬렉션프레임워크
- JDBC
- 객체지향
- 배열
- servlet
- 자바문제
- ibatis
- Android
- 반복문
- 단축키
Archives
- Today
- Total
romworld
Spring 09 - LPROD 테이블을 이용한 CRUD 본문
LPROD 테이블 만들기
<sql developer에서 생성해준다.>
- create table
CREATE TABLE LPROD(
LPROD_ID NUMBER(7) NOT NULL,
LPROD_GU CHAR(4) NOT NULL,
LPROD_NM VARCHAR2(40) NOT NULL,
CONSTRAINT PK_LPROD PRIMARY KEY (LPROD_GU)
);- 데이터 넣기
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (1,'P101','컴퓨터제품');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (2,'P102','전자제품');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (3,'P201','여성캐주얼');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (4,'P202','남성캐주얼');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (5,'P301','피혁잡화');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (6,'P302','화장품');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (7,'P401','음반/CD');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (8,'P402','도서');
Insert into LPROD (LPROD_ID,LPROD_GU,LPROD_NM) values (9,'P403','문구류');
commit;
<lprod_SQL.xml>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : xml 파일이 여러개일 수 있으므로
이를 구별하기 위한 식별 용도로 사용 -->
<mapper namespace="lprod">
<select id="list" resultType="lprodVO">
SELECT LPROD_ID, LPROD_GU, LPROD_NM
FROM LPROD
ORDER BY LPROD_GU
</select>
</mapper>
<LprodVO.java>
package kr.or.ddit.vo;
public class LprodVO {
private int lprodId;
private String lprodGu;
private String lprodNm;
public LprodVO() {
}
public LprodVO(int lprodId) {
this.lprodId = lprodId;
}
public int getLprodId() {
return lprodId;
}
public void setLprodId(int lprodId) {
this.lprodId = lprodId;
}
public String getLprodGu() {
return lprodGu;
}
public void setLprodGu(String lprodGu) {
this.lprodGu = lprodGu;
}
public String getLprodNm() {
return lprodNm;
}
public void setLprodNm(String lprodNm) {
this.lprodNm = lprodNm;
}
@Override
public String toString() {
return "LprodVO [lprodId=" + lprodId + ", lprodGu=" + lprodGu + ", lprodNm=" + lprodNm + "]";
}
}
<mybatisAlias.xml>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!--
[마이바티스] 스프링에서 "_"를 사용한 컬럼명을 사용 시(BOOK 테이블의 BOOK_ID)
카멜케이스로 읽어줌(bookId)
ex) 테이블 컬럼명이 member_id인 경우 jsp화면단에서 이 값을 사용 시 memberId로 사용
-->
<settings>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<!-- 자주 사용하는 타입의 별칭을 세팅 -->
<typeAliases>
<typeAlias type="kr.or.ddit.vo.BookVO" alias="bookVO" />
<typeAlias type="kr.or.ddit.vo.LprodVO" alias="LprodVO" />
</typeAliases>
</configuration>
<LprodDao.java>
package kr.or.ddit.dao;
import java.lang.reflect.Parameter;
import java.util.List;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import kr.or.ddit.vo.BookVO;
import kr.or.ddit.vo.LprodVO;
import lombok.extern.slf4j.Slf4j;
/*
매퍼XML(book_SQL.xml)을 실행시키는 DAO(Data Access Object) 클래스
Repository 어노테이션 : 데이터에 접근하는 클래스
=> 스프링이 데이터를 관리하는 클래스라고 인지하여 자바빈 객체로 등록하여 관리함
*/
@Slf4j
@Repository
public class LprodDao {
@Autowired
SqlSessionTemplate sqlSessionTemplate;
public List<LprodVO> list(){
return this.sqlSessionTemplate.selectList("lprod.list");
}
}
<LprodServiceImpl.java>
package kr.or.ddit.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import kr.or.ddit.dao.BookDao;
import kr.or.ddit.dao.LprodDao;
import kr.or.ddit.service.BookService;
import kr.or.ddit.vo.BookVO;
import kr.or.ddit.vo.LprodVO;
// 서비스 클래스 : 비즈니스 로직
// 스프링 MVC 구조에서 Controller와 DAO를 연결하는 역할
/*
스프링 프레임워크(디자인패턴 + 라이브러리)는 직접 클래스를 생성하는 것을 지양(싫음)하고,
인터페이스를 통해 접근하는 것을 권장하고 있기 때문에(확장성)
프링이는 인터페이스를 좋아해 ..
그래서 서비스 레이어는 인터페이스(BookService)와 클래스(BookServiceImpl)를 함께 사용함
Impl : implement의 약자
*/
// Service 어노테이션 : "프링아 이 클래스는 서비스 클래스야" 라고 알려줌.
// 프링이가 자바빈으로 등록해줌
@Service
public class LprodServiceImpl implements LprodService {
@Autowired
LprodDao lprodDao;
public List<LprodVO> list(){
return this.lprodDao.list();
}
}
<LprodService.java>
package kr.or.ddit.service;
import java.util.List;
import kr.or.ddit.vo.LprodVO;
public interface LprodService {
public List<LprodVO> list();
}
<LprodController.java>
package kr.or.ddit.controller;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import kr.or.ddit.service.BookService;
import kr.or.ddit.service.LprodService;
import kr.or.ddit.vo.BookVO;
import kr.or.ddit.vo.LprodVO;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.dbcp2.BasicDataSource;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.SqlSessionTemplate;
/* Controller 어노테이션
스프링 프레임워크에게 "이 클래스는 웹 브라우저(클라이언트)의 요청(request)을
받아들이는 컨트롤러야" 라고 알려주는 것임.
스프링은 servlet-context.xml의 context:component-scan의 설정에 의해
이 클래스를 자바빈 캑체로 미리 등록 (메모리에 바인딩)
*/
// slf4j를 쓰면 lombok을 쓸 수 있다.
@RequestMapping("/lprod")
@Slf4j
@Controller
public class LprodController {
@Autowired
LprodService lprodService;
@RequestMapping(value="/list",method=RequestMethod.GET)
public ModelAndView list(ModelAndView mav) {
List<LprodVO> lprodVOList = this.lprodService.list();
// data
mav.addObject("data", lprodVOList);
// jsp 경로
// tiles-config.xml의
// */*은 lprod/list와 {1}/{2}.jsp에 의해 lprod/list.jsp가 forwarding됨
mav.setViewName("lprod/list");
return mav;
}
}
<list.jsp>
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
${data}
데이터를 넣어보면 잘 출력이 된다.
우선 테이블 설명 달아준다.
목록 표로 보이게 만들기, 버튼 만들기
<list.jsp>
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Tables</h1>
<p class="mb-4">
DataTables is a third party plugin that is used to generate the demo
table below. For more information about DataTables, please visit the <a
target="_blank" href="https://datatables.net">official DataTables
documentation</a>.
</p>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="dataTables_length" id="dataTable_length">
<label>Show <select name="dataTable_length"
aria-controls="dataTable"
class="custom-select custom-select-sm form-control form-control-sm"><option
value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option></select> entries
</label>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div id="dataTable_filter" class="dataTables_filter">
<label>Search:<input type="search"
class="form-control form-control-sm" placeholder=""
aria-controls="dataTable"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered dataTable" id="dataTable"
width="100%" cellspacing="0" role="grid"
aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting sorting_asc" tabindex="0"
aria-controls="dataTable" rowspan="1" colspan="1"
aria-sort="ascending"
aria-label="순번: activate to sort column descending"
style="width: 64.75px;">순번</th>
<th class="sorting" tabindex="0" aria-controls="dataTable"
rowspan="1" colspan="1"
aria-label="상품분류 아이디: activate to sort column ascending"
style="width: 80.6094px;">상품분류 아이디</th>
<th class="sorting" tabindex="0" aria-controls="dataTable"
rowspan="1" colspan="1"
aria-label="상품분류 구분: activate to sort column ascending"
style="width: 55.7969px;">상품분류 구분</th>
<th class="sorting" tabindex="0" aria-controls="dataTable"
rowspan="1" colspan="1"
aria-label="상품분류 명: activate to sort column ascending"
style="width: 30.1719px;">상품분류 명</th>
</tr>
</thead>
<tbody>
<!--
List<LprodVO> lprodVOList
mav.addObject("data", lprodVOList);
viv : 포이치 비브
stat.count : 1부터 시작
stat.index : 0부터 시작
-->
<c:forEach var="lprodVO" items="${data}" varStatus="stat">
<tr
<c:if test="${stat.count%2!=0}">class="odd"</c:if>
<c:if test="${stat.count%2==0}">class="even"</c:if>
>
<td class="sorting_1">${stat.count}</td>
<td>${lprodVO.lprodId}</td>
<td>${lprodVO.lprodGu}</td>
<td>${lprodVO.lprodNm}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5">
<div class="dataTables_info" id="dataTable_info" role="status"
aria-live="polite">Showing 1 to 10 of 57 entries</div>
</div>
<div class="col-sm-12 col-md-7">
<div class="dataTables_paginate paging_simple_numbers"
id="dataTable_paginate">
<ul class="pagination">
<li class="paginate_button page-item previous disabled"
id="dataTable_previous"><a href="#"
aria-controls="dataTable" data-dt-idx="0" tabindex="0"
class="page-link">Previous</a></li>
<li class="paginate_button page-item active"><a href="#"
aria-controls="dataTable" data-dt-idx="1" tabindex="0"
class="page-link">1</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="dataTable" data-dt-idx="2" tabindex="0"
class="page-link">2</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="dataTable" data-dt-idx="3" tabindex="0"
class="page-link">3</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="dataTable" data-dt-idx="4" tabindex="0"
class="page-link">4</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="dataTable" data-dt-idx="5" tabindex="0"
class="page-link">5</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="dataTable" data-dt-idx="6" tabindex="0"
class="page-link">6</a></li>
<li class="paginate_button page-item next" id="dataTable_next"><a
href="#" aria-controls="dataTable" data-dt-idx="7" tabindex="0"
class="page-link">Next</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<!-- 요청URI : /lprod/create
방식 : GET
-->
<a href="/lprod/create" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-flag"></i>
</span>
<span class="text">상품분류 추가</span>
</a>
</div>
</div>
</div>
</div>
</div>
<LprodController.java> 추가
@GetMapping("/create")
/*
요청URI : /lprod/create
방식 : GET
@RequestMapping(value="/create",method=RequestMethod.GET) = @GetMapping("/create")
*/
@GetMapping("/create")
public String create(Model model) {
// 상품 대분류 등록 jsp를 forwarding
//1. 타일즈의 index.jsp 우선 적용
//2. <definition name="*/*" extends="tiles-layout">
// /WEB-INF/views/lprod/create.jsp => tiles의 body로 include됨
return "lprod/create";
}이제 create.jsp를 만들어보자
<create.jsp>
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="container">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<div class="col-lg-7">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">상품분류 추가!</h1>
</div>
<form class="user">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user"
id="lprodId" name="lprodId" placeholder="상품분류 아이디">
</div>
<div class="col-sm-6">
<a href="#" class="btn btn-info btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-info-circle"></i>
</span>
<span class="text">분류코드 자동생성</span>
</a>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user"
id="lprodGu" name="lprodGu" placeholder="상품분류 코드">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-user"
id="lprodNm" name="lprodNm" placeholder="상품분류 명">
</div>
<a href="login.html" class="btn btn-primary btn-user btn-block">
Register Account </a>
<hr>
<a href="/lprod/list" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> 목록보기
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="login.html">Already have an account?
Login!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
상품분류 아이디를 자동 생성해보자
LPROD_ID가 VARCHAR일 경우 TO_NUMBER를 사용해서 숫자로 바꿔준다.
<lprod_SQL.xml>
<!-- 상품분류 자동생성 -->
<select id="getLprodId" resultType="int">
SELECT NVL(MAX(TO_NUMBER(LPROD_ID)),0)+1 FROM LPROD;
</select>
<LprodDao.java>
//상품분류 자동생성
//<select id="getLprodId" resultType="int">
public int getLprodId() {
return this.sqlSessionTemplate.selectOne("lprod.getLprodId");
}
<LprodService.java>
package kr.or.ddit.service;
import java.util.List;
import kr.or.ddit.vo.LprodVO;
public interface LprodService {
// 메소드 시그니처
public List<LprodVO> list();
// 상품분류 자동생성
public int getLprodId();
}
<LprodServiceImpl.java>
package kr.or.ddit.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import kr.or.ddit.dao.BookDao;
import kr.or.ddit.dao.LprodDao;
import kr.or.ddit.service.BookService;
import kr.or.ddit.service.LprodService;
import kr.or.ddit.vo.BookVO;
import kr.or.ddit.vo.LprodVO;
// 서비스 클래스 : 비즈니스 로직
// 스프링 MVC 구조에서 Controller와 DAO를 연결하는 역할
/*
스프링 프레임워크(디자인패턴 + 라이브러리)는 직접 클래스를 생성하는 것을 지양(싫음)하고,
인터페이스를 통해 접근하는 것을 권장하고 있기 때문에(확장성)
프링이는 인터페이스를 좋아해 ..
그래서 서비스 레이어는 인터페이스(BookService)와 클래스(BookServiceImpl)를 함께 사용함
Impl : implement의 약자
*/
// Service 어노테이션 : "프링아 이 클래스는 서비스 클래스야" 라고 알려줌.
// 프링이가 자바빈으로 등록해줌
@Service
public class LprodServiceImpl implements LprodService {
@Autowired
LprodDao lprodDao;
@Override
public List<LprodVO> list(){
return this.lprodDao.list();
}
// 상품분류 자동생성
@Override
public int getLprodId() {
return this.lprodDao.getLprodId();
}
}
<LprodController.java> 추가
/*
요청URI : /lprod/create
방식 : GET
@RequestMapping(value="/create",method=RequestMethod.GET) = @GetMapping("/create")
*/
@GetMapping("/create")
public String create(Model model) {
//상품분류 아이디 자동생성
int lprodId = this.lprodService.getLprodId();
//lprodId 데이터를 model에 담아서 create.jsp로 보내줌
model.addAttribute("lprodId", lprodId);
// 상품 대분류 등록 jsp를 forwarding
//1. 타일즈의 index.jsp 우선 적용
//2. <definition name="*/*" extends="tiles-layout">
// /WEB-INF/views/lprod/create.jsp => tiles의 body로 include됨
//forwarding
return "lprod/create";
}
create.jsp에서 value="${lprodId}" 매핑한다.
그리고 파라미터로 값이 전달되어야 하기 때문에 readonly 속성을 추가해준다.
분류코드 자동생성
<create.jsp>
JQuery를 쓰기 위해 스크립트 추가
AJax 사용해보기
<script>
// document의 요소들이 모두 로딩된 후 실행
$(function(){
$(".btn-icon-split").on("click", function(){
console.log("새롬이");
// 상품분류코드 자동생성
/*
url : 요청경로
contentType : 보내는 데이터의 타입
dataType : 응답 데이터 타입
data : 요청 시 전송할 데이터
type : 요청방식. get,post,put
*/
$.ajax({
url:"/lprod/getLprodGu",
type:"post",
success:function(result){
console.log("result : " + result);
}
});
});
});
</script>
<LprodController.java> 추가
/*
url:"/lprod/getLprodGu",
type:"post",
*/
// @RequestMapping(value="/getLprodGu",method=RequestMethod.Post) = @PostMapping("/getLprodGu")
// 비동기 방식 요청 처리 시 @ResponseBody를 사용함 ->JSON데이터로 변환하여 리턴해줌
@ResponseBody
@PostMapping("/getLprodGu")
public String getLprodGu() {
log.info("getLprodGu이다!");
String lprodGu = "P701";
return lprodGu;
}
JSON 데이터를 바인딩을 위한 의존 라이브러리
- jackson-databind 2.13.3
<pom.xml> 추가
<!-- tiles 끝 -->
<!-- json 데이터 바인딩을 위한 의존 라이브러리 -->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>run as -maven build를 꼭 해주자
<여기서 잠깐 SQL 상식>
--LPROD_GU의 마지막 데이터 +1을 해보자
--P501 -> P502
SELECT SUBSTR(MAX(LPROD_GU),1,1)
|| (SUBSTR(MAX(LPROD_GU),2) + 1)
FROM LPROD;
<lprod_SQL.xml> 추가
<!-- 상품분류코드 자동생성 -->
<select id="getLprodGu" resultType="String">
SELECT SUBSTR(MAX(LPROD_GU),1,1) || (SUBSTR(MAX(LPROD_GU),2) + 1)
FROM LPROD
</select>
<LprodDao.java>
//상품분류코드 자동생성
public String getLprodGu() {
return this.sqlSessionTemplate.selectOne("lprod.getLprodGu");
}<LprodService.java>
// 상품분류코드 자동생성
public String getLprodGu();
<LprodServiceImpl.java>
// 상품분류코드 자동생성
@Override
public String getLprodGu() {
return this.lprodDao.getLprodGu();
}
<LprodController.java>
/*
url:"/lprod/getLprodGu",
type:"post",
*/
// @RequestMapping(value="/getLprodGu",method=RequestMethod.Post) = @PostMapping("/getLprodGu")
// 비동기 방식 요청 처리 시 @ResponseBody를 사용함 ->JSON데이터로 변환하여 리턴해줌
@ResponseBody
@PostMapping("/getLprodGu")
public String getLprodGu() {
log.info("getLprodGu이다!");
// 비즈니스(기능,service) 로직
String lprodGu = this.lprodService.getLprodGu();
log.info("lprodGu : " +lprodGu);
return lprodGu;
}
<create.jsp>
- 스트립트 수정
- 분류코드 자동생성을 눌렀을 때 분류코드 input에 자동 입력되게 ..
- $("input[name='lprodGu']").val()로 접근함.
<script>
// document의 요소들이 모두 로딩된 후 실행
$(function(){
$(".btn-icon-split").on("click", function(){
console.log("새롬이");
// 상품분류코드 자동생성
/*
url : 요청경로
contentType : 보내는 데이터의 타입
dataType : 응답 데이터 타입
data : 요청 시 전송할 데이터
type : 요청방식. get,post,put
*/
$.ajax({
url:"/lprod/getLprodGu",
type:"post",
success:function(result){
//console.log("result : " + result);
$("input[name='lprodGu']").val(result);
}
});
});
});
등록을 눌렀을 때 전송하기
<create.jsp>에서 script를 추가해준다.
$("#btnRegist").on("click", function(){
let lprodGu = $("#lprodGu").val();
let lprodNm = $("#lprodNm").val();
if(jQuery.trim(lprodGu)==""){
alert("상품분류코드를 작성해주세요");
$("#lprodGu").focus();
return false;
}
if(jQuery.trim(lprodNm)==""){
$("#lprodNm").focus();
alert("상품분류명을 작성해주세요");
}
// submit을 실행
//$("#frm").submit();도 가능
/*
요청URI : /lprod/createPost
요청파라미터 : {"lprodId:"10","lprodGu:"P404""lprodNm:"간식류"}
요청방식 : post
*/
$("form").submit();
});<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="/resources/js/jquery-3.6.0.js"></script>
<script>
// document의 요소들이 모두 로딩된 후 실행
$(function(){
$(".btn-icon-split").on("click", function(){
console.log("새롬이");
// 상품분류코드 자동생성
/*
url : 요청경로
contentType : 보내는 데이터의 타입
dataType : 응답 데이터 타입
data : 요청 시 전송할 데이터
type : 요청방식. get,post,put
*/
$.ajax({
url:"/lprod/getLprodGu",
type:"post",
success:function(result){
//console.log("result : " + result);
$("input[name='lprodGu']").val(result);
}
});
});
$("#btnRegist").on("click", function(){
let lprodGu = $("#lprodGu").val();
let lprodNm = $("#lprodNm").val();
if(jQuery.trim(lprodGu)==""){
alert("상품분류코드를 작성해주세요");
$("#lprodGu").focus();
return false;
}
if(jQuery.trim(lprodNm)==""){
$("#lprodNm").focus();
alert("상품분류명을 작성해주세요");
}
// submit을 실행
//$("#frm").submit();도 가능
/*
요청URI : /lprod/createPost
요청파라미터 : {"lprodId:"10","lprodGu:"P404""lprodNm:"간식류"}
요청방식 : post
*/
$("form").submit();
});
});
</script>
<div class="container">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<div class="col-lg-7">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">상품분류 추가!</h1>
</div>
<form id="frm" class="user" action="/lprod/createPost"
method="post">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- 변경 제약
disabled : 값이 전달 안됨
readonly : 파라미터로 값이 전달됨 -->
<input type="text" class="form-control form-control-user"
id="lprodId" name="lprodId"
value="${lprodId}"
placeholder="상품분류 아이디"
readonly>
</div>
<div class="col-sm-6">
<a href="#" class="btn btn-info btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-info-circle"></i>
</span>
<span class="text">분류코드 자동생성</span>
</a>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user"
id="lprodGu" name="lprodGu" placeholder="상품분류 코드"
required />
</div>
<div class="form-group">
<input type="text" class="form-control form-control-user"
id="lprodNm" name="lprodNm" placeholder="상품분류 명"
required />
</div>
<a href="#" id="btnRegist" class="btn btn-primary btn-user btn-block">
등록 </a>
<hr>
<a href="/lprod/list" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> 목록보기
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="login.html">Already have an account?
Login!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<LprodController.java>
/*
요청URI : /lprod/createPost
요청파라미터 : {"lprodId:"10","lprodGu:"P404""lprodNm:"간식류"}
요청방식 : post
*/
@PostMapping("/createPost")
public String createPost(@ModelAttribute LprodVO lprodVO) {
log.info("lprodVO :" +lprodVO);
return "lprod/detail?lprodGu="+lprodVO.getLprodGu();
}우선 실행시키면
잘 전송이 되어서 콘솔에 찍힌다.
<lprod_SQL.map> 추가
<!-- 상품분류 정보를 입력 -->
<insert id="createPost" parameterType="lprodVO">
<selectKey order="BEFORE" keyProperty="lprodId" resultType="int">
SELECT NVL(MAX(LPROD_ID),0)+1 FROM LPROD
</selectKey>
INSERT INTO LPROD(LPROD_ID, LPROD_GU, LPROD_NM)
VALUES(#{lprodId},#{lprodGu},#{lprodNm})
</insert>2 번째 방법
<!-- 상품분류 정보를 입력 -->
<insert id="createPost" parameterType="lprodVO">
<selectKey order="BEFORE" keyProperty="lprodId" resultType="int">
SELECT NVL(MAX(LPROD_ID),0)+1 FROM LPROD
</selectKey>
INSERT INTO LPROD(LPROD_ID, LPROD_GU, LPROD_NM)
VALUES(#{lprodId},(SELECT SUBSTR(MAX(LPROD_GU),1,1) || (SUBSTR(MAX(LPROD_GU),2) + 1)
FROM LPROD),#{lprodNm})
</insert><LprodDao.java>
//상품분류 정보 입력
public int createPost(LprodVO lprodVO) {
return this.sqlSessionTemplate.insert("lprod.createPost",lprodVO);
}<LprodService.java>
// 상품분류 정보 입력
public int createPost(LprodVO lprodVO);
<LprodServiceImpl.java>
// 상품분류 정보 입력
@Override
public int createPost(LprodVO lprodVO) {
return this.lprodDao.createPost(lprodVO);
}
<LprodController.java>
/*
요청URI : /lprod/createPost
요청파라미터 : {"lprodId:"10","lprodGu:"P404""lprodNm:"간식류"}
요청방식 : post
*/
@PostMapping("/createPost")
public String createPost(@ModelAttribute LprodVO lprodVO,
Model model) {
log.info("lprodVO :" +lprodVO);
int result = this.lprodService.createPost(lprodVO);
if(result > 0) { //입력 성공
return "redirect:/lprod/detail?lprodGu="+lprodVO.getLprodGu();
}else { // 입력 실패
model.addAttribute("data",lprodVO);
model.addAttribute("lprodId",lprodVO.getLprodId());
return "/lprod/create";
}
}
<create.jsp>에서
상품분류 코드와 상품분류 명의 value를 추가해준다.
controller에서
model.addAttribute("data",lprodVO);
model.addAttribute("lprodId",lprodVO.getLprodId()); << 해줬기 때문에
${data.lprodGu}, ${data.lprodNm}으로 꺼내줄 수 있는 것이다.
detail을 만들자, update delete도
<lprod_SQL.xml>
<!-- 상품분류 상세보기 -->
<select id="detail" parameterType="lprodVO" resultType="lprodVO">
SELECT LPROD_ID, LPROD_GU, LPROD_NM
FROM LPROD
WHERE LPROD_GU = #{lprodGu}
</select>
<LprodDao.java>
//상품분류 상세보기
public LprodVO detail(LprodVO lprodVO) {
//매퍼xml을 호출. sql실행
return this.sqlSessionTemplate.selectOne("lprod.detail",lprodVO);
}
<LprodService.java>
// 상품분류 상세보기
public LprodVO detail(LprodVO lprodVO);
<LprodServiceImpl.java>
// 상품분류 상세보기
@Override
public LprodVO detail(LprodVO lprodVO) {
return this.lprodDao.detail(lprodVO);
}
<LprodController.java>
//요청URI : /lpord/detail?lprodGu=P404
//요청URL : /lprod/detail
//요청파라미터: lprodGu=P404
//요청방식: GET
@GetMapping("/detail")
public String detail(@ModelAttribute LprodVO lprodVO,
Model model) {
log.info("lprodVO : " + lprodVO);
// lprodGu의 값이 P404인 상품분류 정보 1행을 가져오자
lprodVO = this.lprodService.detail(lprodVO);
model.addAttribute("data",lprodVO);
//forwardig
//detail.jsp는 create.jsp를 기본폼으로 하고, data를 받아서 정보를 화면에 출력
return "lprod/detail";
}
<detail.jsp> 생성 - create.jsp를 복붙해서 value에 data.을 추가해주고, readonly 등록버튼을 바꿔준다.,
수정 삭제 버튼 추가해준다.
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="/resources/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//document의 요소들이 모두 로딩된 후 실행
$(function(){
$(".btn-icon-split").on("click",function(){
console.log("개똥이");
//상품분류코드 자동생성
//아작났어유..피씨다타써
/*
url : 요청경로
contentType:보내는 데이터의 타입
dataType:응답 데이터 타입
data : 요청 시 전송할 데이터
type : 요청방식. get, post, put
*/
$.ajax({
url:"/lprod/getLprodGu",
type:"post",
success:function(result){
console.log("result : " + result);
$("input[name='lprodGu']").val(result);
}
});
});
$("#btnRegist").on("click",function(){
let lprodGu = $("#lprodGu").val();
let lprodNm = $("#lprodNm").val();
if(jQuery.trim(lprodGu)==""){
alert("상품분류코드를 작성해주세요");
$("#lprodGu").focus();
return false;
}
if(jQuery.trim(lprodNm)==""){
alert("상품분류명을 작성해주세요");
$("#lprodNm").focus();
return false;
}
//[submit]을 실행
//달러("#frm").submit(function(){alert("등록이 진행됩니다.");});
/*
요청URI : /lprod/createPost
요청파라미터 : {"lprodId":"10","lprodGu":"P404","lprodNm":"간식류"}
요청방식 : post
*/
$("form").submit();
});
//수정버튼 클릭 -> 수정모드로 전환. <button type="button" id="edit"
$("#edit").on("click",function(){
//모드 변경
$("#spn1").css("display","none");
$("#spn2").css("display","block");
//1) 분류코드 자동생성 버튼 활성화
//$(".btn-icon-split").removeAttr("disabled"); 있다는 것만 알아두자 굳이 활성화 할 필요 없당
//2) 입력란 활성화
$(".form-control-user").removeAttr("readonly");
//3) 상품분류 아이디/ 상품분류코드 비활성화
$("#lprodId").attr("readonly","true");
$("#lprodGu").attr("readonly","true");
//4) form의 action속성의 속성값을 updatePost로 변경
$("#frm").attr("action","/lprod/updatePost");
});
//삭제버튼 클릭
$("#delete").on("click", function(){
// form의 action속성의 속성값을 /lprod/deletePost로 변경
$("#frm").attr("action","/lprod/deletePost");
// 삭제여부 재확인
// true(1) / false(0)
let result = confirm("삭제하시겠습니까?");
// submit
if(result>0){ // 삭제 실행
//숙제?
$("#frm").submit();
}else{//삭제 안함
alert("삭제가 취소되었습니다.")
}
});
});
</script>
<div class="container">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<div class="col-lg-7">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
</div>
<form id="frm" class="user" action="/lprod/createPost"
method="post">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- 변경 제약
disabled : 값이 전달 안됨
readonly : 파라미터로 값이 전달됨
-->
<input type="text" class="form-control form-control-user"
id="lprodId" name="lprodId"
value="${data.lprodId}"
placeholder="상품분류 아이디"
readonly>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-info btn-icon-split"
disabled>
<span class="icon text-white-50">
<i class="fas fa-info-circle"></i>
</span>
<span class="text">분류코드 자동생성</span>
</button>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-user"
id="lprodGu" name="lprodGu" placeholder="상품분류 코드"
value="${data.lprodGu}" required readonly />
</div>
<div class="form-group">
<input type="text" class="form-control form-control-user"
id="lprodNm" name="lprodNm" placeholder="상품분류 명"
value="${data.lprodNm}" required readonly />
</div>
<!-- 일반모드 시작 -->
<span id="spn1">
<p>
<button type="button" id="edit"
class="btn btn-warning btn-user btn-block"
style="width:50%;float:left;">
수정
</button>
<button type="button" id="delete"
class="btn btn-danger btn-user btn-block"
style="width:50%;">
삭제
</button>
</p>
</span>
<!-- 일반모드 끝 -->
<!-- 수정모드 시작 -->
<span id="spn2" style="display:none;">
<p>
<button type="submit"
class="btn btn-warning btn-user btn-block"
style="width:50%;float:left;">
확인
</button>
<!-- lprodGu=P404 : 달라{param} -->
<button type="button"
onclick="javascript:location.href='/lprod/detail?lprodGu=${param.lprodGu}'"
class="btn btn-danger btn-user btn-block"
style="width:50%;">
취소
</button>
</p>
</span>
<!-- 수정모드 끝 -->
<hr />
<a href="/lprod/list" class="btn btn-primary btn-user btn-block">
<i class="fab fa-google fa-fw"></i> 목록보기
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="login.html">Already have an account?
Login!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
update
<LprodController.java> 추가
// 상품분류 정보 변경
// 요청 URI : /lprod/updatePost
// 요청 파라미터 : {"lprodId:"10","lprodGu:"P404""lprodNm:"간식류변경"}
// 요청방식 : post
@PostMapping("/updatePost")
public String updatePost(@ModelAttribute LprodVO lprodVO,
Model model) {
log.info("lprodVO : " + lprodVO);
// 정보 변경
int result = 1;
if(result>0) {// 정보 변경 성공
//detail로 되돌아오기
return "redirect:/lprod/detail?lprodGu="+lprodVO.getLprodGu();
}else {// 정보 변경 실패 =>lprodVO가 넘어온 그대로 detail.jsp로 넘겨주자
model.addAttribute("data", lprodVO);
//forwarding
//detail.jsp는 create.jsp를 기본폼으로 하고, data를 받아서 정보를 화면에 출력
return "lprod/detail";
}
}
<lprod_SQL.xml>
<!-- 상품분류 정보변경 -->
<update id="updatePost" parameterType="lprodVO">
UPDATE LPROD
SET LPROD_NM = #{lprodNm}
WHERE LPROD_GU = #{lprodGu}
</update>
<LprodDao.java>
//상품분류 정보변경
public int updatePost(LprodVO lprodVO) {
return this.sqlSessionTemplate.update("lprod.updatePost",lprodVO);
}
<LprodService.java>
// 상품분류 정보변경
public int updatePost(LprodVO lprodVO);
<LprodServiceImpl.java>
//상품분류 정보변경
@Override
public int updatePost(LprodVO lprodVO) {
return this.lprodDao.updatePost(lprodVO);
}
<LprodController.java>
// 상품분류 정보 변경
// 요청 URI : /lprod/updatePost
// 요청 파라미터 : {"lprodId:"10","lprodGu:"P404""lprodNm:"간식류변경"}
// 요청방식 : post
@PostMapping("/updatePost")
public String updatePost(@ModelAttribute LprodVO lprodVO,
Model model) {
log.info("lprodVO : " + lprodVO);
// 정보 변경
int result = this.lprodService.updatePost(lprodVO);
if(result>0) {// 정보 변경 성공
//detail로 되돌아오기
return "redirect:/lprod/detail?lprodGu="+lprodVO.getLprodGu();
}else {// 정보 변경 실패 =>lprodVO가 넘어온 그대로 detail.jsp로 넘겨주자
model.addAttribute("data", lprodVO);
//forwarding
//detail.jsp는 create.jsp를 기본폼으로 하고, data를 받아서 정보를 화면에 출력
return "lprod/detail";
}
}
delete
<detail.jsp>
//삭제버튼 클릭
$("#delete").on("click", function(){
// form의 action속성의 속성값을 /lprod/deletePost로 변경
$("#frm").attr("action","/lprod/deletePost");
// 삭제여부 재확인
// true(1) / false(0)
let result = confirm("삭제하시겠습니까?");
// submit
if(result>0){ // 삭제 실행
$("#frm").submit();
}else{//삭제 안함
alert("삭제가 취소되었습니다.")
}
});<lprod_SQL.xml>
<!-- 상품분류 정보 삭제 -->
<delete id="deletePost" parameterType="lprodVO">
DELETE FROM LPROD
WHERE LPROD_GU = #{lprodGu}
</delete>
<LprodDao.java>
//상품분류 정보삭제
public int deletePost(LprodVO lprodVO) {
return this.sqlSessionTemplate.delete("lprod.deletePost", lprodVO);
}
<LprodService.java>
// 상품분류 정보삭제
public int deletePost(LprodVO lprodVO);
<LprodServiceImpl.java>
//상품분류 정보삭제
@Override
public int deletePost(LprodVO lprodVO) {
return this.lprodDao.deletePost(lprodVO);
}
<LprodController.java>
@PostMapping("/deletePost")
public String deletePost(@ModelAttribute LprodVO lprodVO) {
int result = this.lprodService.deletePost(lprodVO);
if(result > 0) { // 삭제 성공
return "redirect:/lprod/list";
}else {// 삭제 실패
return "redirect:/lprod/detail?lprodGu="+lprodVO.getLprodGu();
}
}forward방식을 써도 된다~~~!
<list.jsp>
a링크를 걸어준다.
'Spring' 카테고리의 다른 글
| Spring 11 - LPROD, ATTACH 테이블 연결 (일대다 관계 ResultMap 사용) + 한글깨짐 해결하기 (0) | 2023.01.30 |
|---|---|
| Spring 10 - LPROD를 이용한 파일 업로드, 썸네일 (0) | 2023.01.27 |
| Spring 08 - 도서 CRUD(7) - 부트스트랩 적용하기, 타일즈(Tiles) (1) | 2023.01.25 |
| Spring 07 - 도서 CRUD(6) - 검색 기능 (0) | 2023.01.25 |
| Spring 06 - 도서 CRUD(5) - delete,select(책목록) PL/SQL문 (0) | 2023.01.25 |
'Spring' Related Articles
more
Comments