본문 바로가기
Java 웹 개발

21.10.15 - 웹 개발 입문 45일차

개발이란 2021. 10. 15. 23:32

Q : (과제풀이) product 테이블의 데이터를 조회하여 화면에 출력하시오

<%@page import="web09.beans.ProductDto"%>
<%@page import="java.util.List"%>
<%@page import="web09.beans.ProductDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- 프로그래밍 영역 --%>
<%
	ProductDao productDao = new ProductDao();
	List<ProductDto> list = productDao.select();
%>    

<%-- 화면 영역 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 목록</title>
</head>
<body>

	<h1>상품 목록</h1>

	<%for(ProductDto productDto : list){	 %>
	<h3>
		[<%=productDto.getNo()%>] 
		<%=productDto.getName()%> 
		(<%=productDto.getType()%>) 
		<%=productDto.getPrice()%>원 , 
		<%=productDto.getMadeDate()%> ~ <%=productDto.getExpireDate()%>
	</h3>
	<%} %>

</body>
</html>

 

 

 

웹 - table 태그


table 태그 : 
= 화면에 표를 만들고 싶을 경우 사용하는 태그
= HTML에서 만드는 표는 줄 수와 칸 수를 지정하지 않고 만든다

thead - 테이블 상단 제목 영역
tbody - 테이블 중단 데이터 영역
tfoot - 테이블 하단 영역
tr - 줄 영역
th - 칸 영역(bold + center)
td - 칸 영역(plain + left)

Q. table 예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블(표)</title>
</head>
<body>
	<table border="1">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>과목</th>
				<th>유형</th>
				<th>점수</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>피카츄</td>
				<td>수학</td>
				<td>필기</td>
				<td>50</td>
			</tr>
			<tr>
				<td>2</td>
				<td>라이츄</td>
				<td>수학</td>
				<td>필기</td>
				<td>60</td>
			</tr>
			<tr>
				<td>3</td>
				<td>파이리</td>
				<td>수학</td>
				<td>필기</td>
				<td>55</td>
			</tr>
		</tbody>
		<tfoot>

		</tfoot>
	</table>

</body>
</html>

 

 

 

Q. 시간표 테이블 출력해보기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시간표</title>
</head>
<body>

	<h1>시간표</h1>

	<table border="1" width="400">
		<!-- 테이블 제목 영역 -->
		<thead>
			<tr>
				<th></th>
				<th>월</th>
				<th>화</th>
				<th>수</th>
				<th>목</th>
				<th>금</th>
			</tr>
		</thead>

		<!-- 테이블 데이터 영역 -->
		<tbody align="center">
			<tr>
				<td>1교시</td>
				<td>영어</td>
				<td>국어</td>
				<td>과학</td>
				<td>미술</td>
				<td>기술</td>
			</tr>
			<tr>
				<td>2교시</td>
				<td>도덕</td>
				<td>체육</td>
				<td>영어</td>
				<td>수학</td>
				<td>사회</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

 

 

 

Q. 상품 목록 검색 통합페이지 구현

검색은 어떻게 구현할 것인가?
= JSP는 자바 코드를 사용할 수 있다
= JSP에서 요청정보나 응답정보를 접근할 수 있는가? (내장객체 형태로 제공)
= 요청정보는 request로 접근할 수 있다(이름 변경 불가)

<%@page import="web09.beans.ExamDto"%>
<%@page import="java.util.List"%>
<%@page import="web09.beans.ExamDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- 프로그래밍 코드 --%>
<%
	//입력
	String column = request.getParameter("column");
	String keyword = request.getParameter("keyword");
	
	//처리
	boolean search = column != null && keyword != null;
	
	ExamDao examDao = new ExamDao();
	//List<ExamDto> list = examDao.select() or examDao.select(column, keyword);
	List<ExamDto> list;
	if(search){
		list = examDao.select(column, keyword);
	}
	else{
		list = examDao.select();
	}
%>

<%-- 화면 코드(출력) --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험 정보 목록</title>
</head>
<body>

	<h1>시험 정보 목록</h1>

	<!-- 검색창 -->
	<form action="test06.jsp">
		<fieldset>
			<legend>검색화면</legend>

			<select name="column">
				<option value="student">학생명</option>
				<option value="subject">과목명</option>
				<option value="type">유형</option>
			</select>			

			<input type="search" name="keyword" required>

			<input type="submit" value="검색">
		</fieldset>
	</form>

	<br><br>

	<!-- 표 -->
	<table border="1" width="700">
		<!-- 제목 -->
		<thead>
			<tr>
				<th>번호</th>
				<th>학생명</th>
				<th>과목명</th>
				<th>유형</th>
				<th>점수</th>
			</tr>
		</thead>

		<!-- 데이터 -->
		<tbody align="center">
			<%for(ExamDto examDto : list){ %>
			<tr>
				<td><%=examDto.getExamId()%></td>
				<td><%=examDto.getStudent()%></td>
				<td><%=examDto.getSubject()%></td>
				<td><%=examDto.getType()%></td>
				<td><%=examDto.getScore()%></td>
			</tr>
			<%} %>
		</tbody>
	</table>

