728x90
반응형
이전 시간까지는 맛집 사이트를 완성하기 위한 데이터저 수집과 메인 페이지 만들기를 완성해 왔다면, 이번 시간에는 나머지 디테일들을 하나씩 완성해 나갔다.
먼저 카테고리를 클릭하면 대략적으로 목록을 볼 수 있는 페이지를 만들었다.
여기서 사진을 클릭해서 들어가면 아래와 같은 화면이 나온다
후기가 들어가는 곳은 그냥 임의로 아무 데이터나 넣어준 것이고, 여기서 집중해서 볼 것은
이미 수집해놓은 사진데이터와 주소 데이터를 잘라와서 띄워주고 있다는 점이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*,com.sist.dao.*"%>
<jsp:useBean id="dao" class="com.sist.dao.FoodDAO"></jsp:useBean>
<%
String cno=request.getParameter("cno");
FoodCategoryVO vo=dao.foodInfoData(Integer.parseInt(cno));
List<FoodVO> list=dao.foodCategoryFoodData(Integer.parseInt(cno));
for(FoodVO fvo:list)
{
String s=fvo.getPoster();
s=s.substring(0,s.indexOf("^"));
fvo.setPoster(s);
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="jumbotron">
<h2 class="text-center"><%=vo.getTitle() %></h2>
<h4 class="text-center"><%=vo.getSubject() %></h4>
</div>
<div class="row">
<%
for(FoodVO fvo:list)
{
%>
<table class="table">
<tr>
<td width=30% class="text-center" rowspan="3">
<a href="main.jsp?mode=2&no=<%=fvo.getNo()%>&cno=<%=cno%>">
<img src="<%=fvo.getPoster() %>" width=200 height=150 class="img-rounded">
</a>
</td>
<td width="70%">
<h3><a href="main.jsp?mode=2&no=<%=fvo.getNo()%>&cno=<%=cno%>"><%=fvo.getTitle() %></a> <span style="color:orange"><%=fvo.getScore() %></span></h3>
</td>
</tr>
<tr>
<td width=70% style="color:gray"><%=fvo.getAddress().substring(0,fvo.getAddress().indexOf("지")) %></td>
</tr>
<tr>
<td width=70% height=40>
<pre style="white-space: pre-wrap;border:none;background-color: white;font-family: 맑은 고딕">영국음식이 이렇게 맛있다니 재방문의사 매우 있음 셰퍼드파이 어디선가 먹어본 맛인데 정말 맛있었다 다음에 가도 셰퍼드파이는 꼭 주문해야지 피쉬앤칩스 비릴줄 알았는데 그런거 없고 부드럽고 맛있었다</pre>
</td>
</tr>
</table>
<%
}
%>
</div>
</body>
</html>사진은 여러장이 있었기 때문에 ^을 단위로 나눠서 구분해서 저장해줬는데, 사진 하나만 따로 저장해 주기 위해서 forEach구문을 써서 담아주고 있다.
그리고 주소 역시 번지 앞까지만 가져와서 대략적인 주소만 띄우고 있는것을 확인해 볼 수 있다.
아래는 세부 화면이 보여지는 detail.jsp이다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="com.sist.dao.*,java.util.*"%>
<%--
main.jsp?mode=2&no=10
===============
detail.jsp?no=10
--%>
<jsp:useBean id="dao" class="com.sist.dao.FoodDAO"></jsp:useBean>
<%
String no=request.getParameter("no");
String cno=request.getParameter("cno");
FoodVO vo=dao.foodDetailData(Integer.parseInt(no));
String s=vo.getAddress();
String ss=s.substring(s.indexOf(" ")+1);
ss=ss.substring(0,ss.indexOf(" "));
System.out.println(ss);
List<FoodVO> list=dao.foodLocation(ss);
// 부평구 경인로 952
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="row">
<table class="table">
<tr>
<%
StringTokenizer st=new StringTokenizer(vo.getPoster(),"^");
while(st.hasMoreTokens())
{
%>
<td><img src="<%=st.nextToken() %>" width=100%></td>
<%
}
%>
</tr>
</table>
</div>
<div class="row">
<div class="col-sm-6">
<table class="table">
<tr>
<td>
<h3><%=vo.getTitle() %> <span style="color:orange"><%=vo.getScore() %></span></h3>
</td>
</tr>
</table>
<table class="table">
<tr>
<th width=20% class="text-right">주소</th>
<td width=80%><%=vo.getAddress().substring(0,vo.getAddress().lastIndexOf("지")) %></td>
</tr>
<tr>
<th width=20% class="text-right">전화</th>
<td width=80%><%=vo.getTel() %></td>
</tr>
<tr>
<th width=20% class="text-right">음식 종류</th>
<td width=80%><%=vo.getType() %></td>
</tr>
<tr>
<th width=20% class="text-right">가격대</th>
<td width=80%><%=vo.getPrice() %></td>
</tr>
<tr>
<th width=20% class="text-right">주차</th>
<td width=80%><%=vo.getParking() %></td>
</tr>
<tr>
<th width=20% class="text-right">영업시간</th>
<td width=80%><%=vo.getTime() %></td>
</tr>
<%
// no 원
if(!vo.getMenu().equals("no"))
{
%>
<tr>
<th width=20% class="text-right">메뉴</th>
<td width=80%>
<ul style="list-style-type: none">
<%
st=new StringTokenizer(vo.getMenu(),"원");
while(st.hasMoreTokens())
{
%>
<li><%=st.nextToken().trim() %>원</li>
<%
}
%>
</ul>
</td>
</tr>
<%
}
%>
</table>
</div>
<div class="col-sm-6">
<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('<%=vo.getAddress().substring(0,vo.getAddress().lastIndexOf("지")) %>', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;"><%=vo.getTitle()%></div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
<div style="height:20px"></div>
<table class="table">
<caption><b>주변 인기 맛집</b></caption>
<%
for(FoodVO fvo:list)
{
%>
<tr>
<td><img src="<%=fvo.getPoster().substring(0,fvo.getPoster().indexOf("^")) %>" width=30 height=30></td>
<td><%=fvo.getTitle() %></td>
<td><%=fvo.getType() %></td>
<td><%=fvo.getPrice() %></td>
</tr>
<%
}
%>
</table>
</div>
<div style="height:30px"></div>
<div class="row">
<table class="table">
<tr>
<td class="text-right">
<a href="#" class="btn btn-sm btn-danger">예약</a>
<a href="#" class="btn btn-sm btn-success">찜하기</a>
<a href="main.jsp?mode=1&cno=<%=cno %>" class="btn btn-sm btn-primary">목록</a>
</td>
</tr>
</table>
<table class="table">
<tr>
<td class="text-right">
맛있다 (<%=vo.getGood() %>) 괜찮다 (<%=vo.getSoso() %>) 별로 (<%=vo.getBad() %>)
</td>
</tr>
</table>
</div>
</div>
</body>
</html>728x90
반응형
'programming > Gukbi' 카테고리의 다른 글
| 국비 교육 65일차 - mvc구조, controller 만들기, xml parsing (0) | 2021.03.30 |
|---|---|
| 국비 교육 64일차 - EL, MVC구조, JSTL (0) | 2021.03.30 |
| 국비 교육 62일차 - session, include 활용 (0) | 2021.03.25 |
| 국비 교육 61일차 - bean, cookie (0) | 2021.03.25 |
| 국비 교육 60일차 - errorPage, 웹 크롤링 (0) | 2021.03.24 |
