20220819_FRI
- Q.
상품상세보기 페이지에서 장바구니기능을 통해 수량변경과 총 가격이 자동으로 변경되는 기능으 구현하고자 한다. 어떻게 해야할까?- A.
버튼 하나를 클릭할 때 변화하는 기능을 만들려고 하는데 그럴때마다 다른 jsp 페이지를 만들면 복잡하고 불편하다 -> 그래서 바로바로 페이지 내에서 해당 기능을 구현하기 위해 자바스크립트를 사용한다.
: 자바스크립트의 'es6'사용하는데 제이쿼리보다는 사용빈도 높음
자바스크립트에서는 태그가 dom 이다!ex) div태그도 dom 이라 부른다
:빠르긴 하지만 자바스크립트보다 느리다.
변수 선언 방식 달라짐 var -> let, const 두개로 확장 (모두 자료형따로 없다)
- let -> 값이 변하는 변수를 선언할 때
- const -> 값입 변하지 않는 변수를 선언할 때
<script type="text/javascript">
const num = 10;
num = 20;
alert(num);
let num = 10;
num = 20;
alert(num);
</script>
오류발생)const자료형으로 변하는 변수를 선언하면 오류가 발생한다
오류 발견할 때 개발자모드 F12 를 누른다.
일단, 오른쪽 상단 빨간색 '1'표시의 의미는 오류 1개가 있다 라는 뜻이다.
해결) 값이 변하는 변수를 선언하는 let을 사용하면 된다.
<div id='a'>HELLO WORLD</div>
<div class='b'>HELLO WORLD</div>
<div id='c'>
<h3>안녕</h3>
</div>
<script type="text/javascript">
let num = 10;
num = 20;
alert(num);
const a = document.querySelector('#a');
const b = document.querySelector('.b');
const c = document.querySelector('#c > h3');
console.log(a);
</script>
const a = document.querySelector('#a');
css와 같이 아이디를 불러온것과 같다.: '#' + 'id' 와 같다.
const b = document.querySelector('.b');
css와 같이 클래스를 불러온것과 같다.: '.' + 'id' 와 같다.
const c = document.querySelector('#c > h3');
css와 같이 자식태그를 불러온것과 같다.: '#id > 자식태그' 와 같다.
console.log(a);
자바스크립트의 출력문
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1">안녕하세요</div>
<div id="div2">안녕하세요</div>
<input type="text" name="boardNum" value="10">
<script type="text/javascript">
const div1 = document.querySelector('#div1');//1.태그 선택
console.log(div1.id);//div1
console.log(div1.innerText);//내가 선택하 태그 안에 텍스트를 출력//안녕하세요
const div2 = document.querySelector('#div2');//1.태그선택
div2.innerText = 'hello';//내가 선택하 태그 안의 내용을 불러와서 'hello'값으로 대입한다.
const input = document.querySelector('input');//id값이 없어도 input 으로 선택가능하다!
console.log(input.name);//boardNum
console.log(input.type);//text
console.log(input.value);//10
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1">클릭하세요</div>
<script type="text/javascript">
const div1 = document.querySelector('#div1');
//선택한 태그에 이벤트를 걸어 준다.
div1.addEventListener('click',function(){
alert(1);//div 태그(한줄 전체 영역)를 클릭하면 alert창이 뜬다.
});
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="num1" value="num1">
<input type="text" id="num2" value="num2"><br>
<input type="button" value="더하기" id="btn"><br>
<input type="text" id="sum" value="sum">
<script type="text/javascript">
//두 수를 입력 후, 더하기 버튼을 클릭하면 두 수의 합을 구하고 싶다.
//입력하고 더하기 버튼을 클릭했을 때를 구현하려면
//더하기버튼을 클릭했을 때 를 이벤트메소드로 사용가능한데, 항상 클릭하기전에는 태그를 선택해야한다.
//태그선택하려면 id 가 있거나 input 태그 자체로 가져올 수 있다.
//여기는 input 태그가 여러개이기때문에 버튼타입으로 태그선택한다.
const btn = document.querySelector('input[type="button"]');
btn.addEventListener('click',function(){//btn을 'click' 할때마다 'function()' 기능을 적용시킨다.
//무언가를 하려면 무조건 선택을 해야한다!!!
//항상 데이터 가져오려면 무조건 value 값을 가져와야한다!!!!
const num1 = document.querySelector('#num1').value;//선택한 태그의 vlaue값을 가져온다.
const num2 = document.querySelector('#num2').value;
const sum = parseInt(num1) + parseInt(num2);
const result = document.querySelector('#sum');
result.value = sum;
});
</script>
</body>
</html>
실습내용
: 장바구니 수량 변경 / 수량 * 단가 = 총가격 자동 계산 기능 구현
총 가격 변경 시키려면?
- 1.가격정보 가져온다.
- 2.수량정보 가져온다.
- 3.수량과 가격을 곱한다.
- 4.총가격의 값을 바꾼다.
</head>
<body>
<div class="detail-container">
<div class="firstDiv">
<div>Main image
<c:forEach var="itemView" items="${item}">
<c:if test="${itemView.isMain eq 'Y' }">
<img width="300px" height="360px" src="images/${itemView.attachedName}" name="attachedName">
</c:if>
</c:forEach>
</div>
<div><!-- item매퍼에서 상세조회 쿼리를 만든 결과값들 사용하는 것들... -->
<form action="insertCart.ca" method="post">
<input type="hidden" name="itemCode" value="${item[0].itemCode}">
<div>Name :
<!-- item 은 List이다!!! 그래서 그냥 item. 으로 사용불가능! -->
${item[0].itemName}</div>
<div>Price :
<span id="priceSpan">${item[0].itemPrice}</span>
</div>
<div>Stock :
<input type="number" class="my-input" name="putCnt" value="1" min="1">
</div>
<div>Total Price :
<span id="totalPriceSpan">${item[0].itemPrice}</span></div>
<div>
<div class="btnDiv">
<input type="button" class="btn" value="구매하기" >
<input type="submit" class="btn" value="장바구니">
</div>
</div>
</form>
</div>
</div>
<div class="secDiv">
<div>itemComment :</div>
<div>${item[0].itemComment}</div>
</div>
<div class="thdDiv">
<div>Detail.</div>
<div>
<c:forEach var="itemView" items="${item}">
<c:if test="${itemView.isMain eq 'N' }">
<img src="images/${itemView.attachedName}">
</c:if>
</c:forEach>
</div>
</div>
</div>
<script type="text/javascript">
//수량 input 태그 선택
const putCntInput = document.querySelector('input[type="number"]');
//이벤트 추가
//btn을 'change' 값이 바뀔때마다 'function()' 기능을 적용시킨다.
//밑에 세 가지 모두 키보드를 누르고 뗄 때마다 의미함
//keyup
//keypress
//keydown
putCntInput.addEventListener('change',function(){
const priceTag = document.querySelector('#priceSpan').innerText;//선택한 태그의 innerText 가격값을 가져온다.
//alert(priceTag.innerText);
const putCnt = document.querySelector('input[type="number"]').value;
const result = priceTag * putCnt;
document.querySelector('#totalPriceSpan').innerText = result;
});
putCntInput.addEventListener('keyup',function(){
//총가격 변경시키기
//1.가격정보 가져온다.
const priceTag = document.querySelector('#priceSpan').innerText;//선택한 태그의 innerText 가격값을 가져온다.
//alert(priceTag.innerText);
//2.수량정보 가져온다.
const putCnt = document.querySelector('input[type="number"]').value;
//3.수량과 가격을 곱한다.
const result = priceTag * putCnt;
//4.총가격의 값을 바꾼다.
document.querySelector('#totalPriceSpan').innerText = result;
});
</script>
오라클_관계형 데이터베이스
:테이블끼리 어떤 관계
교수 1명이 학생 여러명 가르칠 때
( 1:n 관계)
:교수테이블 1 : N 학생테이블
한국인 1명당 주민번호 1개씩 갖을 때
( 1:1 관계)
:주민등록번호 테이블 1 : 1 한국인 테이블
교수 여러명이 학생 여러명 가르칠 때
( m:n 관계)
:교수테이블 M : N 학생테이블
그래서 우리 쇼핑몰의 상품과 상품이미지를 생각해본다면?
: 상품 1개는 상품이미지를 여러개 갖일 수 있다!
( 1:n 관계)
상품테이블 1 : N 상품이미지
ITemDTO ImgDTO : 하지만 이 둘은 자바에서는 아무런 관계가 없다!!!
-> 그래서 이 두 개의 DTO를 관계를 갖도록 DB로 연결할 것이다
상품테이블 1 : N 상품이미지
class itemDTO{
String tiemNAme;
List imgList;
}
사람(person) 1 : 1 주민(jumin)
class personDTO{
String name;
jumin jumin;// 클래스가 jumin 이며 List가 아닌 1개의 데이터만 갖는 자료형 데이터
}
실습내용 계속..
- 뷰사용 안하고 클래스 자료형을 사용해서 한번에 만든다.
- 장바구니 버튼 클릭하면 해당 상품이 장바구니에 담기고(INSERT)
- CONFIRM으로 '장바구니에 상품이 담겼습니다. 장바구니로 이동하시겠습니까?'띄운다.
- '확인' 클릭하면 장바구니로 이동(jsp/cart/cart_list.jsp)
- '취소' 클릭하면 그냥 아무것도 안한다.
- 장바구니 페이지 구현하기.
- 체크박스/상품이미지/상품명/단가/수량/총 가격/일자 테이블 만들기
- CartDTO 클래스 수정/클래스형 변수 추가 선언하기
public class CartDTO {
private String cartCode;
private String itemCode;
private String memId;
private String putDate;
private int putCnt;
private int totalPrice;
private ItemDTO itemDTO;
private MemberDTO memberDTO;
private ImgDTO imgDTO;
위 실습내용을 바로 구현하기 전,
이해를 돕기위해 예시자료를 들어 만들어 실습한다.
--자격증 테이블
CREATE TABLE CERTI (
CERTI_NUM VARCHAR2(50) PRIMARY KEY
, CERTI_NAME VARCHAR2(50)
, CERTI_DATE VARCHAR2(50)
, JUMIN VARCHAR2(50) REFERENCES TEST_PERSON ( JUMIN ) -- 외래키로 두 개의 테이블 연결된다.
);
--사람 테이블
CREATE TABLE TEST_PERSON (
JUMIN VARCHAR2(50) PRIMARY KEY --1111
, NAME VARCHAR2(50)
, AGE NUMBER
);
-- 경력 테이블
CREATE TABLE TEST_CAREER (
CAREER_NUM VARCHAR2(50) PRIMARY KEY
, COMPANY VARCHAR2(50)
, WORK_DAY VARCHAR2(50)
, JUMIN VARCHAR2(50) REFERENCES TEST_PERSON ( JUMIN ) -- 외래키로 두 개의 테이블 연결된다.
);
INSERT INTO TEST_CAREER VALUES('1','삼성','1년','111');
INSERT INTO TEST_CAREER VALUES('2','애플','5년','123');
INSERT INTO TEST_CAREER VALUES('3','SK','4년','555');
INSERT INTO TEST_CAREER VALUES('4','LG','11년','222');
INSERT INTO TEST_CAREER VALUES('5','하나은행','20년','444');
INSERT INTO TEST_PERSON VALUES('111','김자바',20);
INSERT INTO TEST_PERSON VALUES('123','김지영',7);
INSERT INTO TEST_PERSON VALUES('555','Julia',25);
INSERT INTO TEST_PERSON VALUES('222','Mark',48);
INSERT INTO TEST_PERSON VALUES('444','으아아아',55);
INSERT INTO CERTI VALUES('1','정처기','2020년5월','111');
INSERT INTO CERTI VALUES('2','정처기','2020년6월','111');
INSERT INTO CERTI VALUES('3','정처기','2020년7월','111');
INSERT INTO CERTI VALUES('4','정처기','2020년8월','123');
INSERT INTO CERTI VALUES('5','정처기','2020년11월','123');
INSERT INTO CERTI VALUES('6','정처기','2020년11월','123');
INSERT INTO CERTI VALUES('7','정처기','2020년11월','222');
INSERT INTO CERTI VALUES('8','정처기','2020년11월','444');
SELECT * FROM TEST_PERSON;
SELECT * FROM TEST_CAREER;
SELECT * FROM CERTI;
--사람들의 이름 나이 자격증명 자격증 획득 날짜 조회
select name
, age
,certi_name
, certi_date
from TEST_PERSON,certi
where TEST_PERSON.JUMIN = CERTI.JUMIN;
-- 조인 사용: 사람 - 경력
--사람들의 이름, 나이, 회사명, 경력기간
SELECT NAME
, AGE
, COMPANY
, WORK_DAY
FROM TEST_PERSON, TEST_CAREER
WHERE TEST_PERSON.JUMIN = TEST_CAREER.JUMIN;
프로젝트 내 파일 생성하기
import java.io.IOException;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dto.CareerDTO;
import dto.CertiDTO;
import dto.PersonDTO;
import service.MemberService;
import service.MemberServiceImpl;
@WebServlet("*.te")
public class TestController extends HttpServlet {
private static final long serialVersionUID = 1L;
private MemberService memberService = new MemberServiceImpl();
public TestController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//한글 인코딩 처리
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String requestURI = request.getRequestURI();
String contextPath = request.getContextPath();
String command = requestURI.substring(contextPath.length());
System.out.println("command = " + command);
String page = "";
boolean isRediect = false;
if(command.equals("/list.te")) {
//1번 예제: association
// PersonDTO person = new PersonDTO();
// person.setName("김자바");//PersonDTO [jumin=null, name=김자바, age=0, careerDTO=null]
// //DTO 안의 매개변수 값을 모두 출력
// System.out.println(person.toString());//PersonDTO [jumin=null, name=null, age=0, careerDTO=null]
List list = memberService.selectList();
//for-each문으로 list에서 하나씩 빼내오겠다.
for(PersonDTO e : list) {
System.out.println(e.toString());
}
//출력
// PersonDTO [
// jumin=111
// , name=김자바
// , age=20
// , careerDTO=CareerDTO [
// careerNum=null
// , company=삼성
// , workDay=1년
// , jumin=111]]
// PersonDTO [jumin=123, name=김지영, age=7, careerDTO=CareerDTO [careerNum=null, company=애플, workDay=5년, jumin=123]]
// PersonDTO [jumin=555, name=Julia, age=25, careerDTO=CareerDTO [careerNum=null, company=SK, workDay=4년, jumin=555]]
// PersonDTO [jumin=222, name=Mark, age=48, careerDTO=CareerDTO [careerNum=null, company=LG, workDay=11년, jumin=222]]
// PersonDTO [jumin=444, name=으아아아, age=55, careerDTO=CareerDTO [careerNum=null, company=하나은행, workDay=20년, jumin=444]]
System.out.println();
//2번 예제: collection
List<PersonDTO> list2 = memberService.selectList2();
for(PersonDTO e : list2) {
System.out.println(e.toString());
}
//출력
//데이터베이스상에서는 여러개(총8개)가 조회되지만
//실제로 자격증들을 가지고있는 건 하나의 주민번호를 가진 총 4명의 사람들이다.
//그래서 출력하면 총 4명의 각각의 사람만 나온다.
//PersonDTO의 변수들 그대로 출력이 된다.
// public class PersonDTO {
// private String jumin;
// private String name;
// private int age;
// private CareerDTO careerDTO;
// private List certiList;
//사람 - 자격증 의 정보를 출력하는데 사람-자격증-경력 정보까지 없는 사람은 경력정보 출력 x(null)
// PersonDTO [jumin=111, name=김자바, age=20, careerDTO=CareerDTO [careerNum=null, company=null, workDay=null, jumin=111], certiList=[CartDTO [certiNum=null, certiName=정처기, certiDate=2020년5월, jumin=111], CartDTO [certiNum=null, certiName=정처기, certiDate=2020년6월, jumin=111], CartDTO [certiNum=null, certiName=정처기, certiDate=2020년7월, jumin=111]]]
// PersonDTO [jumin=123, name=김지영, age=7, careerDTO=CareerDTO [careerNum=null, company=null, workDay=null, jumin=123], certiList=[CartDTO [certiNum=null, certiName=정처기, certiDate=2020년8월, jumin=123], CartDTO [certiNum=null, certiName=정처기, certiDate=2020년11월, jumin=123], CartDTO [certiNum=null, certiName=정처기, certiDate=2020년11월, jumin=123]]]
// PersonDTO [jumin=222, name=Mark, age=48, careerDTO=CareerDTO [careerNum=null, company=null, workDay=null, jumin=222], certiList=[CartDTO [certiNum=null, certiName=정처기, certiDate=2020년11월, jumin=222]]]
// PersonDTO [jumin=444, name=으아아아, age=55, careerDTO=CareerDTO [careerNum=null, company=null, workDay=null, jumin=444], certiList=[CartDTO [certiNum=null, certiName=정처기, certiDate=2020년11월, jumin=444]]]
page="list.jsp";
}
else if(command.equals("/.te")) {
page=".jsp";
}
if(isRediect) {
response.sendRedirect(page);
}
else {
RequestDispatcher dispatcher = request.getRequestDispatcher(page);
dispatcher.forward(request, response);
}
}
}
-멤버 서비스
package service;
import java.util.List;
import dto.MemberDTO;
import dto.PersonDTO;
public interface MemberService {
//회원가입
void insertMember(MemberDTO memberDTO);
//로그인
MemberDTO login(MemberDTO memberDTO);
//테스트쿼리(목록조회)
List<PersonDTO> selectList();
//테스트쿼리2
List<PersonDTO> selectList2();
}
-멤버서비스impl
package service;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import dto.MemberDTO;
import dto.PersonDTO;
import sqlmap.SqlSessionManager;
public class MemberServiceImpl implements MemberService{
//쿼리 실행하는 객체
SqlSessionFactory sqlSessionFactory = SqlSessionManager.getSqlSession();
SqlSession sqlSession = sqlSessionFactory.openSession();
@Override
public void insertMember(MemberDTO memberDTO) {
sqlSession.insert("memberMapper.insertMember", memberDTO);
sqlSession.commit();
}
@Override
public MemberDTO login(MemberDTO memberDTO) {
MemberDTO result = sqlSession.selectOne("memberMapper.login", memberDTO);
sqlSession.commit();
return result;
}
@Override
public List<PersonDTO> selectList() {
List<PersonDTO> list = sqlSession.selectList("testMapper.selectList");
sqlSession.commit();
return list;
}
@Override
public List<PersonDTO> selectList2() {
List<PersonDTO> list = sqlSession.selectList("testMapper.selectList2");
sqlSession.commit();
return list;
}
}
-test-mapper
<?xml version="1.0" encoding="UTF-8"?>
INSERT INTO (
) VALUES (
)
SELECT NAME
, AGE
, COMPANY
, WORK_DAY
, TEST_PERSON.JUMIN
FROM TEST_PERSON, TEST_CAREER
WHERE TEST_PERSON.JUMIN = TEST_CAREER.JUMIN
SELECT NAME
, AGE
, CERTI_NAME
, CERTI_DATE
, TEST_PERSON.JUMIN
FROM TEST_PERSON,CERTI
WHERE TEST_PERSON.JUMIN = CERTI.JUMIN
- personDTO
package dto;
import java.util.List;
public class PersonDTO {
private String jumin;
private String name;
private int age;
private CareerDTO careerDTO;
private List certiList;//사람 한 명에 자격증은 여러개 > 리스트로 담는다
public List<CertiDTO> getCertiList() {
return certiList;
}
public void setCertiList(List<CertiDTO> certiList) {
this.certiList = certiList;
}
public CareerDTO getCareerDTO() {
return careerDTO;
}
public void setCareerDTO(CareerDTO careerDTO) {
this.careerDTO = careerDTO;
}
public String getJumin() {
return jumin;
}
public void setJumin(String jumin) {
this.jumin = jumin;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
//컨트롤러에서 출력문으로 어떤 매개변수값이 출력되는지 확인용으로 사용하기위해
@Override
public String toString() {
return "PersonDTO [jumin=" + jumin + ", name=" + name + ", age=" + age + ", careerDTO=" + careerDTO
+ ", certiList=" + certiList + "]";
}
}
public class CareerDTO {
private String careerNum;
private String company;
private String workDay;
private String jumin;
private PersonDTO personDTO;
public PersonDTO getPersonDTO() {
return personDTO;
}
public void setPersonDTO(PersonDTO personDTO) {
this.personDTO = personDTO;
}
public String getCareerNum() {
return careerNum;
}
public void setCareerNum(String careerNum) {
this.careerNum = careerNum;
}
public String getcompany() {
return company;
}
public void setcompany(String company) {
this.company = company;
}
public String getWorkDay() {
return workDay;
}
public void setWorkDay(String workDay) {
this.workDay = workDay;
}
public String getJumin() {
return jumin;
}
public void setJumin(String jumin) {
this.jumin = jumin;
}
//컨트롤러에서 출력문으로 어떤 매개변수값이 출력되는지 확인용으로 사용하기위해
@Override
public String toString() {
return "CareerDTO [careerNum=" + careerNum + ", company=" + company + ", workDay=" + workDay + ", jumin="
+ jumin + "]";
}
}
package dto;
public class CertiDTO {
private String certiNum;
private String certiName;
private String certiDate;
private String jumin;
public String getCertiNum() {
return certiNum;
}
public void setCertiNum(String certiNum) {
this.certiNum = certiNum;
}
public String getCertiName() {
return certiName;
}
public void setCertiName(String certiName) {
this.certiName = certiName;
}
public String getCertiDate() {
return certiDate;
}
public void setCertiDate(String certiDate) {
this.certiDate = certiDate;
}
public String getJumin() {
return jumin;
}
public void setJumin(String jumin) {
this.jumin = jumin;
}
@Override
public String toString() {
return "CartDTO [certiNum=" + certiNum + ", certiName=" + certiName + ", certiDate=" + certiDate + ", jumin="
+ jumin + "]";
}
}
ㄹㅇ 하나도 모르겠음