영보의 SystemOut.log

[Web] JSTL , CSS 이용하여 레시피 그리드 목록 출력-(2) 본문

Web

[Web] JSTL , CSS 이용하여 레시피 그리드 목록 출력-(2)

영보로그 2020. 10. 7. 17:51
반응형

# chef.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="com.sist.model.*"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <jsp:useBean id="model" class="com.sist.model.RecipeModel"/>
 <%
    model.chefListData(request);
 %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto; /*가운데 정렬*/
   width: 900px;
}
h1 {
   text-align: center;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['셰프명', '레시피'],
          <c:forEach var="vo" items="${cList}">
           ['<c:out value="${vo.chef}"/>', <c:out value="${vo.recipeCount}"/>],
          </c:forEach>
        ]);
 
        var options = {
          title: '셰프 순위',
          is3D: true,
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
   <div class="container">
    <div class="row">
      <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
    </div>
      <div class="row">
         <h1>Chef 목록</h1>
         <%--목록 출력 --%>
         <table class="table">
            <tr>
               <td>
               <c:forEach var="vo" items="${list }">
                  <table class="table table-striped">
                     <tr>
                        <td width=35% rowspan="2" class="text-center">
                           <img src="${vo.poster }" class="img-circle" width=60 height=60>
                        </td>
                        <td colspan="4" style="font-size:13pt; color:#FC6"><b>
                         <a href="chef_detail.jsp?chef_name=${vo.chef }"> ${vo.chef }</a>
                        </b></td>
                     </tr>
                     <tr>
                        <td class="text-center">${vo.mem_cont1 }</td>
                        <td class="text-center">${vo.mem_cont3 }</td>
                        <td class="text-center">${vo.mem_cont7 }</td>
                        <td class="text-center">${vo.mem_cont2 }</td>
                     </tr>
                  </table>
               </c:forEach>
            </td>
            </tr>
         </table>
      </div>
      <div class="row">
          <div class="text-center">
              <a href="chef.jsp?page=${curpage>1?curpage-1:curpage }" class="btn btn-sm btn-primary">이전</a>
               ${curpage } page / ${totalpage } pages
              <a href="chef.jsp?page=${curpage<totalpage?curpage+1:curpage }" class="btn btn-sm btn-danger">다음</a>
          </div>
      </div>
   </div>
</body>
</html>
 cs

- 셰프 목록이 출력

- 받아보는 숫자가 가장 많은 셰프 비율을 위의 차트로 출력하게 함

- ${vo.chef}로 안쓰고 <c:out value=~~~~>를 쓰는 이유는 제이쿼리에서 키워드 중복을 방지하기 위해서.

 

 

# chef_detail.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="com.sist.model.*"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>   
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<jsp:useBean id="model" class="com.sist.model.RecipeModel"/>
<%
    model.chefRecipeData(request);
%> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto; /*가운데 정렬*/
}
h1 {
   text-align: center;
}
</style>
</head>
<body>
    <div class="container-fluid">
     <div class="row">
      <h1>${param.chef_name }님의 레시피 목록</h1>
      <c:forEach var="vo" items="${list }">
           <div class="col-md-3">
            <div class="thumbnail">
                <img src="${vo.poster }" alt="Lights" style="width:100%">
                <div class="caption">
                  <p>${fn:length(vo.title)>20?fn:substring(vo.title,0,20)+="...":vo.title }</p>
                  <p>${vo.chef }</p>
                  <%--
                          ${fn:메소드() fn:메소드}
                   --%>
                </div>
            </div>
           </div>
         </c:forEach>
     </div>
    </div>
</body>
</html>
 cs

- chef.jsp 를 실행시켜서 셰프 이름을 클릭해서 나오는 상세페이지. [효썸]이 올린 레시피를 보여준다.

 

 

 

 

# recipe.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="com.sist.model.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%-- RecipeModel을 메모리 할당  --%>
<jsp:useBean id="model" class="com.sist.model.RecipeModel"/>
<%
      model.recipeListData(request); // 처리후에 결과값을 넘겨 받는다 
      /*
           ${}  ==> request.getAttribue(),session.getAtrribute() 
           === 일반 변수는 사용할 수 없다 
      */
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto; /*가운데 정렬*/
   /*width:1024px;*/
}
h1 {
     text-align: center;
}
</style>
</head>
<body>
   <div class="container-fluid">
     <div class="row">
       <h1>10000개의 레시피</h1>
         <c:forEach var="vo" items="${list }">
           <div class="col-md-3">
            <div class="thumbnail">
                <img src="${vo.poster }" alt="Lights" style="width:100%">
                <div class="caption">
                  <p>${vo.title }</p>
                  <p>${vo.chef }</p>
                </div>
            </div>
           </div>
         </c:forEach>
    </div>
     <div class="row">
         <div class="text-right">
          <a href="recipe.jsp?page=${curpage>1?curpage-1:curpage }" class="btn btn-sm btn-info">이전</a>
              ${curpage } page/ ${totalpage } pages
          <a href="recipe.jsp?page=${curpage<totalpage?curpage+1:curpage }" class="btn btn-sm btn-success">다음</a>
         </div>
     </div>
   </div>
</body>
</html>
 
 cs

- 위의 chef.jsp와 비슷한 동작 구조다.

 

 

developers.google.com/chart/interactive/docs/gallery/piechart

 

Visualization: Pie Chart  |  Charts  |  Google Developers

Overview A pie chart that is rendered within the browser using SVG or VML. Displays tooltips when hovering over slices. Example google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { va

developers.google.com

차트 모양은 여기서 따왔습니다.

도움 되시길 바랍니다 :-)

반응형
저작자표시

'Web' 카테고리의 다른 글

[Web] JSTL , CSS 이용하여 레시피 그리드 목록 출력-(1)  (0) 2020.10.07
[Web] JSTL 속성 / JSTL 태그  (0) 2020.10.07
[WEB] GET방식과 POST방식 차이  (0) 2020.09.30
[Web] JSP 게시판만들기 #페이징/ 컨테이너/ 유형별 리스트  (0) 2020.08.27
[WEB] Java와 Oracle연동하여 HTML로 게시판 만들기  (2) 2020.08.14
'Web' Related Articles more