- spring, servlet 을 이용한 웹페이지 만들기.
1. dynamic web project
2. apache tomcat target runtime check
3. make a view on WebContent
4. make a controller on java resources src
https://becomefullstackdev.tistory.com/63
2021.08.17 수업일지(JAVA, Servlet, Spring)
- Servlet이란 자바 클래스를 기반으로 하는 웹 어플리케이션 프로그래밍 기술이다. JSP도 자바를 기반으로 하는 웹 어플리케이션 기술로 HTML 문서 안에 자바 코드가 삽입되는 구조를 갖는다. - MVC(M
becomefullstackdev.tistory.com
ㄴ 참고
- 웹 페이지 메인 페이지를 위한 view를 만들어준다.
- webcontent에 main.jsp를 만들고 아래와 같이 입력해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#container {
width: 960px;
border: 1px solid black;
margin: 0px auto;
padding: 20px;
}
#header {
border: 1px solid black;
padding: 20px;
}
#center {
border: 1px solid black;
padding: 20px;
margin: 10px 0px 10px 0px;
overflow: hidden;
}
#menu {
width: 150px;
float: left;
margin-right: 10px;
background-color: yellow;
}
#content {
width: 730px;
float: left;
border-left: 1px solid black;
background-color: wheat;
padding: 10px;
}
#footer {
border: 1px solid black;
padding: 20px;
}
h1, h3 {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>이주성의 쇼핑몰</h1>
</div>
<div id="center">
<div id="menu">
<h4>도서관리</h4>
<h4>게시판관리</h4>
</div>
<div id="content">여기는 내용입니다.</div>
</div>
<div id="footer">
<h3>Copyright. 2021 ICIA All rights reserved.</h3>
</div>
</div>
</body>
</html>
- CSS를 외부파일로 만들어서 link를 걸어보자.
1. webcontent 안에 css 폴더를 만들자.
2. main.css에 아까 작성한 CSS를 넣는다.
@CHARSET "UTF-8";
#container {
width: 960px;
border: 1px solid black;
margin: 0px auto;
padding: 20px;
}
#header {
border: 1px solid black;
padding: 20px;
}
#center {
border: 1px solid black;
padding: 20px;
margin: 10px 0px 10px 0px;
overflow: hidden;
}
#menu {
width: 150px;
float: left;
margin-right: 10px;
background-color: yellow;
}
#content {
width: 730px;
float: left;
border-left: 1px solid black;
background-color: wheat;
padding: 10px
}
#footer {
border: 1px solid black;
padding: 20px;
}
h1, h3 {
text-align: center;
}
- header 안에 이미지를 추가해준다.
1. webcontent 안에 img 폴더를 만들고 header img를 추가해준다.
<div id="header">
<img src="/img/back.jpg" width="910"/>
</div>ㄴ 헤더란에 이미지 링크를 추가해준다.
- java resources src 안에 controller를 만들어보자. 이름은 MainServlet으로 하자.
- 처음 서블릿이 없는 경우 메인페이지 출력시 아래와 같이 main.jsp를 입력해야 진입할 수 있다.
- Java Resources\src\ 에 서블릿을 만들고 패키지 이름은 controller로 하도록 하자.
- MainServlet.java에 다음과 같이 입력하자. 아래서 보는것과 같이 @WebServlet("/")는 위 /main.jsp로 진입하는게 아닌 main.jsp를 /로 진입할 수 있게 해준다.
package controller;
import java.io.IOException;
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;
@WebServlet("/")
public class MainServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setAttribute("pageName", "/about.jsp");
RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
dis.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
- webcontent 안에 about.jsp를 만들어보자. pageName을 통해서 main.jsp에서 아래의 내용을 확인할 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<h3>[서점 소개]</h3>
※ main controller에서 웹을 열었는데 이미지나 CSS가 안보인다면 Servers\tomcat\web.xml에 다음과 같이 추가해준다. 혹 오류가 난다면 서버를 지우고 다시 설정해줘야한다.
<url-pattern>*.css</url-pattern>
<url-pattern>*.jpg</url-pattern>
<url-pattern>*.gif</url-pattern>
<url-pattern>*.png</url-pattern>
- 도서관리에 링크를 걸어보자. 이를 위한 컨트롤러를 만들어보자.
- MainServlet.java와 같은 경로에 도서관리를 위한 controller BookServlet을 만들어보자.
- BookServlet.java에 아래와 같이 입력하여 도서관리 클릭시 /book/list로 진입하게 하는 controller를 만들어보도록 하자.
package controller;
import java.io.IOException;
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;
@WebServlet(value={"/book/list"})
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("/book/list!!!");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}ㄴ 만약 컨트롤러가 제대로 작동된다면 스프링 이클립스 콘솔에서 "/book/list!!!!"을 확인할 수 있다.
- 도서 목록을 출력하기 위한 view를 webcontent\book\에 만들어보도록 하자. book은 관리를 위한 새폴더 이며, 도서관리 view의 이름은 list.jsp이다.
- view에는 아래와 같이 출력이 제대로 되는지 확인하기 위한 코드를 입력해주도록 하자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<h3>[도서 목록]</h3>
- bookservlet.java을 다음과 같이 수정한다.
package controller;
import java.io.IOException;
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;
@WebServlet(value={"/book/list"})
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("pageName", "/book/list.jsp");
RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
dis.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}ㄴ list.jsp를 pageName으로 main에 넘겨서 확인할 수 있게 만들었다.
- 도서 목록 출력을 위한 DB 작업을 해보도록하겠다.
- back to mysql
- root로 진입해 다음과 같이 입력하여 db와 유저를 만든다.
#2021.08.18
#데이터 베이스 생성
create database webdb;
#유저 생성
create user 'web'@'localhost' identified by 'pass';
#유저에게 데이터베이스 권한 부여
grant all privileges on webdb.* to 'web'@'localhost';
- connections (+) 클릭하여 다음과 같이 web을 만들어준다.
- 진입해 webdb를 더블클릭하여 활성화하고 아래와 같이 입력한다.
create table book(
code nchar(4) not null,
title nvarchar(50) not null,
writer nvarchar(20),
price int(8) not null,
primary key(code)
);
insert into book(code, title, writer, price) values('1001', '뇌를 자극하는 java 프로그래밍', '김윤명', 27000);
insert into book(code, title, writer, price) values('1002', '좋은 사지을 만드는 노출', '정승익', 20000);
insert into book(code, title, writer, price) values('1003', '예제로 배우는 엑셀 2007', '김대식', 19000);
insert into book(code, title, writer, price) values('1004', '지금 당장 경제공부 시작하라', '최진기', 18500);
insert into book(code, title, writer, price) values('1005', 'Introduction to Algorithms', '토마스', 42000);
insert into book(code, title, writer, price) values('1006', '이것이 자바다.', '신용권', 32000);
insert into book(code, title, writer, price) values('1007', '안드로이드 프로그래밍 정복1', '김상형', 35000);
insert into book(code, title, writer, price) values('1008', '안드로이드 프로그래밍 정복2', '김상형', 32000);
insert into book(code, title, writer, price) values('1009', '예제로 배우는 엑셀 2007', '김대식', 19000);
insert into book(code, title, writer, price) values('1010', '지금 당장 경제공부 시작하라', '최진기', 18500);
insert into book(code, title, writer, price) values('1011', 'Introduction to Algorithms', '토마스', 42000);
insert into book(code, title, writer, price) values('1012', '이것이 자바다.', '신용권', 32000);
select * from book;
- select 문을 통해서 아래와 같이 확인할 수 있다.
- 만든 DB를 Model을 통해서 controller에 전달해줘야한다.
- back to spring
- model DB 연결 class 생성
- 아래와 같이 Java Resources\src\model\에 DB와의 연결을 위한 Database.java를 생성해주었다.
- 자바 언어로 다양한 종류의 관계형 DB에 접속하고 SQL문을 수행하여 처리하고자 할 때 사용되는 표준 SQL 인터페이스를 JDBC라고 한다. 접속하려는 DBMS 서버에 따라서 알맞는 JDBC 드라이버가 필요하다. Mysql 사용에 필수적인 mysql-connector-java-(version)-bin.jar 파일을 아래와 같이 web-inf\lib\에 넣어줘야 한다.
- Database.java에서는 mysql에 생성한 db, user, pass를 확인하여 아래와 같이 .getConnection에 넣어줘야 한다.
package model;
import java.sql.Connection;
import java.sql.DriverManager;
public class Database {
public static Connection CON;
static {
try {
Class.forName("com.mysql.jdbc.Driver");
CON = DriverManager.getConnection("jdbc:mysql://localhost:3306/webdb", "web", "pass");
System.out.println("접속성공");
} catch (Exception e) {
System.out.println("접속실패:" + e.toString());
}
}
}ㄴ connecttion, drivemanager ctrl+space하여 import 설정해준다. 이제 컨넥션을 위한 준비는 완료되었다.
- 테이블에 있는 데이터를 가지고오도록 하자. Value Object를 만들어보자.
- 앞서 만든 model 안에 BookVO를 만들어보도록 하자. VO는 value object의 줄임말이며 db에 있는 테이블 컬럼 값을 java에서 객체로 다루기 위해 사용한다.
- VO를 생성하고 테이블에서 넣은 컬럼 명을 변수로 하여 아래와 같이 데이터를 가지고 오기위한 get, 데이터를 입력하기 위한 set을 만들어준다.
package model;
public class BookVO {
// private이니 class 안에서 사용가능
private String code;
private String title;
private String writer;
private int price;
// 값을 넣고 빼기 위하 get, set을 지정해준다.
// get으로 가지고 오고 set으로 넣어준다.
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getWriter() {
return writer;
}
public void setWriter(String writer) {
this.writer = writer;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
@Override
public String toString() {
return "BookVO [code=" + code + ", title=" + title + ", writer=" + writer + ", price=" + price + "]";
}
}
- Database Access Object(DAO, DB 접근을 위한 오브젝트) 를 만들어준다.
- VO와 마찬가지로 model 패키저 안에 BookDAO라는 이름으로 만들어준다. DAO는 Data Access Object의 줄임말이며 DB의 data에 접근을 위한 객체. DB에 접근을 하기 위한 로직과 비즈니스 로직을 분리하기 위해 사용한다. DB를 통해 데이터를 조회하거나 수정, 삭제하는 메서드를 이곳에서 작성해줄 수 있다.
- DB에서 테이블에 입력해준 도서목록을 출력하기 위한 메서드를 아래와 같이 만들어준다. 메서드에서는 배열에 넣엇 가지고 오도록 하겠다.
package model;
import java.util.*;
import java.sql.*;
public class BookDAO {
// 1. DB에서 도서 목록을 가지고 온다.
// 배열에 넣어준다.
public ArrayList<BookVO> list() {
// 2. 데이터를 담아줄 방을 선언해준다.
ArrayList<BookVO> array = new ArrayList<BookVO>();
// 4. 트라이 케치문을 만든다.
try {
// 5. db에서 테이블을 선택하는 sql을 만든다.
String sql = "select * from book order by code desc";
// 6. DB 연결하는 ps를 만든다.
PreparedStatement ps = Database.CON.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
// 반복문을 통해서 array에 데이터를 하나씩 넣어준다.
while(rs.next()){
BookVO vo = new BookVO();
vo.setCode(rs.getString("code"));
vo.setTitle(rs.getString("title"));
vo.setWriter(rs.getString("writer"));
vo.setPrice(rs.getInt("price"));
// vo를 array에 add로 넣어준다.
array.add(vo);
}
} catch (Exception e) {
// 5. 에라나 발생한다면 콘솔에 에러 메시지를 출력한다.
System.out.println("list error : " + e.toString());
}
// 3. 데이터는 리턴해줘야한다.
return array;
}
}
- bookservlet으로 가서 dao에 array에 넣은 도서 목록을 출력해주기 위한 준비를 하도록 한다.
package controller;
import java.io.IOException;
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 model.*; // new
@WebServlet(value={"/book/list"})
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
BookDAO dao = new BookDAO(); // new
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("pageName", "/book/list.jsp");
request.setAttribute("array", dao.list()); // new
RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
dis.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
- list.jsp에서 array담은 데이터를 출력하기위한 테이블을 만든다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<h3>[도서 관리]</h3>
<table border="1">
<tr>
<td width=100>코드</td>
<td width=300>제목</td>
<td width=200>저자</td>
<td width=100>가격</td>
</tr>
</table>
- 테그에서 반복문을 사용할 수 있게 JSTL을 넣어준다. JSTL(JSP Standard Tag Library)는 여러 프로그램이 공통으로 사용하는 코드를 모아놓은 코드의 집합의 약어이다. 자신만의 태그를 추가할 수 있는 기능을 제공한다. 주로 JSTL의 Core에서 c를 사용한다.
[JSTL 정리] JSTL이란? / 사용방법 / 태그라이브러리
1. JSTL이란? - JSP 표준 태그 라이브러리(여러 프로그램이 공통으로 사용하는 코드를 모아놓은 코드의 집합)의 약어 - 자신만의 태그를 추가할 수 있는 기능을 제공한다. - 주로 JSTL의 Core에서 c를
mkil.tistory.com
- 선생님이 제공해준 프로그램 목록에서 자카르타를 압축 풀어준다.
- 해당 폴더에 lib에 있는 jstl, standard를 mysql connector와 같은 위치에 넣어준다.
- list.jsp에서 core를 이용해 반복문을 다음과 같이 만들어준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<h3>[도서 관리]</h3>
<table border="1">
<tr>
<td width=100>코드</td>
<td width=300>제목</td>
<td width=200>저자</td>
<td width=100>가격</td>
</tr>
<c:forEach items="${array }" var="vo">
<tr>
<td>${vo.code}</td>
<td>${vo.title}</td>
<td>${vo.writer}</td>
<td>${vo.price}</td>
</tr>
</c:forEach>
</table>
- 만약 가격의 포맷을 지정하고 싶다면
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>ㄴ 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<h3>[도서 관리]</h3>
<table border="1">
<tr>
<td width=100>코드</td>
<td width=300>제목</td>
<td width=200>저자</td>
<td width=100>가격</td>
</tr>
<c:forEach items="${array }" var="vo">
<tr>
<td>${vo.code}</td>
<td>${vo.title}</td>
<td>${vo.writer}</td>
<td><f:formatNumber pattern="#,###원" value="${vo.price}"></f:formatNumber> </td>
</tr>
</c:forEach>
</table>ㄴ 위와 같이 f 테그로 formatNumber를 설정해 줄 수 있수 있으며 아래와 같이 출력 가능하다.
- 이제 도서를 등록하는 서블릿을 추가해보자.
- /book/list.jsp 에서 테이블 상단에 도서등록 a 테그를 만들어주고 "/book/insert"로 이동하는 링크를 설정해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<style>
.row:hover {
background-color: gray;
color: white;
}
.title {
background-color: gray;
color: white;
}
</style>
<h3>[도서 관리]</h3>
<a href="/book/insert">도서등록</a>
<table border="1" >
<tr class="title">
<td width=100>코드</td>
<td width=300>제목</td>
<td width=200>저자</td>
<td width=100>가격</td>
</tr>
<c:forEach items="${array }" var="vo">
<tr class="row">
<td>${vo.code}</td>
<td>${vo.title}</td>
<td>${vo.writer}</td>
<td><f:formatNumber pattern="#,###원" value="${vo.price}"></f:formatNumber>
</td>
</tr>
</c:forEach>
</table>
- BookServlet에서 스위치 케이스로 다음과 같이 설정한다. 클릭시 메인에 보여지는 pageName을 각 링크에 맞게 바꿔주는 스위치 케이스문을 만들어준다. 도서등록은 /book/insert로 설정해주도록 한다.
package controller;
import java.io.IOException;
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 model.*;
@WebServlet(value={"/book/list", "/book/insert"})
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
BookDAO dao = new BookDAO();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
switch(request.getServletPath()){
case "/book/list":
request.setAttribute("pageName", "/book/list.jsp");
request.setAttribute("array", dao.list());
break;
case "/book/insert":
request.setAttribute("pageName", "/book/insert.jsp");
break;
}
RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
dis.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
- 도서 등록을 위한 insert.jsp에 form을 만들어준다.
- insert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
input[type=text]{
width: 100px;
height: 25px;
}
</style>
<h3>[도서 등록]</h3>
<form name="frm">
<input type="text" name="code" placeholder="책코드" />
<hr>
<input type="text" name="title" placeholder="책제목" />
<hr>
<input type="text" name="writer" placeholder="책저자" />
<hr>
<input type="text" name="price" placeholder="책가격" />
<hr>
<div>
<input type="submit" value="도서등록"> <input type="reset"
value="등록취소">
</div>
</form>
- main.jsp - jquery문을 입력하기위한 src를 넣어준다.
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
- 이제 insert.jsp에 유효성 체크를 위한 스크립트를 추가해준다.
<script>
$(frm).on("submit", function(e){
e.preventDefault();
var code=$(frm.code).val();
if(code==''){
alert('책코드를 입력하세요.')
}
})
</script>
- BookDAO에서 code번호의 마지막 번호를 출력하기 위한 코드를 입력해준다.
// 마지막 코드값 출력
public String maxCode(){
String maxCode = "";
try {
String sql = "select max(code) mcode from book;";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
if(rs.next()){
maxCode = rs.getString("mcode");
}
} catch (Exception e) {
System.out.println("maxCode : " + e.toString());
}
return maxCode;
};
- 이 마지막 코드번호를 BookServlet에 넣어서 사용한다.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
switch(request.getServletPath()){
case "/book/list":
request.setAttribute("pageName", "/book/list.jsp");
request.setAttribute("array", dao.list());
break;
case "/book/insert":
String maxCode = dao.maxCode();
int code = Integer.parseInt(maxCode)+1;
request.setAttribute("code", code);
request.setAttribute("pageName", "/book/insert.jsp");
break;
}
RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
dis.forward(request, response);
}
- 이제 insert.jsp에 넣도록 하자.
<form name="frm">
<input type="text" name="code" placeholder="책코드" value="${code}" readonly/>
<hr>
<input type="text" name="title" placeholder="책제목" />
<hr>
<input type="text" name="writer" placeholder="책저자" />
<hr>
<input type="text" name="price" placeholder="책가격" />
<hr>
<div>
<input type="submit" value="도서등록"> <input type="reset"
value="등록취소">
</div>
</form>
- 유효성 체크를 추가해보자.
<script>
$(frm).on("submit", function(e) {
e.preventDefault();
var title = $(frm.title).val();
if (title == '') {
alert('책제목을 입력하세요.')
$(frm.title).focus();
return;
}
var writer = $(frm.writer).val();
if (writer == '') {
alert('책저자를 입력하세요.')
$(frm.writer).focus();
return;
}
var price = $(frm.price).val();
if (price.replace(/[0-9]/g, '') || price == "") {
alert('책가격을 숫자로 입력하세요.')
$(frm.price).focus();
return;
}
if(!confirm("상품을 등록하시겠습니까?")){
return;
}
})
</script>
- 상품등록을 위한 메서드를 bookdao에 추가하자.
// 상품등록 메서드
public void insert(BookVO vo){
try {
String sql = "insert into book(code, title, writer, price) values(?,?,?,?)";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setString(1, vo.getCode());
ps.setString(2, vo.getTitle());
ps.setString(3, vo.getWriter());
ps.setInt(4, vo.getPrice());
ps.execute(); // 실행해라.
} catch (Exception e) {
System.out.println("insert : "+e.toString());
}
}
- 이제 insert.jsp에서 상품을 등록하는 스크립트를 작성해주자.
if(!confirm("상품을 등록하시겠습니까?")){
return;
}
frm.action="/book/insert";
frm.method="post";
frm.submit();
})
</script>
- 상품등록 버튼을 누르면 BookServlet에서 doPost로 간다.
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 한글 깨지지 않게
request.setCharacterEncoding("UTF-8");
// submit한 값을 vo에 넣어줘야한다.
BookVO vo = new BookVO();
vo.setCode(request.getParameter("code"));
vo.setTitle(request.getParameter("title"));
vo.setWriter(request.getParameter("writer"));
vo.setPrice(Integer.parseInt(request.getParameter("price")));
System.out.println(vo.toString());
dao.insert(vo);
// 입력후 목록 페이지로 이동
response.sendRedirect("/book/list");
}
- create 를 만들었으니 이제 r을 만들어보도록 하자.
- list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<style>
.row:hover {
background-color: gray;
cursor:pointer;
color: white;
}
.title {
background-color: gray;
color: white;
}
</style>
<h3>[도서 관리]</h3>
<a href="/book/insert">도서등록</a>
<table border="1" id="tbl">
<tr class="title">
<td width=100>코드</td>
<td width=300>제목</td>
<td width=200>저자</td>
<td width=100>가격</td>
</tr>
<c:forEach items="${array }" var="vo">
<tr class="row">
<td class="code">${vo.code}</td>
<td>${vo.title}</td>
<td>${vo.writer}</td>
<td><f:formatNumber pattern="#,###원" value="${vo.price}"></f:formatNumber>
</td>
</tr>
</c:forEach>
</table>
<script>
$('#tbl').on('click','.row',function(){
var code=$(this).find('.code').html();
location.href="/book/read?code="+code;
});
</script>
- bookServlet.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
switch(request.getServletPath()){
case "/book/read":
String scode=request.getParameter("code");
request.setAttribute("pageName", "/book/read.jsp");
break;
- new read.jsp - insert.jsp 복사해서 만들자.
- bookdao.java에 상품정보를 읽어오는 메서드를 만들어보자.
// 상품정보 읽어오는 메서드
public BookVO read(String code){
BookVO vo = new BookVO();
try {
String sql = "select * from book where code=?";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setString(1, code);
ResultSet rs = ps.executeQuery();
if(rs.next()){
vo.setCode(code);
vo.setTitle(rs.getString("title"));
vo.setWriter(rs.getString("writer"));
vo.setPrice(rs.getInt("price"));
}
} catch (Exception e) {
System.out.println("read:"+e.toString());
}
return vo;
}
- bookservlet으로 돌아가서
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
switch(request.getServletPath()){
case "/book/read":
String scode=request.getParameter("code");
request.setAttribute("vo", dao.read(scode));
request.setAttribute("pageName", "/book/read.jsp");
break;
<form name="frm">
도서번호 : <input type="text" name="code" value="${vo.code }"
readonly />
<hr>
도서제목 : <input type="text" name="title" value="${vo.title }" />
<hr>
도서저자 : <input type="text" name="writer" value="${vo.writer }" />
<hr>
도서가격 : <input type="text" name="price" value="${vo.price }" />
<hr>
<div>
<input type="submit" value="정보수정"> <input type="reset"
value="수정취소">
</div>
</form>
- delete 버튼을 통해서 데이터를 삭제해보자.
- read.jsp
<div>
<input type="submit" value="정보수정"> <input type="button"
value="정보삭제" id="btnDelete"> <input type="reset" value="수정취소">
</div>
</form>
<script>
// 전역변수
var code = "${vo.code}";
// 삭제 버튼을 클릭한 경우
$('#btnDelete').on('click', function() {
if (!confirm(code + " 을(를) 삭제하시겠습니까?"))
return;
location.href = "/book/delete?code=" + code;
});
- bookdao.java
// 상품정보 삭제하는 메서드
public void delete(String code){
try {
String sql = "delete from book where code=?";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setString(1, code);
ps.execute();
} catch (Exception e) {
System.out.println("delete : "+e.toString());
}
}
- bookservlet.java 다음과 같이 수정
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 한글 깨지지 않게
request.setCharacterEncoding("UTF-8");
// submit한 값을 vo에 넣어줘야한다.
BookVO vo = new BookVO();
vo.setCode(request.getParameter("code"));
vo.setTitle(request.getParameter("title"));
vo.setWriter(request.getParameter("writer"));
vo.setPrice(Integer.parseInt(request.getParameter("price")));
System.out.println(vo.toString());
switch(request.getServletPath()){
case "/book/insert":
dao.insert(vo);
break;
case "/book/delete":
dao.delete(vo.getCode());
break;
}
// 입력후 목록 페이지로 이동
response.sendRedirect("/book/list");
}
-read.jsp 다음과 같이 수정
<script>
// 전역변수
var code = "${vo.code}";
// 삭제 버튼을 클릭한 경우
$('#btnDelete').on('click', function() {
if (!confirm(code + " 을(를) 삭제하시겠습니까?"))
return;
frm.action = "/book/delete";
frm.method = "post";
frm.submit();
});
- 최근 입력데이터를 삭제하려 초기값으로 만들어보자.
- 이제 수정을 해보도록하자.
- read.jsp
if (!confirm("상품을 수정하시겠습니까?")) {
return;
}
frm.action = "/book/update";
frm.method = "post";
frm.submit();
})
</script>
- bookdao.java 에 다음과 같이 상품수정 메서드를 추가해준다.
// 상품수정 메서드
public void update(BookVO vo){
try {
String sql = "update book set title=?, writer=?, price=? where code=?";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setString(1, vo.getTitle());
ps.setString(2, vo.getWriter());
ps.setInt(3, vo.getPrice());
ps.setString(4, vo.getCode());
ps.execute(); // 실행해라.
} catch (Exception e) {
System.out.println("update : "+e.toString());
}
}
- bookservlet.java에 다음과 같이 넣어준다.
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 한글 깨지지 않게
request.setCharacterEncoding("UTF-8");
// submit한 값을 vo에 넣어줘야한다.
BookVO vo = new BookVO();
vo.setCode(request.getParameter("code"));
vo.setTitle(request.getParameter("title"));
vo.setWriter(request.getParameter("writer"));
vo.setPrice(Integer.parseInt(request.getParameter("price")));
System.out.println(vo.toString());
switch(request.getServletPath()){
case "/book/update":
dao.update(vo);
break;
case "/book/insert":
dao.insert(vo);
break;
case "/book/delete":
dao.delete(vo.getCode());
break;
}
// 입력후 목록 페이지로 이동
response.sendRedirect("/book/list");
}
'ICIA 수업일지' 카테고리의 다른 글
| 2021.08.20 수업일지(Spring, Servlet) (0) | 2021.08.20 |
|---|---|
| 2021.08.19 수업일지(Spring, Servlet) (0) | 2021.08.19 |
| 2021.08.17 수업일지(JAVA, Servlet, Spring) (0) | 2021.08.18 |
| 2021.08.13 수업일지(Node.js, Mysql, multer) (0) | 2021.08.13 |
| 2021.08.12 수업일지(MySQL, node.js, multer) (0) | 2021.08.12 |
