그러면 이처럼 굉장히 마음에 안드는 화면이 나타날 것이다.
더구나 이동할때 페이지 전체가 이동하는 것을 볼 수 있다.
하지만 main.jsp를 인클루드 지시어를 활용해서 다시 작성해보자.
추가로 top.jsp와 bottom.jsp,company 파일을 생성한다.
main.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ include file="top.jsp"%>
<h2>저희 홈페이지에 오신것을 환영합니다.</h2>
<ul>
<li><a href="student.jsp">기본관리페이지</a></li>
</ul>
<%@ include file="bottom.jsp"%>
top.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<title>홈페이지</title>
</head>
<body>
<!-- 테이블만들기 -->
<table border=1 width=800 height=600>
<tr height=10%> <!-- 전체를 3등분이아니라 위아래는 좁게 가운대는 넓게 유동적으로 하기위해서 -->
<td colspan=2 align="center">
<a href="main.jsp">main</a>|로그인|회원가입|
<a href="company.jsp">회사소개</a>
</td>
</tr>
<tr height=80%>
<td width=15%>tree/view 메세지</td>
<td width=85%>
bottom.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
</td>
</tr>
<tr height=10%>
<td colspan=2 align="center">
회사규약
</td>
</tr>
</table>
</body>
</html>
company.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ include file="top.jsp" %>
<h3>안녕하세요 블레이드앤소울 회사입니다. 컨텐츠없어서 죽겠죠? 미치겠죠?</h3>
<%@include file="bottom.jsp" %>
이렇게 작성하고
main.jsp에서 실행을 해보면은
<그림생략>
* 템플릿페이지 : 링크걸기 <a href=""> </a>를 통해
주소가 바뀌지않고 페이지만 이동
역시 똑같이 이와같은 창이 출력되고, 회사소개를 누르면
페이지가 전체이동하는것이 아니라 top.jsp, bottom,jsp에서 지정해 두었던 기본 프레임을 유지하면서
안의 내용만 변화하는 것을 볼 수 있다.
이제 인클루드 지시자의 쓰임을 확실히 알았을 것이다.
다음으로 main 페이지에서 "기본관리페이지"를 클릭하면 이동하고, 데이터관리를 하게끔 만들어보자.
먼저, mysql에 기본 table를 생성한다.
create table student (id varchar(10), name varchar(10), cname varchar(20));
마찬가지로 기본관리를 하기위해 일반.jsp 파일을 생성한다
등록, 삭제, 찾기, 목록보여주기 순으로 간단하게 작성해보자.
student.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!-- student.jsp -->
<html>
<head>
<title>기본관리</title>
</head>
<body>
<div align="center">
<hr color="green" width=400>
<h2>기본 등 록 페 이 지</h2>
<hr color="green" width=400>
<form name="insert" action="insert.jsp" method="post">
<table border=1>
<tr>
<td align="center">
아이디 : <input type="text" name="id"><br>
기본명 : <input type="text" name="name"><br>
기본명 : <input type="text" name="cname"><br>
<input type="submit" value="입력">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
<hr color="green" width=400>
<h2>기본 삭 제 페 이 지</h2>
<hr color="green" width=400>
<form name="f" action="delete.jsp" method="post">
<table border=1>
<tr>
<td align="center">
아이디 : <input type="text" name="id">
<input type="submit" value="삭제">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
<hr color="green" width=400>
<h2>기본 찾 기 페 이 지</h2>
<hr color="green" width=400>
<form name="f" action="find.jsp" method="post">
<table border=1>
<tr>
<td align="center">
기본명 : <input type="text" name="name">
<input type="submit" value="찾기">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
<hr color="green" width=400>
<h2>기본 목록보기</h2>
<hr color="green" width=400>
<form name="f" action="list.jsp" method="post">
<table border=1>
<tr>
<td align="center">
<input type="submit" value="목록보기">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<그림생략>
이와같은 페이지가 뜰 것이다.
기본 데이터를 등록/삽입해보자.
insert.jsp 파일생성 -> jdbc 연결부분을 잘 고찰했다면 이해도가 빠르다
작성순서
1. 사용자가 입력한 id, name, cname을 받아온다.
2. 유효성 검사를 한다.
3. DB에 연결하여 쿼리문을 전송한다.
4. 그 결과값을 받아와서 성공하면 list.jsp(목록보기)로 보내고 실패하면 student.jsp(관리입력부분)으로 보낸다.
5. DB와 연결한 객체를 닫아준다.
insert.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<!-- insert.jsp -->
<% //1번
request.setCharacterEncoding("EUC-KR"); //한글이 안깨지게
String id = request.getParameter("id");
String name = request.getParameter("name");
String cname = request.getParameter("cname");
//2번
if (id==null || name==null || cname==null || id.trim().equals("") ||
name.trim().equals("") || cname.trim().equals(""))
{
%>
<script type="text/javascript">
alert("데이타는 모두 입력해 주셔야 합니다.!!");
history.back(); //뒤로가기
</script>
<% return;
}
%>
<% //3번
Class.forName("org.gjt.mm.mysql.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/jsp0119";
String user = "root";
String pass = "0575";
Connection con = DriverManager.getConnection(url, user, pass);
String sql = "insert into student value(?,?,?)";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, id);
ps.setString(2, name);
ps.setString(3, cname);
int result = ps.executeUpdate();
//4번
if (result>0)
{
%>
<script type="text/javascript">
alert("기본추가에 성공!! 기본 전체보기 페이지로 이동합니다.");
location.href="list.jsp";
</script>
<% }
else
{
%>
<script type="text/javascript">
alert("기본 등록 실패. 기본관리페이지로 이동!!");
location.href="student.jsp";
</script>
<% }
%>
<%//5번
ps.close();
con.close();
%>
소스설명)
하나하나 보면은
sql 쿼리문을 쓸 것이기 때문에 <%@ page import="java.sql.*" %> -> 페이지지시어
으로 써준다.
한글받아오는데 깨지지 않게 하기위해서
request.setCharacterEncoding("EUC-KR");
구문을 넣어준다.
student 테이블에 입력한 필드명을 문자열 객체로 가져온다.
String id = request.getParameter("id");
String name = request.getParameter("name");
String cname = request.getParameter("cname");
여기까지가 1. 사용자가 입력한 id, name, cname을 받아온다. 에 해당한다.
2번. 유효성 검사를 시행하는데, 각각의 필드값이 공백이거나 널값이면 데이터를 넘겨주지않고
다시 입력하게끔 한다.
if (id==null || name==null || cname==null || id.trim().equals("") ||
name.trim().equals("") || cname.trim().equals(""))
{
%>
<script type="text/javascript">
alert("데이타는 모두 입력해 주셔야 합니다.!!");
history.back(); //뒤로가기
</script>
<%
return;
}
** 뒤로가기 **
1번. 자바스트립트에서는
<script type="text/javascript">
history.back(); //뒤로가기
</script>
2번. 자바스크립트에서는
<script type="text/javascript">
location.href="이동경로페이지.jsp";
</script>
3번. 자바코드에서는
if(name==null|| name.trim().equals(""))
{
response.sendRedirect("이동경로페이지.jsp");
return;
}
요런식으로 써주면된다.
다시 돌아와서
3번. DB에 연결하여 쿼리문을 전송한다. -> 이 부분은 지난 jdbc에서 했던 작업과 동일하다.
//3번
Class.forName("org.gjt.mm.mysql.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/jsp0119";
String user = "root";
String pass = "0575";
Connection con = DriverManager.getConnection(url, user, pass);
String sql = "insert into student value(?,?,?)";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, id);
ps.setString(2, name);
ps.setString(3, cname);
int result = ps.executeUpdate();
4번. 그 결과값을 받아와서 성공하면 list.jsp로 보내고 실패하면 student.jsp로 보낸다.
//4번
if (result>0)
{
%>
<script type="text/javascript">
alert("기본 등록 성공. 기본목록페이지로 이동!!");
location.href="list.jsp";
</script>
<%
}
else
{
%>
<script type="text/javascript">
alert("기본 등록 실패. 기본관리페이지로 이동!!");
location.href="student.jsp";
</script>
<%
}
%>
<% %> 안은 자바소스, 밖은 html소스 이유는 ->
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
5번. DB와 연결한 객체를 닫아준다.
<% //5번
ps.close();
con.close();
%>
요렇게 ResultSet, Connection 객체를 닫아주면 되겠다.
아직은 모두 입력후 [입력]버튼을 눌러도 오류가 난다. 목록을 보여주는 list.jsp 를 만들지 않았기 때문이다.
list.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR" import="java.sql.*"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<title>기본목록</title>
</head>
<body>
<div align="center">
<hr color="green" width=400>
<h2>기본 목 록 보 기</h2>
<hr color="green" width=400>
<table border=1 width=400>
<tr>
<th>아이디</th>
<th>기본명</th>
<th>기본명</th>
</tr>
<%
Class.forName("org.gjt.mm.mysql.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/jsp0119";
String user = "root";
String pass = "0575";
Connection con = DriverManager.getConnection(url, user, pass);
String sql = "select * from 기본";
PreparedStatement ps = con.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
while(rs.next()){
String id = rs.getString(1);
String name = rs.getString(2);
String cname = rs.getString(3);
%>
<tr>
<td><%=id%></td>
<td><%=name%></td>
<td><%=cname%></td>
</tr>
<% } %>
</table>
</div>
</body>
</html>
<%
rs.close();
ps.close();
con.close();
%>
여기까지 파일을 만들고 기본.jsp에서 실행하여 데이터를 입력하면
목록페이지(list.jsp)로 이동되어 이렇게 나타내어 지게된다.
<그림생략>
만일 데이터를 다 입력하지 않고 [입력]버튼을 누르면?
오류메세지출력 후 다시 처음 입력페이지(student.jsp)로 돌아가게끔
또한 목록보기도 list.jsp와 연결되어 현재 등록된 db상태를 볼 수 있게 했다.
삭제하기를 구현해보자."기본명" 기준으로 삭제를 진행해 보겠다.
delete.jsp) __ <1차>
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*" %>
<!-- delete.jsp -->
<%
request.setCharacterEncoding("EUC-KR");
String name = request.getParameter("name");
if (name == null || name.trim().equals("")){
response.sendRedirect("student.jsp");
return;
}
Class.forName("org.gjt.mm.mysql.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/jsp0119";
String user = "root";
String pass = "0575";
Connection con = DriverManager.getConnection(url, user, pass);
String sql = "delete from student where name=?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, name);
int result = ps.executeUpdate();
if (result>0)
{
%>
<script type="text/javascript">
alert("기본삭제 성공!!");
location.href="list.jsp";
</script>
<%
}
else
{
%>
<script type="text/javascript">
alert("삭제 실패");
location.href="student.jsp";
</script>
<%
}
%>
<%
ps.close();
con.close();
%>
삭제에 성공하면 성공 메세지가 출력이 되고, 만약에 잘못된 값을 입력하거나 데이터가 일치하지 않으면
위와같은 alter 메세지를 출력한다.
또한 아래와 같이 데이터가 삭제되어 그 결과를 보여준다 (list.jsp)
<그림생략>
찾기를 구현해보자.
역시 "기본명(name)" 기준으로 찾기를 진행해보겠다.
find.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ page import="java.sql.*"%>
<!-- find -->
<%
request.setCharacterEncoding("EUC-KR");
String name = request.getParameter("name");
if(name==null || name.trim().equals(""))
{
response.sendRedirect("student.jsp");
return;
}//if-------------
Class.forName("org.gjt.mm.mysql.Driver");
String url="jdbc:mysql://127.0.0.1:3306/jsp0119";
String user="root";
String pass="0575";
Connection con=DriverManager.getConnection(url,user,pass);
String sql="SELECT count(*) FROM student WHERE name=?";
PreparedStatement ps=con.prepareStatement(sql);
ps.setString(1,name);
ResultSet rs = ps.executeQuery();
rs.next();
int count= rs.getInt(1);
rs.close();
ps.close();
%>
<body>
<div align=center>
<hr color=navy width=400>
<h2>기본 찾 아 보 기</h2>
<hr color=navy width=400>
<table width=400 border=1>
<tr bgcolor=#CCFF00>
<th width=100>아이디</th>
<th width=100>기본명</th>
<th width=200>기본명</th>
</tr>
<!-- ----------------------------- -->
<%
if(count>0)
{
String sql2="SELECT * FROM student WHERE name=?";
ps = con.prepareStatement(sql2);
ps.setString(1, name);
rs = ps.executeQuery();
while(rs.next())
{
String id = rs.getString(1);
String name2 = rs.getString(2);
String cname = rs.getString(3);
%>
<tr>
<td align="center"><%=id%></td>
<td align="center"><%=name2%></td>
<td align="center"><%=cname%></td>
</tr>
<%
}//while------
}
else
{
out.println("<tr><td colspan=3>");
out.println("<b>"+name+"정보는 없습니다.</b>");
out.println("</td></tr>");
}
%>
<!-- ----------------------------- -->
</table>
</div>
</body>
<% //5. 연결된 자원 반납.
rs.close();
ps.close();
con.close();
%>
검색을 하면 이와같은 화면이 출력된다.
<그림생략>
검색하는 값이 일치하지 않으면 요렇게~!
나머지는 insert,delete와 비슷하고
String sql="SELECT count(*) FROM student WHERE name=?";
PreparedStatement ps=con.prepareStatement(sql);
ps.setString(1,name);
ResultSet rs = ps.executeQuery();
rs.next();
int count= rs.getInt(1);
rs.close();
ps.close();
왜 sql구문을 count(*)를 썻느냐?
String sql="SELECT count(*) FROM student WHERE name=?";
식으로 작성을 하면 name에 따라 조건에 부합한 레코드갯수가 몇개인지를 리턴해준다.
예를들면) 이런식으로 select 구문을 시행하면 rows(행)의 갯수가 출력되는 것을 볼 수 있다.
sql구문을 db에보내고 그 db에 대한 값을 받아와
if문을 통해 count값 비교한다. count가 1 이상이면 데이터값이 있는거고
count가 0이면 데이터값이 없는것.
while문안에 들어간 구문은
<tr>
<td align="center"><%=id%></td>
<td align="center"><%=name2%></td>
<td align="center"><%=cname%></td>
</tr>
반복할때마다 한 행이 생성되면서 해당값이 출력되도록 하였다.
만약 데이터값이 없으면 colspan으로 열을 합치고 해당하는 검색어를 없다표시.
else
{
out.println("<tr><td colspan=3>");
out.println("<b>"+name+"책정보는 없습니다.</b>");
out.println("</td></tr>");
}
