명함관리

JDBC 에서 실습했던 명함관리를 웹 애플리케이션으로 변경한다.
여러분의 웹 애플리케이션의 최상위 디렉토리에 namecard 란 서브 디렉토리를 생성한다.
앞으로 작성할 JSP파일은 namecard 디렉토리에서 작성할 것이다.
오라클 JDBC 드라이버 파일(ojdbc14.jar)를 TOMCAT_HOME/lib 복사한다.
Namecard.java 와 NamecardManager.java 를 웹 애플리케이션에 추가한다.
namecard 에 list.jsp 를 만든다.
이 페이지는 명함 목록을 보여주어야 한다.

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.java_school.namecard.*" %>
<%@ page import="java.util.*" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	NamecardManager mgr=new NamecardManager();
	ArrayList<Namecard> list = mgr.getCards();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>명함목록</title>
</head>
<body>
<table border="1">
	<tr>
		<td>번호</td>
		<td>이름</td>
		<td>손전화</td>
		<td>이메일</td>
		<td>만난날</td>
	</tr>
<%
int size = list.size();
for(int i=0;i < size;i++) {
	Namecard card = list.get(i);
%>	
	<tr>
		<td><%=card.getNo() %></td>
		<td><%=card.getName() %></td>
		<td><%=card.getMobile() %></td>
		<td><%=card.getEmail() %></td>
		<td><%=card.getMdate() %></td>
	</tr>
<%
}
%>	
</table>
<p>
<input type="button" value="추가" onclick="location.href='write_form.jsp'" />
</p>
</body>
</html>

다음은 write_form.jsp 파일을 생성한다.
이 페이지는 명함을 추가하기 위해 사용자로부터 입력을 받는 페이지이다.
사용자가 입력한 후 확인 버튼을 누르면 파라미터명과 입력값의 쌍이 write.jsp 로 전송되도록 구현한다.

write_form.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>명함 추가</title>
</head>
<body>
<h1>명함 추가하기</h1>
<form action="write.jsp" method="post">
이름 : <input type="text" name="name" /><br />
손전화 : <input type="text" name="mobile" /><br />
이메일 : <input type="text" name="email" /><br />
만난날 : <input type="text" name="mdate" />(2000/01/01 형식으로 입력)<br />
<input type="submit" value="확인" />
<input type="button" value="취소" onclick="location.href='list.jsp'" />
</form>
</body>
</html>

다음은 write.jsp 파일을 작성한다.
이 페이지는 write_form.jsp 에서 전송받은 값으로 명함을 추가한다.

write.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.java_school.namecard.*" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	request.setCharacterEncoding("UTF-8");
	String name = request.getParameter("name");
	String mobile = request.getParameter("mobile");
	String email = request.getParameter("email");
	String mdate = request.getParameter("mdate");
	Namecard namecard = new Namecard(name,mobile,email,mdate);
	NamecardManager mgr = new NamecardManager();
	mgr.addCard(namecard);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>명함 추가</title>
</head>
<body>
명함이 추가되었습니다.<a href="list.jsp">목록</a>
</body>
</html>

다음은 삭제기능을 구현한다.
먼저 list.jsp 에서 아래를 참조해서 테이블의 열를 추가한다.

list.jsp

.. 중간 생략 ..

    <td>번호</td>
    <td>이름</td>
    <td>손전화</td>
    <td>이메일</td>
    <td>만난날</td>
    <td>관리</td>

.. 중간 생략 ..

    <td><%=card.getNo() %></td>
    <td><%=card.getName() %></td>
    <td><%=card.getMobile() %></td>
    <td><%=card.getEmail() %></td>
    <td><%=card.getMdate() %></td>
    <td><a href="delete.jsp?no=<%=card.getNo() %>">삭제</a></td>

.. 중간 생략 ..

다음은 delete.jsp 작성한다.
delete.jsp 는 list.jsp에서 명함의 Primary key 에 해당하는 값을 전달받아 삭제를 수행한다.

delete.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.java_school.namecard.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	int no = Integer.parseInt(request.getParameter("no"));
	NamecardManager mgr = new NamecardManager();
	mgr.deleteCard(no);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>명함 삭제</title>
</head>
<body>
명함이 삭제되었습니다.<a href="list.jsp">목록</a>
</body>
</html>

다음으로 수정기능 구현한다.
먼저 NamecardManager.java 에 수정하는 메소드를 추가해야 한다.

NamecardManager.java

