i am back !! :: 웹 어플리케이션 04 - 서블릿을 이용한 페이지 출력 (1) (방명록)

방명록 만들어 Boa 요~

오라클에서 방명록에 필요한 테이블을 생성해 주자.

CREATE TABLE guestbook
(
no NUMBER primary key
,writer VARCHAR2(50)
,content VARCHAR2(4000)
,wdate DATE DEFAULT SYSDATE
,pass VARCHAR2(50)
);

web.xml 에 아래와 같이 적어주고

	<servlet>
		<servlet-name>gblist</servlet-name>
		<servlet-class>gb.GBListServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>gblist</servlet-name>
		<url-pattern>/gb/list.do</url-pattern>
	</servlet-mapping>

해당 servlet 을 만들자.

doGet 메소드를 만들고 이제 뿌려질 내용을 작성해야하는데...

일단 기본틀을 html 페이지로 작성을 하여보자 (디자인)

 
<!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=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div{
	width: 800px;
}
ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
li{
	text-align: center;
}
</style>
</head>
<body>
<div style="background-color: #33aaff; height: 20px;">
	<ul style="width: 860px;">
		<li style="float: left; width: 100px;">글번호</li>
		<li style="float: left; width: 300px;">작성자</li>
		<li style="float: left; width: 400px;">작성일</li>
	</ul>
</div>

<div style="background-color: #cccccc; clear: left; padding-bottom: 5px;">
	<ul style="height: 3px; background-color: white;">
	</ul>
	<ul>
		<li style="float: left; width: 100px;">1</li>
		<li style="float: left; width: 300px;">한듣보</li>
		<li style="float: left; width: 400px;">2009/01/06</li>
	</ul>
	<div style="clear: left; text-align: center; padding-top: 8px;">
		내용이 들어가는 부분임뉘
	</div>
</div>

</body>
</html>

사용자 삽입 이미지

일단 기본틀은 완성 되었다.

이제 servlet 단에서 처리되도록 코드를 한줄씩 옮겨준다.

package gb;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GBListServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter pw = response.getWriter();
		pw.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">");
		pw.write("<html>");
		pw.write("<head>");
		pw.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=EUC-KR\">");
		pw.write("<title>Insert title here</title>");
		pw.write("<style type=\"text/css\">");
		pw.write("div{");
		pw.write("	width: 800px;");
		pw.write("}");
		pw.write("ul{");
		pw.write("	list-style-type: none;");
		pw.write("	padding: 0px;");
		pw.write("	margin: 0px;");
		pw.write("}");
		pw.write("li{");
		pw.write("	text-align: center;");
		pw.write("}");
		pw.write("</style>");
		pw.write("</head>");
		pw.write("<body>");
		pw.write("<div style=\"background-color: #33aaff; height: 20px;\">");
		pw.write("	<ul style=\"width: 860px;\">");
		pw.write("		<li style=\"float: left; width: 100px;\">글번호</li>");
		pw.write("		<li style=\"float: left; width: 300px;\">작성자</li>");
		pw.write("		<li style=\"float: left; width: 400px;\">작성일</li>");
		pw.write("	</ul>");
		pw.write("</div>");
		
		pw.write("<div style=\"background-color: #cccccc; clear: left; padding-bottom: 5px;\">");
		pw.write("	<ul style=\"height: 3px; background-color: white;\">");
		pw.write("	</ul>");
		pw.write("	<ul>");
		pw.write("		<li style=\"float: left; width: 100px;\">1</li>");
		pw.write("		<li style=\"float: left; width: 300px;\">한듣보</li>");
		pw.write("		<li style=\"float: left; width: 400px;\">2009/01/06</li>");
		pw.write("	</ul>");
		pw.write("	<div style=\"clear: left; text-align: center; padding-top: 8px;\">");
		pw.write("		내용이 들어가는 부분임뉘");
		pw.write("	</div>");
		pw.write("</div>");
		
		pw.write("</body>");
		pw.write("</html>");
	}
}

아주 고통스러운 작업이 끝났다.

주의 할 것은 html 코드상의 " 앞에 역슬레쉬 (\) 를 붙여주어야한다.

브라우져에서 확인해보면... 아래와 같이 나온다.

사용자 삽입 이미지

아직 한글이 제대로 나오지 않는다.

한글처리를 해준다.

response.setCharacterEncoding("euc=kr");

를 PrintWriter pw = response.getWriter(); 위에 삽입하여준다.

이제 반복되는 부분을 처리해주어야한다.

(방명록 내용들이 들어갈 부분)

예를 들면...

package gb;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GBListServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//한글세팅
		response.setCharacterEncoding("euc-kr");
		
		PrintWriter pw = response.getWriter();
		pw.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">");
		pw.write("<html>");
		pw.write("<head>");
		pw.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=EUC-KR\">");
		pw.write("<title>Insert title here</title>");
		pw.write("<style type=\"text/css\">");
		pw.write("div{");
		pw.write("	width: 800px;");
		pw.write("}");
		pw.write("ul{");
		pw.write("	list-style-type: none;");
		pw.write("	padding: 0px;");
		pw.write("	margin: 0px;");
		pw.write("}");
		pw.write("li{");
		pw.write("	text-align: center;");
		pw.write("}");
		pw.write("</style>");
		pw.write("</head>");
		pw.write("<body>");
		pw.write("<div style=\"background-color: #33aaff; height: 20px;\">");
		pw.write("	<ul style=\"width: 860px;\">");
		pw.write("		<li style=\"float: left; width: 100px;\">글번호</li>");
		pw.write("		<li style=\"float: left; width: 300px;\">작성자</li>");
		pw.write("		<li style=\"float: left; width: 400px;\">작성일</li>");
		pw.write("	</ul>");
		pw.write("</div>");
		
		for(int i=1; i<5 ; i++){
			pw.write("<div style=\"background-color: #cccccc; clear: left; padding-bottom: 5px;\">");
			pw.write("	<ul style=\"height: 3px; background-color: white;\">");
			pw.write("	</ul>");
			pw.write("	<ul>");
			pw.write("		<li style=\"float: left; width: 100px;\">"+i+"</li>");
			pw.write("		<li style=\"float: left; width: 300px;\">한듣보</li>");
			pw.write("		<li style=\"float: left; width: 400px;\">2009/01/06</li>");
			pw.write("	</ul>");
			pw.write("	<div style=\"clear: left; text-align: center; padding-top: 8px;\">");
			pw.write("		내용이 들어가는 부분임뉘");
			pw.write("	</div>");
			pw.write("</div>");
		}
		
		pw.write("</body>");
		pw.write("</html>");
	}
}

요런식으로 for 문안에 반복되는 내용을 넣으면...

그림과 같이 반복되게 나오는데

사용자 삽입 이미지