Jquery Toast Plugin 사용해서 공지사항 띄우기..

우선뭐 해당 API js파일이랑 css파일은 다운받아서 프로젝트 내부에 넣어주었다는 가정 하에 시작 jsp먼저 작성하자.

 

main.jsp

<!-- toast를 띄울 화면에 라이브러리 참조 -->
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/jquery.toast.min.css'/>">
<script type="text/javascript" src="<c:url value='/resources/js/common/jquery.taost.min.js'/>"></script>

<!-- 화면 동작스크립트 -->
<script type="text/javascript" src="<c:url value='/resources/js/main.js'/>"></script>

위의 코드처럼 토스트를 띄우고싶은 화면에 해당 파일들 주소를 참조해준다. 이제 스크립트를 작성하자.

 

main.js

/* 3. 해당 페이지가 뜰때 Toast를 띄워준다. */
$(document).ready(function(){
	/* 공지사항 코드 호출 */
	fnGetNoticeData();
});

/* 2.fnSetToast 함수의 파라미터를 셋팅해주면서 호출해주는 함수를 생성 */
function fnGetNoticeData() {
	$.ajax({
    	url: "/getNoticeCodeList.do",
        type: "POST",
        data: {
        	"commonCdSch" : 'NOTICE',
            "useYn" : "Y",
            "useYn2" : "Y"
		},
        success: function(result) {
        	var status = result.status;
            
            if( status == "fail") {
            	CommonJS.showMsgPop(result.serviceMessage);
                return false;
                }
                
                if( !CommonJS.isNull(result.list) ) {
                	//ajax 호출 데이터에서 공지사항 제목가져오기 
                	var headLine = result.list[0].commonCdCont;
                    //공지사항 내용 가져오기
                    var codeArr = result.list.map(function(code) { return code.commonDetailCdCont; });
                    
                    //제목과 내용으로 토스트 셋팅함수 호출
                    fnSetToast(headLine, codeArr);
                    
/* 1. Toast 속성값 셋팅 */
function fnSetToast(headLine, codeArr) {
	$.toast({
  		heading: headLine,
        text: codeArr,
        hideAfter: false,
        position: 'bottom-left,
        bgColor: '#555555',
        textColor: '#ffffff'
    });
}

이렇게 클라이언트단은 다끝났고 서버단을 간략하게 기술해보자.

//controller
@RequestMapping(value="getNoticeCodeList.do", method= RequestMethod.POST)
@RequestBody
public CodeVO getNoticeCodeList(HttpServletRequest request, HttpServletResponse response, CodeVO paramVO) {
	
    //조회 결과 리스트
    List<CodeVO> list = new ArrayList<CodeVO>();
    
    try {
    	list = manageService.selectNoticeCodeList(paramVO);
    
    } catch (Exception e) {
    	paramVO.setResult("99", "화면 공지사항 조회중 오류발생");
    }
    paramVO.setList(list);
    return paramVO;
}

//Service
public interface ManageService {
	List<CodeVO> selectNoticeCodeList(CodeVO paramVO) throws Exception;
}

//ServiceImpl
@Service
public class ManageServiceImpl implements ManageService {
	
    @Autowired
	ManageServiceOdsDAO odsDao;
    
    @Override
    public List<CodeVO> selectNoticeCodeList(CodeVO paramVO) throws Exception {
    	return odsDao.selectNoticeCodeList(paramVO);
    }
}

//DAO
@Repository
public class ManageServiceOdsDAO extends AbstractOdsCommonDAO {
	
    public List<CodeVO> selectNoticeCodeList(CodeVO paramVO) throws Exception {
    	return this.selectList("manage.selectNoticeCodeList", paramVO);
}

//VO
@SuppressWarnings("serial")
public class CodeVO extends DefaultVO<CodeVO>{
	
    private String commonCd;
    private String commonDetailCd;
    private String commonDetailCdCont;
    private String commonCdCont;
    private String commonCdSch;
    private String useYn;
    private String useYn2;
    
    public String getCommonCd() {
    	return commonCd;
    }
    public void setCommonCd(String commonCd) {
    	this.commonCd = commonCd;
    }   
    public String getCommonDetailCd() {
    	return commonDetailCd;
    }
    public void setCommonDetailCd(String commonDetailCd) {
    	this.commonDetailCd = commonDetailCd;
    }
    public String getCommonDetailCdCont() {
    	return commonDetailCdCont;
    }
    public void setCommonDetailCdCont(String commonDetailCdCont) {
    	this.commonDetailCdCont = commonDetailCdCont;
    }
    public String getCommonCdCont() {
    	return commonDetailCd;
    }
    public void setCommonCdCont(String commonCdCont) {
    	this.commonCdCont = commonCdCont;
    }
    public String getCommonCdSch() {
    	return commonCdSch;
    }
    public void setCommonCdSch(String commonCdSch) {
    	this.commonCdSch = commonCdSch;
    }
    public String getUseYn() {
    	return useYn;
    }
    public void setUseYn(String useYn) {
    	this.useYn = useYn;
    }
    public String getUseYn2() {
    	return useYn2;
    }
    public void setUseYn2(String useYn2) {
    	this.useYn2 = useYn2;
    }
    
}

 

이제 가져오는 쿼리를 작성해보자.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN" "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">

<mapper namespace="manage">

<select id="selectNoticeCodeList" parameterType="CodeVO" resultType="CodeVO" fetchSize="50">
	SELECT
	
	--notice detail code
    det.COMMON_CD AS commonCd
    , det.COMMON_DETAIL_CD AS commonDetailCd
    , det.COMMON_DETAIL_CD_CONT AS commonDetailCdCont
    
    --notice common code
    , grp.COMMON_CD_CONT AS commonCdCont
    
    FROM ODS7COWN.TBRPTCOD_COMNDTL det
    INNER JOIN ODS7COWN.TBRPTCOD_COMN grp
    ON grp.COMMON_CD = det.COMMON_CD
    
    <where>
    det.COMMON_CD NOT IN'LOGIN'
    <if test="commonCdSch != null and commonCdSch != '' ">
    AND det.COMMON_CD = trim(#{commonCdSch})
    </if>
    <if test="useYn != null and useYn != '' ">
    AND grp.USE_YN = #{useYn}
    </if>
    <if test="useYn2 != null and useYn2 != '' ">
    AND det.USE_YN = #{useYn2}
    </if>
    </where>
    
</select>

</mapper>

 

https://kamranahmed.info/toast

https://kamranahmed.info/toast

Jquery Toast Plugin Reference Document