프로그래밍/전자정부프레임워크(eGov)

타일즈흐름과 데이터베이스 조회 (1)

Jay Tech 2017. 2. 12. 22:37
반응형

default-left에


1
2
3
4
$(document).ready(function() {
            var pageName = "<c:out value="${param.pageName}"/>";
            alert(pageName);
});    
cs


를 추가해보자.


input hidden name 전 페이지에서 보낸 값이자 name을 컨트롤러로 보낸다. param은 예약어 이다. 1번 페이지에서 2번을 호출한 것과 같다. 전페이지에서 보낸 값을 받을 때 param을 붙인다. c는 jstl의 라이브러리 이다. : 은 프로퍼티를 의미한다. c의 프로퍼티인 out을 사용하는 것이다. c.out은 string화 시키는 것이다. 


pageSubmitFn : () 안에 script를 악의적 목적으로 넣을 수 있다. 악성코드는 script형태인데 이것이 들어왔을 경우 c.out으로 스트링으로 변하게 해서 막는 역할도 겸할 수 있다.



$(document).ready(function() {

var pageName = "<c:out value="${param.pageName}"/>";

$("[prop=menu]").removeClass("active");

$("#"+pageName).addClass("active");

});





2 line의 prop=menu는  <li prop="menu" class="" id="mainMenu"> 처럼 prop이 menu인 것에 active클래스를 없애는 것이다. 


3 line은 그 id값을 가진 놈에 active속성을 준다는 것이다. 


즉 레프트 메뉴를 클릭 했을 때 색이 바뀌는 과정을 나타낸다.




타일즈의 흐름


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
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"  prefix="tiles"%>
<!DOCTYPE html>
<html>
    <head>
          <tiles:insertAttribute name="header"/>
      </head>
      <body>
          <div class="wrapper">
              <tiles:insertAttribute name="left"/>    
              <div class="main-panel">
                  <tiles:insertAttribute name="nav"/>
                  <div class="content">
                      <div class="container-fluid">
                          <tiles:insertAttribute name="content"/>
                      </div>
                  </div>    
                  <tiles:insertAttribute name="footer"/>
              </div>
          </div>
      </body>
<!--   Core JS Files and PerfectScrollbar library inside jquery.ui   -->
<script type="text/javascript">
    $(document).ready(function(){    
 
    });
</script>
 
<script src="js/bootstrap/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
 
<!--  Forms Validations Plugin -->
<script src="js/bootstrap/jquery.validate.min.js"></script>
 
<!--  Plugin for Date Time Picker and Full Calendar Plugin-->
<script src="js/bootstrap/moment.min.js"></script>
 
<!--  Date Time Picker Plugin is included in this js file -->
<script src="js/bootstrap/bootstrap-datetimepicker.js"></script>
 
<!--  Select Picker Plugin -->
<script src="js/bootstrap/bootstrap-selectpicker.js"></script>
 
<!--  Checkbox, Radio, Switch and Tags Input Plugins -->
<script src="js/bootstrap/bootstrap-checkbox-radio-switch-tags.js"></script>
 
<!--  Charts Plugin -->
<script src="js/bootstrap/chartist.min.js"></script>
 
<!--  Notifications Plugin    -->
<script src="js/bootstrap/bootstrap-notify.js"></script>
 
<!-- Sweet Alert 2 plugin -->
<script src="js/bootstrap/sweetalert2.js"></script>
 
<!-- Vector Map plugin -->
<script src="js/bootstrap/jquery-jvectormap.js"></script>
 
<!-- Wizard Plugin    -->
<script src="js/bootstrap/jquery.bootstrap.wizard.min.js"></script>
 
<!--  Bootstrap Table Plugin    -->
<script src="js/bootstrap/bootstrap-table.js"></script>
 
<!--  Plugin for DataTables.net  -->
<script src="js/bootstrap/jquery.datatables.js"></script>
 
<!--  Full Calendar Plugin    -->
<script src="js/bootstrap/fullcalendar.min.js"></script>
 
<!-- Light Bootstrap Dashboard Core javascript and methods -->
<script src="js/bootstrap/light-bootstrap-dashboard.js"></script>
 
<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<script src="js/bootstrap/demo.js"></script>
</html>
cs


타일즈가 이렇게 생겼다. 즉 하나의 페이지의 퍼즐구성을 보여주는 것이다. 

여기서 중요한 점이 하나 있다.


바로 document.ready의 순서이다.

<head>
          <tiles:insertAttribute name="header"/>
      </head>
      <body>
          <div class="wrapper">
              <tiles:insertAttribute name="left"/>    
              <div class="main-panel">
                  <tiles:insertAttribute name="nav"/>
                  <div class="content">
                      <div class="container-fluid">
                          <tiles:insertAttribute name="content"/>
                      </div>
                  </div>    
                  <tiles:insertAttribute name="footer"/>
              </div>
          </div>
      </body>


위의 타일즈의 윗부분을 본다면 각 퍼즐이 껴맞춰진 모양새를 볼 수 있다. 

제일먼저 header 가 붙고 left, nav, content ,footer 순으로 붙는다. 즉 각 파일의 document.ready를 실행한다면 header가 제일 먼저 시작될 것이다. 제일 마지막으로는 이 파일자체(default-layouts)의 document.ready 가 실행될 것이다. 


스크립트가 찍히지 않는 경우 이 순서를 통해 에러를 잡을 수 있다.

예를들어 left쪽 스크립트가 찍히지 않는다면 어디를 봐야할까?

document.ready는 html이 붙고난 후 실행된다는 점을 기억한다.

그렇다면 left script전에는 left html이 나와야 한다. 즉 left의 html을 확인한다. 그리고 후차탐색으로 거슬러 올라간다. 

맨처음 Header html - Header script - Left html - Left script ...


cf) $$주의$$  헤더와 레프트에서 폼 아이디가 겹치면 값이 넘어가지 않는다. 디버깅도 안됨. 이유없이 넘어가지 않을 때 폼 아이디를 확인해야 한다.


결론은 헤더에 공통 폼이름은 어렵게 해야 한다. 헤더가 제일 먼저 붙기 때문에 주로 공통 스크립트를 정의하기 때문이다. 그러므로 헤더의 공통 폼이름은 어렵게 해야한다. 겹칠수 있는 확률을 줄이기 위해서이다.







반응형
저작자표시

'프로그래밍 > 전자정부프레임워크(eGov)' 카테고리의 다른 글

전자정부프레임워크 호스팅(cafe24) 하기  (0) 2017.02.17
타일즈흐름과 데이터베이스 조회 (2)  (0) 2017.02.12
레프트 메뉴 추가 후 서비스단을 만들어보자! - (3) 맵퍼적용  (1) 2017.02.04
레프트 메뉴 추가 후 서비스단을 만들어보자! - (2)  (0) 2017.01.22
레프트 메뉴 추가 후 서비스단을 만들어 보자! - (1)  (0) 2017.01.22

'프로그래밍/전자정부프레임워크(eGov)'의 다른글

  • 현재글타일즈흐름과 데이터베이스 조회 (1)

관련글

댓글

티스토리툴바