#11-4 / ECMA 로 data insert,select

create table movies(
midx int(6) unsigned not null auto_increment,
msubject varchar(100) not null, /*영화 제목*/
cinema set("CGV","MEGA BOX","LOTTE CINEMA") not null, /*등록된 영화관*/
ticketing int(5) not null, /*예매가격*/
screen_date date not null default '0001-01-01', /*상영일자*/
primary key (midx)
);

table 만듬

⚡ ecma로 데이터 등록(영화 정보 등록 페이지 제작) - insert

👀 FRONT-END
- ecma_6.jsp

<body>
	<form id="frm" method="post" action="./ecma6ok.do">
		영화 제목 : <input type="text" name="msubject"><br>
		영화관 :
		<select name="cinema">
			<option value="">영화관 선택</option>
			<option value="CGV">CGV</option>
			<option value="MEGA BOX">메가박스</option>
			<option value="LOTTE CINEMA">롯데시네마</option>
		</select><br>
		예매 가격 : <input type="text" name="ticketing" maxlength="5"><br>
		최초 상영 일자 : <input type="date" name="screen_date"><br><br>
		<input type="button" value="상영관 등록" id="btn"> 
	</form>
</body>

<script type="module">
	import {movieck} from "./ecma_6.js";

	document.querySelector("#btn").addEventListener("click",function(){
		new movieck().input_check();
	});
</script>

- ecma_6.js

export class movieck{
	input_check(){ //사용자가 입력하는 필수값만 검토하는 메소드
		if(frm.msubject.value == ""){
			alert("영화제목을 입력하세요");
			frm.msubject.focus();
		}else if(frm.cinema.value == ""){
			alert("영화관을 선택하세요");
			frm.cinema.focus();
		}else if(frm.ticketing.value == ""){
			alert("예매 금액을 입력하세요");
			frm.ticketing.focus();
		}else{
			this.input_exp();		
		}
	}
	
	input_exp(){ //더 디테일하게 검토 - 주로 정규식 체크
		if(isNaN(frm.ticketing.value) == false){ //숫자
			frm.submit();
		}else{ //숫자 아님
			alert("예매 가격은 숫자만 입력 가능합니다.");
			frm.ticketing.value="";
			frm.ticketing.focus();
		}
	}
}

👀 BACK-END
- api_main.java (Controller) - @PostMapping("/ecma/ecma6ok.do")

@Controller
public class api_main {
	@Autowired
	BasicDataSource dbInfo;
	PrintWriter pw = null;
	
	//void : 다른 페이지로 안 넘길거임
	@PostMapping("/ecma/ecma6ok.do")
	public void ecma6ok(
    			@ModelAttribute("dao") movie_dao dao,HttpServletResponse res
		) throws Exception{
		
        	//module없이 여기다 insert 때림 - 원래 안댐
		res.setContentType("text/html;charset=utf-8");
		this.pw = res.getWriter();
		
		try {
			Connection con = dbInfo.getConnection();
			String sql = "insert into movies values ('0',?,?,?,?)";
			PreparedStatement ps = con.prepareStatement(sql);
			ps.setString(1, dao.getMsubject());
			ps.setString(2, dao.getCinema());
			ps.setInt(3, dao.getTicketing());
			ps.setString(4, dao.getScreen_date());
			ps.executeUpdate();
			this.pw.print("<script>"
					+ "alert('정상적으로 등록 완료되었습니다.');"
					+ "location.href='./ecma_7.do';"
					+ "</script>");
			
			ps.close();
			con.close();
		}catch(Exception e) {
			this.pw.print("<script>"
					+ "alert('DB오류발생');"
					+ "history.go(-1);"
					+ "</script>");
		}
	}
}

- movie_dao.java (dao) - getter,setter

package shop;

import java.util.ArrayList;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class movie_dao {
	int midx,ticketing;
	String msubject,cinema,screen_date;
	
	public ArrayList<Object> data(){
		ArrayList<Object> al = new ArrayList<Object>();
		
		al.add(getMidx());
		al.add(getMsubject());
		al.add(getCinema());
		al.add(getTicketing());
		al.add(getScreen_date());
		
		return al;
	}
}

※ 알고는 계십쑈 - 외부 js로드시 CORS 걸림(ip가 다르면 import 불가)

🔽

⚡ 영화 정보 리스트 출력 - ECMA + JSTL ( select )

- api_main.java (Controller) 에 추가 - @GetMapping("/ecma/ecma_7.do")

@GetMapping("/ecma/ecma_7.do")
public String ecma_7(Model m,@ModelAttribute("dao") movie_dao dao) throws Exception{
    //module 생략

    try {
        Connection con = dbInfo.getConnection();
        String sql = "select * from movies order by midx desc";
        PreparedStatement ps = con.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        int count = 0;

        ArrayList<ArrayList<Object>> all = new ArrayList<ArrayList<Object>>();
        while(rs.next()) {
            count = rs.getRow(); //최종 갯수 담음

            dao.setMidx(Integer.parseInt(rs.getString(1)));
            dao.setMsubject(rs.getString(2));
            dao.setCinema(rs.getString(3));
            dao.setTicketing(Integer.parseInt(rs.getString(4)));
            dao.setScreen_date(rs.getString(5));

            all.add(dao.data()); //2차배열에 dao에서 생성하는 1차배열 담음
        }
        m.addAttribute("all",all); //데이터 2차배열 jsp로 이관
        m.addAttribute("count",count); 
        //데이터 총 갯수 jsp로 이관 - jsp에서 가져다 쓰진 않았음ㅋ 

        rs.close();
        ps.close();
        con.close();
    }catch(Exception e) {
        m.addAttribute("error",e);
    }

    return null;
}

- ecma_7.jsp - list 출력 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="cr" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>무비 정보 리스트 출력 - ECMA + JSTL</title>
</head>
<body>
	<table border="1">
		<thead>
			<tr>
				<th>번호</th>
				<th>영화제목</th>
				<th>영화관</th>
				<th>예매가격</th>
				<th>최초상영일자</th>
			</tr>
		</thead>
		<tbody>
			<cr:forEach var="m" items="${all}" varStatus="no">
			<tr>
				<th>${count-no.index}</th>
				<th>${m.get(1)}</th>
				<th>${m.get(2)}</th>
				<th>
				<fmt:formatNumber value="${m.get(3)}" pattern="#,###"/>원
				</th>
				<th>${m.get(4)}</th>
			</tr>
			</cr:forEach>
		</tbody>
	</table>
</body>
</html>

'CLASS > HTLML,CSS,JS' 카테고리의 다른 글

#11-3 / ES7 class 핸들링,constructor,get,set (0)	2024.07.16
#11-2 / ECMA Script (함수 사용법) - ES7 (1)	2024.07.16
#11-1 / ECMA Script (함수 사용법) - ES6:class,class 상속 (0)	2024.07.16
#10-2 / js중급 - 키보드 이벤트 핸들링 (0)	2024.06.11
#10-1 / js중급 - 자식노드핸들링,시간함수 (0)	2024.06.11

hing ㅠ

#11-4 / ECMA 로 data insert,select

'CLASS > HTLML,CSS,JS' 카테고리의 다른 글

티스토리툴바

#11-4 / ECMA 로 data insert,select

'CLASS > HTLML,CSS,JS' 카테고리의 다른 글

관련글

티스토리툴바