[전자정부프레임워크] MariaDB 데이터를 JSP로 출력

이 게시물은 이전 게시물에서 이어집니다.

[전자정부프레임워크] MariaDB 연동 설정

[전자정부프레임워크] MariaDB 연동 설정

 

이제 마지막입니다.

DB 데이터를 출력하기 위해 패키지와 클래스를 생성하겠습니다.

우선 dao와 service 패키지를 egovframework.example 패키지 밑에 생성합니다.

 

전부 생성하면 이런 모습입니다.

controller 패키지는 지난 게시물에서 생성했습니다.

전자정부프레임워크를 처음하면서 다른 블로그를 참고해보니 대부분이 *Impl 패키지를 추가하는 것을 봤습니다.

interface를 사용하기 위해서 생성하는데, 현업에 와서 알게된 사실은 규모가 큰 프로젝트가 아니라면 interface를 굳이 사용하지는 않는다고 합니다.. 왜냐하면 굳이 사용해도 편한게 없고 오히려 디버깅할 때 번거로워지기만 한다고 합니다. 

때문에 이런 간단한 프로젝트에는 interface를 사용하지 않을 것입니다.

 

DB에 데이터는 간단하게 넣었습니다.

 

먼저 EgovDAO 클래스를 코딩하겠습니다.

이 클래스는 DB에 접근해서 데이터를 가져오는 기능을 합니다.

반환형은 List 말고 다른 객체로도 가능합니다.

다른 블로그를 보니 VO 클래스로 하는 방식을 많이 봤는데, 저는 List 방식으로 해보겠습니다.

package egovframework.example.dao;

import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import egovframework.rte.psl.dataaccess.mapper.Mapper;

@Mapper("boardMapper")
@Repository
public class EgovDAO {
	
	@Autowired
	@Resource(name="sqlSession")
	private SqlSession query;
	
	
	public List<Map> getSemester() { // 'sem' column(열) 데이터
		return query.selectList("getSemester");
	}
}

 

필요한 쿼리문을 작성하기 위해 BoardMapper.xml 을 실행합니다.

 

표시된 부분을 그림처럼 수정합니다.

쿼리문 코드를 추가해줍니다.

다른 열(column) 을 출력하고 싶으면 sem 대신 DB에 있는 열 이름을 넣으면 됩니다.

전체를 출력하고 싶으면 *을 넣습니다.

DB 쿼리문을 그대로 넣으면 됩니다.

세미콜론은 안 붙여도 실행이 됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="egovframework.example.dao.EgovDAO">

	<select id="getSemester" resultType="map">
		SELECT sem
		FROM semester
	</select>
	
</mapper>

 

EgovService 클래스를 코딩하겠습니다.

package egovframework.example.service;

import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import egovframework.example.dao.EgovDAO;

@Service
public class EgovService {
	@Resource
    private EgovDAO egovDAO;
    
    public List<Map> getSemester() {  // 학기 테이블
    	return egovDAO.getSemester();
    }
}

 

이번에는 이전 게시물에서 작성했던 EgovController 클래스를 수정하겠습니다.

수정 전

 

addObject 메소드에 2번째 인자로 DB데이터 결과값들이 있는 List 객체를 전달하면 1번째 문자열을 활용해서 jsp에서 값들을 출력할 수 있습니다.

수정 후

package egovframework.example.controller;

import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import egovframework.example.service.EgovService;

@Controller
public class EgovController {
	
	@Resource(name="egovService")
	private EgovService egovService;
	
	@RequestMapping("/view.do")
	public ModelAndView dbPage(ModelAndView mav) throws Exception { 
        
		List<Map> semesterModel = egovService.getSemester();
		
		mav.addObject("semester", semesterModel); 
		mav.setViewName("view");
		
		return mav;
	}
	
}

 

semester 문자열로 ${addObject 1번째 인자 문자열} 을 넣어서 값을 출력할 수 있습니다.

이 방식은 EL 표기법 방식입니다.

$ 이 나와서 JQuery 인가 했지만 아니다.

 

서버를 재실행해서 실행하면 sem 열의 결과값들이 전부 출력됩니다.

 

위의 방법 외에도 여러 가지 출력 방법이 있습니다.

 

${semester[0].sem} 이  다른 문자열은 출력되지 않고 값만 출력돼서 처음에는 이걸 for문을 활용해서 값을 배열에 저장하려고 했으나, [] 괄호 안에 숫자가 아닌 i 같은 인덱스 변수가 들어가면 에러가 뜹니다.

