728x90
★주제
- 주소록 만들기
- CRUD
- 1. 업무 > 생략
- 2. DB 작업 > ERD > 테이블 작성
- 3. 클라이언트 작업 > 레이아웃 + 페이지 구현 > HTML, CSS, JavaScript
★ SQL Developer을 이용
- Oracle 사용
- 데이터 베이스 DDL
create table tblAddress (
seq number primary key, -- 번호(PK)
name varchar2(30) not null, -- 이름
age number(3) not null, -- 나이
tel varchar2(15) not null, -- 연락처
address varchar2(300) not null -- 주소
);
create sequence seqAddress;
★ 파일 생성
- webapp > "address" 폴더 생성
> "list.jsp" 목록보기
> "add.jsp" 추가하기(폼)
> "addok.jsp" 추가하기(처리)
> "edit.jsp" 수정하기(폼)
> "editok.jsp" 수정하기(처리)
> "del.jsp" 삭제하기(폼)
> "delok.jsp" 삭제하기(처리)
> "template.jsp" 임시페이지(틀)
- webapp > address > "inc" 폴더 생성
> "header.jsp"
> "asset.jsp"
- webapp > address > "asset" 폴더 생성
> "main.css"
■ inc
- header.jsp : 헤더의 정보를 담은 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- inc/header.jsp -->
<h1>Address <small>JSP Model 1</small></h1>- asset.jsp : link를 담은 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<link rel="stylesheet" href="asset/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
■ template.jsp : 모든 파일의 템플릿이 될 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
콘텐츠
</div>
<script>
</script>
</body>
</html>
■ add.jsp : 연락처에 데이터를 넣는 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp > add.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
<h3>추가하기</h3>
<form method="POST" action="addok.jsp">
<table class="vertical">
<tr>
<th>이름</th>
<td><input type="text" name="name" required class="short" autocomplete="off"></td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" required class="short" autocomplete="off" min="0" max="150"></td>
</tr>
<tr>
<th>전화</th>
<td><input type="tel" name="tel" required></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" name="address" required class="long"></td>
</tr>
</table>
<div>
<button type="button">
<span class="material-symbols-outlined">fact_check</span>
목록보기
</button>
<button type="submit">
<span class="material-symbols-outlined">edit_note</span>
추가하기
</button>
</div>
</form>
</div>
<script>
(function() {
//더미 입력
const name = [ '김', '이', '정', '최', '박', '민', '경', '현', '선', '진', '한'];
const address = [ '서울시 강남구 역삼동', '서울시 강동구 천호동', '서울시 강서구 둔촌동', '서울시 동대문구 회기동', '서울시 은평구 불광동', '서울시 노원구 월계동'];
//이름
$('input[name=name]').val(name[parseInt(Math.random() * name.length)] + name[parseInt(Math.random() * name.length)] + name[parseInt(Math.random() * name.length)]);
//나이
$('input[name=age]').val(parseInt(Math.random() * 20) + 20);
//연락처
$('input[name=tel]').val('010-1234-5678');
//주소
$('input[name=address]').val(address[parseInt(Math.random() * address.length)]);
})();
</script>
</body>
</html>
■ addok.jsp : add.jsp에서 받은 내용을 실질적으로 데이터베이스에 삽입하는 파일
- DB연결
- jdbc jar파일을 복사해서, webapp > WEB-INF > lib 안에다가 넣기
- 데이터베이스 연동
<%@page import="com.test.my.DBUtil"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 데이터 가져오기
//2. DB 작업 > insert
//3. 피드백
//1.
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
String tel = request.getParameter("tel");
String address = request.getParameter("address");
//2. - webapp > WEB-INF > lib
//데이터 베이스 연동
Connection conn = null;
PreparedStatement stat = null;
conn = DBUtil.open();
// System.out.println(conn.isClosed());
String sql = "insert into tblAddress (seq, name, age, tel, address) values (seqAddress.nextVal, ?, ?, ?, ?)";
stat = conn.prepareStatement(sql);
stat.setString(1, name);
stat.setString(2, age); //**자바와 오라클의 자료형은 아무 관계 없다.
stat.setString(3, tel);
stat.setString(4, address);
int result = stat.executeUpdate();
stat.close();
conn.close();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp > addok.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
<%--
<% if (result == 1) { %>
<div>추가했습니다.</div>
<div><a href="list.jsp">목록보기</a></div>
<% } else { %>
<div>실패했습니다.</div>
<div><a href="add.jsp">돌아가기</a></div>
<% } %>
--%>
</div>
<script>
<% if(result == 1) { %>
//alert('추가했습니다.');
location.href = 'list.jsp';
<%} else { %>
alert('실패했습니다.');
location.href = 'add.jsp';
<% } %>
</script>
</body>
</html>
■ list.jsp : DB에 등록된 연락처 목록을 보여주는 파일
- 1. DB 작업 > select
- 2. ResultSet > HTML 테이블 출력
<%@page import="com.test.my.DBUtil"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. DB 작업 > select
//2. ResultSet > HTML 테이블 출력
//1.
Connection conn = null;
Statement stat = null;
ResultSet rs = null;
conn = DBUtil.open();
String sql = "select * from tblAddress order by seq desc";
stat = conn.createStatement();
rs = stat.executeQuery(sql);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
table th:nth-child(1) {width : 50px;}
table th:nth-child(2) {width : 70px;}
table th:nth-child(3) {width : 50px;}
table th:nth-child(4) {width : 130px;}
table th:nth-child(5) {width : auto;}
table td {text-align : center;}
table td:nth-child(5) { text-align : left; }
table td:nth-child(5) span { float : right; margin-top: 4px;}
</style>
</head>
<body>
<!-- template.jsp > list.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
<h3>목록보기</h3>
<table class="horizontal">
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>전화</th>
<th>주소</th>
</tr>
<% while (rs.next()) { %>
<tr>
<td><%= rs.getString("seq") %></td>
<td><%= rs.getString("name") %></td>
<td><%= rs.getString("age") %></td>
<td><%= rs.getString("tel") %></td>
<td>
<%= rs.getString("address") %>
<span><a href="edit.jsp?seq=<%= rs.getString("seq")%>">[edit]</a></span>
<span><a href="del.jsp?seq=<%= rs.getString("seq")%>">[delete]</a></span>
</td>
</tr>
<% } %>
</table>
</div>
<div>
<button type="button" onclick="location.href='add.jsp'">
<span class="material-symbols-outlined">edit_note</span>
추가하기
</button>
</div>
<script>
</script>
</body>
</html>
<%
rs.close();
stat.close();
conn.close();
%>
■ edit.jsp : 해당 정보를 수정하는 파일
- 1. 데이터 가져오기(edit.jsp?seq=10)
- 2. DB 작업 > select .. where seq = 10;
- 3. 결과 > 컨트롤 입력
<%@page import="com.test.my.DBUtil"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 데이터 가져오기(edit.jsp?seq=10)
//2. DB 작업 > select .. where seq = 10;
//3. 결과 > 컨트롤 입력
//1.
String seq = request.getParameter("seq");
//2.
Connection conn = null;
PreparedStatement stat = null;
ResultSet rs = null;
conn = DBUtil.open();
String sql = "select * from tblAddress where seq = ?";
stat = conn.prepareStatement(sql);
stat.setString(1, seq);
rs = stat.executeQuery();
String name = "";
String age = "";
String tel = "";
String address = "";
if(rs.next()) {
name = rs.getString("name");
age = rs.getString("age");
tel = rs.getString("tel");
address = rs.getString("address");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
<h3>수정하기</h3>
<form method="POST" action="editok.jsp">
<table class="vertical">
<tr>
<th>이름</th>
<td><input type="text" name="name" required class="short" autocomplete="off" value="<%= name %>"></td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" required class="short" autocomplete="off" min="0" max="150"></td>
</tr>
<tr>
<th>전화</th>
<td><input type="tel" name="tel" required></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" name="address" required class="long"></td>
</tr>
</table>
<div>
<button type="button" onclick="location.href='list.jsp'">
<span class="material-symbols-outlined">fact_check</span>
목록보기
</button>
<button type="submit">
<span class="material-symbols-outlined">edit_note</span>
수정하기
</button>
</div>
<!-- list.jsp > (seq) >edit.jsp > (seq) > editok.jsp -->
<input type="hidden" name="seq" value="<%= seq %>">
</form>
</div>
<script>
$('input[name=age]').val('<%= age %>');
$('input[name=tel]').val('<%= tel %>');
$('input[name=address]').val('<%= address %>');
</script>
</body>
</html>
■ editok.jsp : 수정한 내용을 DB에 적용하는 파일
- 1. 데이터 가져오기
- 2. DB 작업 > UPDATE
- 3. 피드백
<%@page import="com.test.my.DBUtil"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 데이터 가져오기
//2. DB 작업 > UPDATE
//3. 피드백
//1.
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
String tel = request.getParameter("tel");
String address = request.getParameter("address");
String seq = request.getParameter("seq");
//2. - webapp > WEB-INF > lib
//데이터 베이스 연동
Connection conn = null;
PreparedStatement stat = null;
conn = DBUtil.open();
// System.out.println(conn.isClosed());
String sql = "update tblAddress set name = ?, age = ?, tel = ?, address = ? where seq = ?";
stat = conn.prepareStatement(sql);
stat.setString(1, name);
stat.setString(2, age); //**자바와 오라클의 자료형은 아무 관계 없다.
stat.setString(3, tel);
stat.setString(4, address);
stat.setString(5, seq);
int result = stat.executeUpdate();
stat.close();
conn.close();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp > addok.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
</div>
<script>
<% if(result == 1) { %>
//alert('추가했습니다.');
location.href = 'list.jsp';
<%} else { %>
alert('실패했습니다.');
//location.href = 'edit.jsp';
history.back();
<% } %>
</script>
</body>
</html>
■ del.jsp : 원하는 컬럼을 삭제하는 파일
- 1. 데이터 가져오기(del.jsp?seq=10)
- 2. 확인 > 이동 유무?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 데이터 가져오기(del.jsp?seq=10)
//2. 확인 > 이동 유무?
//1.
String seq = request.getParameter("seq");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
<h3>삭제하기</h3>
<div>
<form method="POST" action="delok.jsp">
<button type="button" onclick="location.href='list.jsp'">
<span class="material-symbols-outlined">fact_check</span>
목록보기
</button>
<button type="submit">
<span class="material-symbols-outlined">delete</span>
삭제하기
</button>
<input type="hidden" name="seq" value="<%= seq %>">
</form>
</div>
</div>
<script>
</script>
</body>
</html>
■ delok.jsp : DB에 적용하여 삭제하는 파일
- 1. 데이터 가져오기
- 2. DB 작업 > delete
- 3. 피드백
<%@page import="com.test.my.DBUtil"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 데이터 가져오기
//2. DB 작업 > delete
//3. 피드백
//1.
request.setCharacterEncoding("UTF-8");
String seq = request.getParameter("seq");
//2. - webapp > WEB-INF > lib
//데이터 베이스 연동
Connection conn = null;
PreparedStatement stat = null;
conn = DBUtil.open();
// System.out.println(conn.isClosed());
String sql = "delete from tblAddress where seq = ?";
stat = conn.prepareStatement(sql);
stat.setString(1, seq);
int result = stat.executeUpdate();
stat.close();
conn.close();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address</title>
<%@ include file="inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp > addok.jsp -->
<%@ include file="inc/header.jsp" %>
<div>
</div>
<script>
<% if(result == 1) { %>
//alert('추가했습니다.');
location.href = 'list.jsp';
<%} else { %>
alert('실패했습니다.');
//location.href = 'edit.jsp';
history.back();
<% } %>
</script>
</body>
</html>
★ 실행 결과
- 1. 주소록 추가
- 2. 목록보기
- 3. 수정하기
- 4. 삭제하기
728x90
'Server' 카테고리의 다른 글
| JSP STEP 10 - JSP Model (2) | 2023.05.11 |
|---|---|
| JSP STEP 9 - Web Security (0) | 2023.05.10 |
| JSP STEP 7 - COOKIE (2) | 2023.05.10 |
| JSP STEP 6 - Application (0) | 2023.05.09 |
| JSP STEP 5 - Session (1) | 2023.05.09 |
