본 내용은 혼자서 공부하기 위한 용도로 사용된 것으로 비효율적일 수 있으며 실용적이지 않을 수 있습니다.

실시간 노선 정보에 대해선 전 포스팅에서 완료하였고 이번엔 해당 정류소의 모든 노선 리스트를 출력해볼 것이다. 실시간과 달리 모든 노선 리스트는 정류장 리스트와 같이 DB를 통해서 정보를 불러올 것이다.

1. Controller

GCBusController.java

	@RequestMapping(value="/nodeToRouteList.do")
	public @ResponseBody ModelAndView nodeToRouteList(@RequestBody Map<String,Object> map) throws Exception{
		
		map.put("list", gcBusServ.nodeToRouteList(map));
		
		return new ModelAndView("jsonView", map);
	}

- 여태 살펴봤던 전형적인 ajax를 이용하는 Controller 형태이다. map 에는 정류장 ID 값이 포함되어 있다.

2. Service

GCBusService.java

List<Map<String,Object>> nodeToRouteList(Map<String, Object> map) throws Exception;

GCBusServiceImpl.java

	@Override
	public List<Map<String,Object>> nodeToRouteList(Map<String, Object> map) throws Exception {
		return gcBusDAO.selectNodeId(map);
	}

- Service단의 경우도 특별한 것은 없다.

3. DAO

AbstractDAO.java

    @SuppressWarnings("unchecked")
    public Object selectPagingList(String queryId, Object params) {
    	printQueryId(queryId);
    	Map<String,Object> map = (Map<String,Object>)params;
    	
    	String strPage_No = map.get("PAGE_NO").toString();
    	String strRow_Count = (String)map.get("ROW_COUNT");
    	int nPage_No = 0;
    	int nRow_Count = 10;
    	
    	if(StringUtils.isEmpty(strPage_No)==false) {
    		nPage_No = (Integer.parseInt(strPage_No)-1)*10;
    	}
    	if(StringUtils.isEmpty(strRow_Count)==false) {
    		nRow_Count = Integer.parseInt(strRow_Count);
    	}
    	
    	map.put("PAGE_NO", nPage_No);
    	map.put("ROW_COUNT", nRow_Count);
    	
    	return sqlSession.selectList(queryId, map);
    }

- 정류장에 속한 노선의 경우 많은 수가 있기 때문에 페이징을 사용하기 위하여 위와 같이 작성하였다. 

GCBusDAO.java

	@SuppressWarnings("unchecked")
	public List<Map<String,Object>> selectNodeId(Map<String, Object> map) throws Exception {

		return (List<Map<String,Object>>)selectPagingList("gcbus.selectNodeId",map);
	}

-페이징 처리된 정보를 가져온다.

4. SQL

gcbus_SQL.xml

	<select id="selectNodeId" parameterType="HashMap" resultType="HashMap">
 		<![CDATA[
 			SELECT
 				(
 					SELECT
 						COUNT(*)
 					FROM
 						NODE_ROUTE
 					WHERE
 						NODEID=#{NODEID}
 				) AS TOTAL_COUNT, 
 				route.ROUTEID,
 				route.ROUTENO,
 				info.STARTNODENM,
 				info.ENDNODENM
 			FROM
 				NODE_ROUTE route, ROUTE_INFO info
 			WHERE
 				route.ROUTEID=info.ROUTEID AND route.NODEID=#{NODEID} 
 			ORDER BY ROUTENO
			LIMIT #{PAGE_NO}, #{ROW_COUNT} 				
 		]]>
 	</select>

- 페이징을 위한 SQL문이다.

5. JSP

function fn_nodeToRoute(obj){
			$("#routeBox").children().remove();

			var data={};
			data["NODEID"]= obj.attr("nodeid");
			data["PAGE_NO"]= cur_Page;	

			/*
			이 부분에서 정류장 ID와 페이지 번호를 서버로 보내주고 서버에서는 데이터베이스를 통해 정류장 전체 노선 정보를 가져와 ajax로 리턴해준다.
			보내는 데이터 : nodeID
			받는 데이터 : 정류장 전체 노선 정보 
			*/
			$.ajax({
				dataType:"json",
				contentType:"application/json",
				type:"POST",
				url: "/gcbus/nodeToRouteList.do",
				data: JSON.stringify(data),
				success:function(result){
						for(var i=0; i< result["list"].length;i++){
							var map=result["list"][i];
				        	var str = "<a href='#this' routeno='"+map["ROUTENO"]+"' routeid='"+map["ROUTEID"]+"' name='route"+i+"' id='route"+i+"' class='result sc_route_result'>"+map["ROUTENO"]+"<span class='routeSpan'>("+map["STARTNODENM"]+"~"+map["ENDNODENM"]+")</span></a>";

				        	$("#routeBox").append(str);
							
						}
						$("#routeBox").css("height", (52*result["list"].length)+20);
						if(result["list"][0]!=null){
							total_Page = (result["list"][0]["TOTAL_COUNT"]/10);
						}
						if(cur_Page>1){$("#routeBox").append("<a href='#this' id='route_Pre' class='btn routeBtn' >이전</a>");}
						if(cur_Page<total_Page){$("#routeBox").append("<a href='#this' id='route_Next' class='btn routeBtn' >다음</a>");}
						
						$("#routeBox").append("<a href='#this' id='busList_Btn' class='btn' >실시간 노선 보기</a>");

						$("#route_Pre").on("click",function(e){
							e.preventDefault();
							cur_Page--;
							fn_nodeToRoute(obj);
						});

						$("#route_Next").on("click",function(e){
							e.preventDefault();
							cur_Page++;
							fn_nodeToRoute(obj);
						});
						
						$("#busList_Btn").on("click",function(e){
							e.preventDefault();
							fn_nodeRealTime(obj);
						});

						$("a[name^=route]").on("click",function(e){
							e.preventDefault();
							fn_routeInfo($(this));
						});
					},
				error:function(){
						alert("error");
					}
			})
		}

function fn_routeInfo(obj){
	var comSubmit = new ComSubmit();
	comSubmit.addParam("routeno",obj.attr("routeno"));
	comSubmit.addParam("routeid",obj.attr("routeid"));
	comSubmit.setUrl("<c:url value='/routeInfoPage.do'/>");
	comSubmit.submit();
}

- 정류장별 노선을 불러올 함수를 만든다. 먼저 실시간으로 출력되어 있는 노선 박스를 지워주고 정류장ID와 현재 노선 페이지를 보내주기 위하여 배열에 삽입해준다. ajax를 통해 두 데이터를 controller로 보내주고 노선의 정보 데이터들을 받아온다. 그리고 해당 정보들을 출력해주고 페이지 값을 통해 페이지 부분도 출력해준다. 그리고 출력되있는 부분에 대한 클릭 이벤트 처리를 해준다. fn_routeInfo() 함수는 실시간 노선 부분과 현재 부분에서 노선 클릭에 대한 이벤트로 노선 정보 페이지로 전환하게 해준다. 해당 페이지는 다음 포스팅에서 다루겠다.

(fn_nodeRealTime() 함수의 주석 처리해 둔 부분은 해제하면 된다.)

5. 테스트

- 첫 페이지에서

-2번째 페이지에서...

- 마지막 페이지에서...

다음과 같은 화면들이 출력이 된다면 지금까지 잘 따라오고 있다고 볼 수 있다.