이것 때문에 시간을 많이 낭비했다. 당연히 될 줄 알았는데 되지 않아서 방법을 찾아보았으나 안 된다는 글을 봤다. 

검색해서 찾아봤지만 인덱스 변수는 안 되고, jstl의 반복문을 활용해야할 듯 합니다. (있었으면 좋겠다)

 

저는 jstl 방식은 사용하지 않고 필요한 값만 저장하기 위해 <script> 태그 안에서 메소드를 만들었습니다.

inputAry 함수는 위 화면에서 ${semester} 의 결과값(1번째 줄)을 보면 = 과 } 기호 사이에 있는 값을 알아내기 위해서 이 메소드를 정의했는데, indexOf, substring, lastIndexOf 메소드를 활용해서 위 화면의 3번째 줄처럼 값만 깔끔하게 얻어낼수 있는 메소드를 구현했습니다.

 

<%-- controller에서 넘어온 List 결과값들을 JS의 배열로 저장 --%>
	function inputAry(str, strAry){
		if(str.length > 0){		  // column 값들이 존재하는지 검사
			  let idx = 0;		  // indexOf()에서 사용할 문자열 시작위치 index
			  let element;		  // 배열에 담을 테이블 column 행들의 값들
			  let findEqual;      // '=' 문자 index
			  let findBracket;    // '}' 문자 index
			  let findLastBracket;// 문자열 마지막 '}' 문자 index
			  do{
				  findEqual = str.indexOf('=', idx);
				  idx = findEqual;
				  findBracket = str.indexOf('}', idx);
				  idx = findBracket;
				  findLastBracket = str.lastIndexOf('}');
				  
				  element = str.substring((findEqual+1), findBracket);
				  strAry.push(element);
				  
			  }while(idx != findLastBracket); // 마지막 '}' 문자인지 검사
		  }
	}

-- 추가 --

위의 방법대로 해도 되는데, JSTL 방식을 혼용해서 하는 방법이 있습니다.

사용할 때 주의사항이 기본적으로 서버가 작동할 때 JAVA > JSTL > HTML > Javascript 순서로 동작합니다.

그래서 JQuery로 가져온 값을 JSTL로 반복문을 돌리려는 건 실행순서상 에러가 발생합니다.

- 잘못된 방법1 -

<c:forEach var="list" items="$("#list").val()" >
	list1.push("${list.name}");
	list1.push("${list.age}");
	list1.push("${list.phone}");
</c:forEach>

- 잘못된 방법2 -

var list = new Array();
list = "${List}";

alert( list[0].name );

 

- 올바른 방법 -

var list = new Array(); // 또는 var list = [];

<c:foreach items="${List}" var="item">
list.push("${item.name}");
</c:foreach>

*알게된 점

EL 표기법에서는 예를 들어  ${semester.sem} 사용하면 에러가 뜨는데, JSTL에서는 ${semester.sem}이 가능하다. 

이거 알았으면 굳이 inputAry 함수 같은거 사용하지 않아도 되는데 ㅜ

 

이렇게 전자정부프레임워크로 MariaDB 연동해서 JSP에 데이터까지 출력해보았다.

다른 블로그들을 참고했을때 코드 있는 그림에 제대로된 표시도 없고 해서 코드 잘못 적어서 사소한 걸로 에러가 많이 떠서 시간을 많이 낭비했다. 그래서 내가 블로그에 따로 정리해서 다른 사람이 봐도 이거대로 따라하면 무난하게 할 수 있도록 정말 귀찮을 정도로 상세하게 표시해놨다.. 왜 이렇게 안 하는지 이해는 간다.. ㅈㄴ 귀찮고 시간이 많이 든다. 다음에 내가 다시 보고 따라하면 금방 만들수 있을 정도로 해놨기에 이정도면 웬만해서는 누구나 간단하게 구현이 가능할 것이다. 작성하면서 느낀 것이 게시물 1개만 해도 이렇게 그림에 표시하고 하면서 글과 함께 쓰니 시간이 많이 걸린다. 그래도 이렇게 자세하게 작성하니까 다시 내가 한 것을 점검하면서 잘못한 부분도 수정할 수 있었던거 같다.

 

EL 표기법, JSTL 방식 말고 JSON 방식으로 전달하는 방법이 있는데, 되도록이면 JSON 방식으로 해야한다. 왜냐하면 JSON이 대부분 어디에서든지 사용되기 때문이다. EL과 JSTL은 사용범위가 JSP로 한정적이다.

 

[전자정부프레임워크] MariaDB 데이터를 JSON으로 JSP에서 출력

[전자정부프레임워크] MariaDB 데이터를 JSON으로 JSP에서 출력