output/JSP
[수업] 망고플레이트(카테고리, 상세보기) 구현
hs_developer
2022. 7. 18. 17:09
앞으로 JSP 제작 시 lib 폴더에 항상 첨부해야 할 jars
dbconn.jar
0.00MB
ojdbc8.jar
3.97MB
servlet-api.jar
0.27MB
DAO + JSP 합친 것.
DAO 파일은 따로 분리해서 작성하는 게 낫다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*, java.sql.*, com.sist.conn.*" %>
<%!
/* DAO */
private Connection conn;
private PreparedStatement ps;
private DBConnection dbconn = DBConnection.newInstance();
public List<String> getEnameData()
{
List<String> list = new ArrayList<String>();
try
{
conn = dbconn.getConnection();
ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
String sql = "SELECT ename FROM emp";
while(rs.next())
{
list.add(rs.getString(1));
}
rs.close();
}
catch(Exception e)
{
e.printStackTrace();
}
finally
{
dbconn.disConnection(ps);
}
return list;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
List<String> list = getEnameData();
%>
<ul>
<%
for(String name : list)
{
%>
<li><%= name %></li>
<%
}
%>
</ul>
</body>
</html>
include
==다른 파일을 추가해 사용
content.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>Content.jsp (내용 출력)</h1>
</center>
</body>
</html>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>Footer.jsp (회사정보 출력)</h1>
</center>
</body>
</html>
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>Header.jsp (로고, 검색창 출력)</h1>
</center>
</body>
</html>
menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>Menu.jsp (메뉴 출력)</h1>
</center>
</body>
</html>
main.jsp (출력)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<table border="1" width="900" height="700">
<tr>
<td colspan="2" height="100"><%@ include file="header.jsp" %></td>
</tr>
<tr>
<td width="200" height="500"><%@ include file="menu.jsp" %></td>
<td width="700" height="500"><%@ include file="content.jsp" %></td>
</tr>
<tr>
<td colspan="2" height="100"><%@ include file="footer.jsp" %></td>
</tr>
</table>
</center>
</body>
</html>
입력 값을 보내고 받는 기능 == request.getParameter();
input.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>개인정보</h1>
<form method="post" action="output.jsp">
<table boder=1 width=350>
<tr>
<td width=30%>이름</td>
<td width=70%>
<input type=text name=name size=15>
</td>
</tr>
<tr>
<td width=30%>성별</td>
<td width=70%>
<!-- value 값을 전송 -->
<input type=radio name=sex value="남자" checked>남자
<input type=radio name=sex value="여자">여자
</td>
</tr>
<tr>
<td width=30%>직위</td>
<td width=70%>
<select name=job>
<option>부장</option>
<option>과장</option>
<option>대리</option>
<option>사원</option>
</select>
</td>
</tr>
<tr>
<td width=30%>소개</td>
<td width=70%>
<textarea rows="5" cols="20" name="content"></textarea>
</td>
</tr>
<tr>
<td width=30%>취미</td>
<td width=70%>
<input type="checkbox" value="운동" name="hobby">운동
<input type="checkbox" value="등산" name="hobby">등산
<input type="checkbox" value="여행" name="hobby">여행
<input type="checkbox" value="게임" name="hobby">게임
<input type="checkbox" value="낚시" name="hobby">낚시
</td>
</tr>
<tr>
<td align="center" colspan="2">
<!-- <input type=submit value="전송"> --> <!-- 옛날 방식 -->
<button>전송</button> <!-- 요새 방식 -->
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
output.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 사용자가 보낸 데이터는 request에 담겨서 들어온다
// 한글 변환 → 디코딩
request.setCharacterEncoding("UTF-8");
String name= request.getParameter("name");
String sex= request.getParameter("sex");
String job= request.getParameter("job");
String content= request.getParameter("content");
String[] hobby= request.getParameterValues("hobby"); /* 배열로 받을 때 */
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
이름: <%=name %><br>
성별: <%=sex %><br>
직위: <%=job %><br>
소개: <%=content %><br>
취미:
<ul>
<% /* try-catch를 써야 체크 박스 표시가 없어도 에러가 안 뜬다 */
try
{
for(int i=0; i<hobby.length; i++)
{
%>
<li><%= hobby[i] %></li>
<%
}
}
catch(Exception ex)
{
%>
<font color=red>취미가 없습니다!!</font>
<%
}
%>
</ul>
</body>
</html>
망고 플레이트 웹사이트 실제 구현 하기
== 맛집 카테고리 클릭해서 맛집 상세보기로 이동하는 기능 구현
food_category
food_house
food_location
다음 sql 파일 리스트 DB에 저장.
VO
카테고리 (food_category)
SQL> desc food_category
이름 널? 유형
----------------------------------------- -------- ----------------------------
CNO NOT NULL NUMBER
TITLE NOT NULL VARCHAR2(1000)
SUBJECT NOT NULL VARCHAR2(1000)
POSTER NOT NULL VARCHAR2(200)
LINK NOT NULL VARCHAR2(500)
categoryVO.java
package com.sist.dao;
public class CategoryVO {
private int cno;
private String title, subject, poster;
public int getCno() {
return cno;
}
public void setCno(int cno) {
this.cno = cno;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getSubject() {
return subject;
}
public void setSubject(String subject) {
this.subject = subject;
}
public String getPoster() {
return poster;
}
public void setPoster(String poster) {
this.poster = poster;
}
}
상세보기 (food_house)
SQL> desc food_house
이름 널? 유형
----------------------------------------- -------- ----------------------------
FNO NOT NULL NUMBER
NAME NOT NULL VARCHAR2(1000)
SCORE NOT NULL NUMBER(2,1)
ADDRESS NOT NULL VARCHAR2(1000)
TEL NOT NULL VARCHAR2(20)
TYPE NOT NULL VARCHAR2(50)
PRICE VARCHAR2(60)
TIME VARCHAR2(60)
PARKING VARCHAR2(60)
MENU VARCHAR2(1000)
HIT NUMBER
CNO NOT NULL NUMBER
FoodVO.java
package com.sist.dao;
public class FoodVO {
private int fno, hit, cno;
private String name, address, tel, type, price, time, parking, menu, poster;
private double score;
public int getFno() {
return fno;
}
public void setFno(int fno) {
this.fno = fno;
}
public int getHit() {
return hit;
}
public void setHit(int hit) {
this.hit = hit;
}
public int getCno() {
return cno;
}
public void setCno(int cno) {
this.cno = cno;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getParking() {
return parking;
}
public void setParking(String parking) {
this.parking = parking;
}
public String getMenu() {
return menu;
}
public void setMenu(String menu) {
this.menu = menu;
}
public String getPoster() {
return poster;
}
public void setPoster(String poster) {
this.poster = poster;
}
public double getScore() {
return score;
}
public void setScore(double score) {
this.score = score;
}
}
DAO
FoodDAO.java
package com.sist.dao;
import java.sql.*;
import java.util.*;
import com.sist.conn.DBConnection;
public class FoodDAO {
private Connection conn;
private PreparedStatement ps;
DBConnection dbconn= DBConnection.newInstance();
public List<CategoryVO> categoryData(int no)
{
List<CategoryVO> list= new ArrayList<CategoryVO>();
int start= 0;
int end= 0;
if(no == 1)
{
start= 1;
end= 12;
}
else if(no == 2)
{
start= 13;
end= 18;
}
else if(no == 3)
{
start= 19;
end= 30;
}
try
{
conn= dbconn.getConnection();
String sql= "SELECT cno, title, subject, poster "
+ "FROM food_category "
+ "WHERE cno BETWEEN ? AND ?";
ps= conn.prepareStatement(sql);
ps.setInt(1, start);
ps.setInt(2, end);
ResultSet rs= ps.executeQuery();
while(rs.next())
{
CategoryVO vo= new CategoryVO();
vo.setCno(rs.getInt(1));
vo.setTitle(rs.getString(2));
vo.setSubject(rs.getNString(3));
vo.setPoster(rs.getString(4));
list.add(vo);
}
rs.close();
}
catch(Exception ex)
{
ex.printStackTrace();
}
finally
{
dbconn.disConnection(ps);
}
return list;
}
public List<FoodVO> houseData(int cno)
{
List<FoodVO> list= new ArrayList<FoodVO>();
try
{
conn= dbconn.getConnection();
String sql= "SELECT fno, name, poster, address, type, tel, score "
+ "FROM food_house "
+ "WHERE cno = ?";
ps= conn.prepareStatement(sql);
ps.setInt(1, cno);
ResultSet rs= ps.executeQuery();
while(rs.next())
{
FoodVO vo= new FoodVO();
vo.setFno(rs.getInt(1));
vo.setName(rs.getString(2));
vo.setPoster(rs.getString(3));
vo.setAddress(rs.getString(4));
vo.setType(rs.getString(5));
vo.setTel(rs.getString(6));
vo.setScore(rs.getDouble(7));
list.add(vo);
}
rs.close();
}
catch(Exception ex)
{
ex.printStackTrace();
}
finally
{
dbconn.disConnection(ps);
}
return list;
}
}
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*, com.sist.dao.*" %>
<%
FoodDAO dao= new FoodDAO();
String no= request.getParameter("no");
if(no==null)
{
no= "1";
}
List<CategoryVO> list= dao.categoryData(Integer.parseInt(no));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.cate_list{
width: 960px;
margin-top: 50px;
}
.link{
width: 700px;
margin: 0px auto;
margin-top: 50px;
}
a{
color: black;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
.cate{
width: 300px;
text-align: center;
display: block;
float: left;
}
.title{
margin-top: 20px;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="cate_list">
<div class="link">
<a href="list.jsp?no=1">믿고 보는 맛집 리스트</a>
<a href="list.jsp?no=2">지역별 인기 맛집</a>
<a href="list.jsp?no=3">메뉴별 인기 맛집</a>
</div>
</div>
<div class="cate_list">
<%
for(CategoryVO vo:list)
{
%>
<a href="food_list.jsp?cno=<%=vo.getCno() %>" class="cate">
<img src="<%= vo.getPoster() %>" width="280" height="200">
<div class="title"><%=vo.getTitle() %></div>
</a>
<%
}
%>
</div>
</body>
</html>
food_list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import = "java.util.*, com.sist.dao.*" %>
<%
String cno= request.getParameter("cno");
int i= Integer.parseInt(cno);
FoodDAO dao= new FoodDAO();
List<FoodVO> list= dao.food_category(i);
for(FoodVO vo:list)
{
String poster= vo.getPoster();
poster= poster.substring(0, poster.indexOf("^"));
vo.setPoster(poster);
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<table border="1" width="600">
<tr>
<td align="center">
<%
for(FoodVO vo:list)
{
%>
<table>
<tr>
<td width="30%" align="center" rowspan="4">
<img src=<%= vo.getPoster() %>" width=100%>
</td>
<td width="70"%>
<%= vo.getName() %>
</td>
</tr>
<tr>
<td width="70%">
<%= vo.getAddress() %>
</td>
</tr>
<tr>
<td width="70%">
<%= vo.getTel() %>
</td>
</tr>
<tr>
<td width="70%">
<%= vo.getType() %>
</td>
</tr>
</table>
<%
}
%>
</td>
</tr>
</table>
</center>
</body>
</html>
