본문 바로가기
Servlet&JSP

Step01_Servlet(표 만들기)

bono.html 2022. 8. 12. 11:18

 

수정 및 생성한 파일
index.html

 

MemberDto

 

우선 기존에 사용하던 데로 MeberDto class를 만들어 줬다.

 

 

MemberServlet

servlet 으로 표 작성

 

package test.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import test.dto.MemberDto;

@WebServlet("/member/list")
public class MemberServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//DB 에서 불러온 회원 목록이라고 가정하자
	      List<MemberDto> list=new ArrayList<>();
	      list.add(new MemberDto(1, "김구라", "노량진"));
	      list.add(new MemberDto(2, "해골", "행신동"));
	      list.add(new MemberDto(3, "원숭이", "상도동"));
	    /*
	     * 회원 목록을 table 형식으로 클라이언트에게 응답해 보세요 
	     */
	      
	    //응답 인코딩 설정
		resp.setCharacterEncoding("utf-8");
		//응답 컨텐츠 설정 
		resp.setContentType("text/html; charset=utf-8");
		//클라이언트의 웹브라우저에 문자열을 출력할 수 있는 객체의 참조값 얻어내기
		PrintWriter pw = resp.getWriter();
		pw.println("<!doctype html>");
		pw.println("<html>");
		pw.println("<head>");
		pw.println("<meta charset='utf-8'>");
		pw.println("<title>회원목록 페이지</title>");
		pw.println("</head>");
		pw.println("<body>");
		pw.println("<p>회원목록 페이지입니다</p>");
		
		pw.println("<table id=\"customers\">");
			pw.println("<caption>회원목록</caption>");
			pw.println("<thead>");
				pw.println("<tr>");
					pw.println("<th>번호</th>");
					pw.println("<th>이름</th>");
					pw.println("<th>제목</th>");
				pw.println("</tr>");
			pw.println("</thead>");
			pw.println("<tbody>");
			for(MemberDto tmp:list) {
				pw.println("<tr>");
					pw.println("<td>"+tmp.getNum()+"</td>");
					pw.println("<td>"+tmp.getName()+"</td>");
					pw.println("<td>"+tmp.getAddr()+"</td>");
				pw.println("</tr>");
		    }
			pw.println("</tbody>");
		pw.println("</table>");
		pw.println("<br>");
		pw.println("<a href=\"/Step01_Servlet/\">돌아가기</a>");
		pw.println("</body>");
		pw.println("</html>");
		//pw.flush();//방출
		pw.close();//닫아주기
	}
}

MemberServlet

 

 

 

/member/list.jsp (필자작성)

jsp 로 작성하였고 css를 추가하였다. html에 for문을 사용했는데 jsp에서 html에 자바를 작성하는 법을 익혀놔야한다.

 

<%@page import="java.util.ArrayList"%>
<%@page import="test.dto.MemberDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	List<MemberDto> list=new ArrayList<>();
	list.add(new MemberDto(1, "김구라", "노량진"));
	list.add(new MemberDto(2, "해골", "행신동"));
	list.add(new MemberDto(3, "원숭이", "상도동"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원목록 페이지</title>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>
	<table id="customers">
		<caption style="margin:20px; font-size:18px;">회원목록</caption>
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>제목</th>
			</tr>
		</thead>
		<tbody>
			<%for(MemberDto tmp:list) {%>
				<tr>
					<td><%= tmp.getNum()%></td>
					<td><%= tmp.getName()%></td>
					<td><%= tmp.getAddr()%></td>
				</tr>
	      	<%}%>
		</tbody>
	</table>
	<br>
	<a href="/Step01_Servlet/">돌아가기</a>
</body>
</html>

 

 

/member/listTeacher.jsp (선생님 작성)

/member/list.jsp과 마찬가지로 jsp로 작성했고 다른점이 있다면 bootstrap을 사용했다.

 

<%@page import="java.util.ArrayList"%>
<%@page import="test.dto.MemberDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
   //DB 에서 불러온 회원 목록이라고 가정하자
   List<MemberDto> list=new ArrayList<>();
   list.add(new MemberDto(1, "김구라", "노량진"));
   list.add(new MemberDto(2, "해골", "행신동"));
   list.add(new MemberDto(3, "원숭이", "상도동"));
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/list.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
   <h1>회원 목록 입니다.</h1>
   <table class="table table-striped">
      <thead class="table-dark">
         <tr>
            <th>번호</th>
            <th>이름</th>
            <th>주소</th>
         </tr>
      </thead>
      <tbody>
      <%for(MemberDto tmp:list){ %>
         <tr>
            <td><%=tmp.getNum() %></td>
            <td><%=tmp.getName() %></td>
            <td><%=tmp.getAddr() %></td>
         </tr>
      <%} %>
      </tbody>
   </table>
</div>
</body>
</html>

 

 

 

저작자표시

'Servlet&JSP' 카테고리의 다른 글

Step02_DB (jsp DB연동하기, DbcpBean)  (0) 2022.08.12
Step01_Servlet(form연결하기, get post 비교, Servlet jsp 비교)  (0) 2022.08.12
Step01_Servlet(jsp영역, 주석, 친구목록, ArrayList, 반복문)  (0) 2022.08.11
Step01_Servlet(오늘의 운세2, bootstrap 사용, jsp)  (0) 2022.08.11
Step01_Servlet(HttpServlet 활용 예제(오늘의 운세 만들기))  (0) 2022.08.10

'Servlet&JSP' Related Articles

티스토리툴바