</body>
</html>

 

 

 

Q. Product 검색/목록/ 페이지 구현

<%@page import="web09.beans.ProductDto"%>
<%@page import="java.util.List"%>
<%@page import="web09.beans.ProductDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- 입력 --%>    
<%
	String column = request.getParameter("column");
	String keyword = request.getParameter("keyword");
%>

<%-- 처리 --%>
<%
	boolean search = column != null && keyword != null;
	
	ProductDao productDao = new ProductDao();
	List<ProductDto> list;
	if(search){
		list = productDao.select(column, keyword);
	}
	else{
		list = productDao.select();
	}
%>

<%-- 출력 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 조회</title>
</head>
<body>

	<!-- 제목 -->
	<%if(search){ %>
	<h1>상품 검색</h1>
	<%}else{ %>
	<h1>상품 목록</h1>
	<%} %>

	<!-- 검색창 -->
	<form action="test07.jsp">
		<fieldset>
			<legend>검색 조건 설정</legend>

			<select name="column">
				<option value="name">이름</option>
				<option value="type">유형</option>
			</select>

			<input type="search" name="keyword" required>

			<input type="submit" value="검색">

		</fieldset>
	</form>

	<!-- 결과 테이블 -->
	<table border="1" width="600">

		<!-- 테이블 제목 -->
		<thead>
			<tr>
				<th>no</th>
				<th>name</th>
				<th>type</th>
				<th>price</th>
				<th>made</th>
				<th>expire</th>
			</tr>
		</thead>

		<!-- 테이블 데이터 -->
		<tbody align="center">

			<%for(ProductDto productDto : list){ %>
			<tr>
				<td><%=productDto.getNo()%></td>
				<td align="left"><%=productDto.getName()%></td>
				<td><%=productDto.getType()%></td>
				<td><%=productDto.getPrice()%></td>
				<td><%=productDto.getMadeDate()%></td>
				<td><%=productDto.getExpireDate()%></td>
			</tr>
			<%} %>

		</tbody>

	</table>	

</body>
</html>

 

 

 

Q. member 통합 조회 페이지 

<%@page import="web09.beans.MemberDto"%>
<%@page import="java.util.List"%>
<%@page import="web09.beans.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- 입력 : column, keyword --%>
<% 
	String column = request.getParameter("column");
	String keyword = request.getParameter("keyword");
%>

<%-- 처리 : MemberDao --%>    
<%
	boolean search = column != null && keyword != null;
	
	MemberDao memberDao = new MemberDao();
	//List<MemberDto> list = memberDao.list() or memberDao.search(column, keyword);
	List<MemberDto> list;
	if(search){
		list = memberDao.search(column, keyword);
	}
	else{
		list = memberDao.list();
	}
	
	//화면에 출력하기 위한 값을 준비
	String title;
	if(search){
		title = "회원 검색";
	}
	else{
		title = "회원 목록";
	}
%>

<%-- 출력 : HTML 방식 + for, if --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=title%></title>
</head>
<body>

	<!-- 제목 영역 -->
	<h1><%=title%></h1>

	<!-- 검색창 -->
	<form action="test08_2.jsp">
		<select name="column">
			<option value="member_id">아이디</option>
			<option value="member_nick">닉네임</option>
			<option value="member_email">이메일</option>
			<option value="member_phone">전화번호</option>
			<option value="member_grade">등급</option>
		</select>
		<input type="search" name="keyword" required>
		<input type="submit" value="검색">
	</form>

	<!-- 테이블 -->
	<table border="1" width="900">
		<thead>
			<tr>
				<th>ID</th>
				<th>닉네임</th>
				<th>생년월일</th>
				<th>이메일</th>
				<th>전화번호</th>
				<th>등급</th>
				<th>포인트</th>
			</tr>
		</thead>

		<tbody align="center">
			<%for(MemberDto memberDto : list){ %>
			<tr>
				<td><%=memberDto.getMemberId()%></td>
				<td><%=memberDto.getMemberNick()%></td>
				<td><%=memberDto.getMemberBirthDay()%></td>
				<td><%=memberDto.getMemberEmailString()%></td>
				<td><%=memberDto.getMemberPhoneString()%></td>
				<td><%=memberDto.getMemberGrade()%></td>
				<td><%=memberDto.getMemberPoint()%></td>
			</tr>
			<%} %>
		</tbody>
	</table>

</body>
</html>

'Java 웹 개발' 카테고리의 다른 글

21.10.19 - 웹 개발 입문 47일차  (0) 2021.10.19
21.10.18 - 웹 개발 입문 46일차  (0) 2021.10.18
21.10.14 - 웹 개발 입문 44일차  (0) 2021.10.15
21.10.13 - 웹 개발 입문 43일차  (0) 2021.10.13
21.10.12 - 웹 개발 입문 42일차  (0) 2021.10.12

'Java 웹 개발' Related Articles

티스토리툴바