[JSP] 주소록에 데이터 추가
주소록을 만드는데 필요한 도구
- JSP Model 1
- DBeaver
- BootStrap + jQuery
- Apache Tomcat 8.5
- Java 11
기능
- CRUD (주소록 쓰기, 보기, 수정, 삭제)
DB
- DBeaver에서 tblAddress를 생성한다.
- 속성 : 번호(PK), 이름, 나이, 주소, 성별, 연락처
디렉토리 구성과 페이지 설계
- 주소록 : webapp > address (주소록 root 폴더)
- 쓰기 : webapp > address > add.jsp, addok.jsp(데이터를 받아 처리하는 페이지)
- 읽기 : webapp > address > list.jsp(시작페이지)
- 수정 : webapp > address > edit.jsp, editok.jsp(처리페이지)
- 삭제 : webapp > address > del.jsp, delok.jsp
- 템플릿 : webapp > address > template.jsp (화면 틀 생성)
- 조각페이지 : header.jsp (머릿말 조각페이지) , asset.jsp (link와 script를 반복해 쓰지 않고 include) - Bootstrap, jQuery
- 라이브러리 : address.css (전역 CSS) , address.js (전역 JavaScript)
asset에 링크를 추가. 추가한 것들은 다 순서가 정해져있다(붓스,css 등 순서에 따라 쓴 것임)
header에서 기본적 머릿말을 작성하고 template에서 include하면 template 페이지에서도 머릿말이 잘 나온다.
address.css 같은 외부파일은 새로고침해도 반응이 느리다. tip : 개발자 도구를 띄워놓고 새로고침을 꾹 눌러서 강력 새로고침
add>list>delete 순서
add.jsp
<main>
<header>
<%@ include file="inc/header.jsp" %>
</header>
<section>
<div class="section content">
<form method="POST" action="addok.jsp">
<table class="table table-bordered">
<tr>
<th>이름</th>
<td><input type="text" name="name" required class="form-control short"></td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" required min="18" max="120" class="form-control short"></td>
</tr>
<tr>
<th>성별</th>
<td>
<select name="gender" class="form-control short">
<option value="m">남자</option>
<option value="f">여자</option>
</select>
</td>
</tr>
<tr>
<th>전화</th>
<td><input type="text" name="tel" required class="form-control middle"></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" name="address" required class="form-control"></td>
</tr>
</table>
<div class="btns">
<input type="button" value="돌아가기" class="btn btn-secondary" onclick="location.href='/jsp/address/list.jsp';">
<input type="submit" value="추가하기" class="btn btn-primary">
</div>
</form>
</div>
</section>
</main>addok.jsp
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="com.test.jsp.DBUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 인코딩 처리
//2. 데이터 가져오기
//3. DB 작업
// 3.1 DB 연결
// 3.2 SQL
// 3.3 종료
//4. 마무리(feedback)
//1.
request.setCharacterEncoding("UTF-8");
//2.
String name = request.getParameter("name");
String age = request.getParameter("age");
String gender = request.getParameter("gender");
String tel = request.getParameter("tel");
String address = request.getParameter("address");
int result = 0;
try {
//3.
DBUtil util = new DBUtil();
Connection conn = null;
Statement stat = null;
PreparedStatement pstat = null;
conn = util.open();
//System.out.println(conn.isClosed()); //false
String sql = "insert into tblAddress (seq, name, age, address, gender, tel) values (seqAddress.nextval, ?, ?, ?, ?, ?)";
pstat = conn.prepareStatement(sql);
pstat.setString(1, name);
pstat.setString(2, age);
pstat.setString(3, address);
pstat.setString(4, gender);
pstat.setString(5, tel);
result = pstat.executeUpdate();
//4.
if (result > 0) {
//추가 성공
} else {
//추가 실패
}
} catch (Exception e) {
System.out.println(e);
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주소록</title>
<%@ include file="/address/inc/asset.jsp" %>
<style>
</style>
</head>
<body>
<!-- template.jsp > addok.jsp -->
<main>
<header>
<%@ include file="inc/header.jsp" %>
</header>
<section>
<div class="section content">
<%--
<% if (result > 0) { %>
<div>추가 성공!!</div>
<a href="list.jsp">목록 보기</a>
<% } else { %>
<div>추가 실패;;</div>
<a href="#!" onclick="history.back();">돌아가기</a>
<% } %>
--%>
</div>
</section>
</main>
<script>
<%--
<% if (result > 0) { %>
alert('추가 성공!!');
location.href = 'list.jsp';
<% } else { %>
alert('추가 실패;;');
history.back();
<% } %>
--%>
<% if (result > 0) { %>
location.href = 'list.jsp';
<% } else { %>
alert('추가 실패;;');
history.back();
<% } %>
</script>
</body>
</html>