public void updateCard(Namecard card) {
	String sql = "UPDATE namecards " +
			"SET name = ? " +
			",mobile = ? " +
			",email = ? " +
			",mdate = ? " +
			"WHERE no = ?";
	Connection con = null;
	PreparedStatement pstmt = null;
	try {
		con = getConnection();
		pstmt = con.prepareStatement(sql);
		pstmt.setString(1, card.getName());
		pstmt.setString(2, card.getMobile());
		pstmt.setString(3, card.getEmail());
		pstmt.setString(4, card.getMdate());
		pstmt.setInt(5, card.getNo());
		pstmt.executeUpdate();
		
.. 중간 생략 ..

list.jsp 파일에서 수정양식을 보여주는 페이지로 이동하는 링크를 삭제링크 옆에 작성한다.
아래를 참고한다.

list.jsp

<td>
	<a href="modify_form.jsp?no=<%=card.getNo() %>">수정</a>
	<a href="delete.jsp?no=<%=card.getNo() %>">삭제</a>
</td>

다음은 modify_form.jsp 파일을 작성한다.
사용자 UI 통일을 위해 wirte_form.jsp 를 copy & paste 하여 만든 후 아래와 같이 수정한다.

modify_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.java_school.namecard.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	int no = Integer.parseInt(request.getParameter("no"));
	NamecardManager mgr = new NamecardManager();
	Namecard card = mgr.getCard(no);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>명함 수정</title>
</head>
<body>
<h1>명함 수정하기</h1>
<form action="modify.jsp" method="post">
<input type="hidden" name="no" value="<%=no %>" />
이름 : <input type="text" name="name" value="<%=card.getName() %>" /><br />
손전화 : <input type="text" name="mobile" value="<%=card.getMobile() %>" /><br />
이메일 : <input type="text" name="email" value="<%=card.getEmail() %>" /><br />
이메일 : <input type="text" name="mdate" value="<%=card.getMdate() %>" />(2000/01/01 형식으로 입력)<br />
<input type="submit" value="확인" />
<input type="button" value="취소" onclick="location.href='list.jsp'" />
</form>
</body>
</html>

<input type="hidden" name="no" value="<%=no %>" /> 이 부분이 폼태그에 반드시 있어야 한다.
다음은 modify.jsp 파일을 작성한다.
이 페이지는 modify_form.jsp에서 전송된 값으로 명함을 수정하는 페이지이다.

modify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.java_school.namecard.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	request.setCharacterEncoding("UTF-8");
	int no = Integer.parseInt(request.getParameter("no"));
	String name = request.getParameter("name");
	String mobile = request.getParameter("mobile");
	String email = request.getParameter("email");
	String mdate = request.getParameter("mdate");
	Namecard card = new Namecard();
	card.setNo(no);
	card.setName(name);
	card.setMobile(mobile);
	card.setEmail(email);
	card.setMdate(mdate);
	NamecardManager mgr = new NamecardManager();
	mgr.updateCard(namecard);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>명함 수정</title>
</head>
<body>
명함이 수정되었습니다. <a href="list.jsp">목록</a>
</body>
</html>

다음으로 list.jsp 에 검색기능을 추가한다.
list.jsp </body> 전에 다음 폼을 추가한다.

list.jsp

<form action="list.jsp" method="post">
	<input type="text" name="search" />
	<input type="submit" value="검색" />
</form>

검색을 위해서는 NamecardManager.java 의 findCard(String name) 메소드를 아래와 같이 변경한다.

NamecardManager.java

public ArrayList<Namecard> findCard(String search) {
	String searchWord = "%" + search + "%";
	ArrayList<Namecard> matchingCard = 
		new ArrayList<Namecard>();
	String sql ="select no,name,mobile,email,to_char(mdate,'YYYY/MM/DD') mdate from namecards " +
			" where name like ? " +
			" or mobile like ? " +
			" or email like ?";
	Connection con = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	try {
		con = getConnection();
		pstmt = con.prepareStatement(sql);
		pstmt.setString(1, searchWord);
		pstmt.setString(2, searchWord);
		pstmt.setString(3, searchWord);
		rs = pstmt.executeQuery();
		while(rs.next()) {
			int no = rs.getInt("no");
			String sname = rs.getString("name");
			String mobile = rs.getString("mobile");
			String email = rs.getString("email");
			String mdate = rs.getString("mdate");
			Namecard namecard = new Namecard(no,sname,company,mobile,email,mdate);
			matchingCard.add(namecard);
		}
	} catch (SQLException e) {
		e.printStackTrace();
		System.out.println(sql);
	} finally {
		close(rs,pstmt,con);
	}
	return matchingCard;
}

list.jsp 파일을 수정한다.
list.jsp 를 웹브라우저의 주소창에서 처음 방문할 때는 search 가 null 이다.
그런데 list.jsp 파일에서 검색필드에 아무런 값도 넣지 않고 검색 버튼을 클릭했다면 search가 ""(공백문자)이다.

list.jsp

request.setCharacterEncoding("UTF-8");
String search = request.getParameter("search");

NamecardManager mgr=new NamecardManager();
ArrayList<Namecard> list = null;

if (search == null) {
	search = "";
}
if (search.equals("")) {
	list = mgr.getCards();
} else {
	list = mgr.findCard(search);
}

명함관리

list.jsp

write_form.jsp

write.jsp

list.jsp

delete.jsp

NamecardManager.java

list.jsp

modify_form.jsp

modify.jsp

list.jsp

NamecardManager.java

list.jsp

JSP

홈페이지