포탈 사이트에 페이지가 어떻게 구성되어 있는지 확인 해보기로 했다.
포탈 사이트의 메인 화면이다.
알림마당의 공지사항에 화면이 어떻게 구성되는지. 어떠한 순서로 불리게 되는지 알아보자.
[그림 - 포탈 메인화면]
사이트 소개, 민원광장 등 각 메뉴에 마우스를 위치시키면 같은 URL에 요청하는것을 볼수 있다.
개발자 도구를 이용하여 링크가 어떻게 걸려있는지 확인 해 보았다.
[그림 - 메뉴 A 링크 개발자 도구]
각각의 메뉴는 클릭시 goMenuPage라는 자바스크립트로 연결된다. 숫자는 메뉴의 번호를 의미한다.(DB 테이블 참고)
goMenuPage 자바스크립트의 소스는 아래와 같다.
function goMenuPage(menuNo){ document.getElementById("menuNo").value=menuNo; document.getElementById("link").value="forward:"+getLastLink(menuNo); document.menuListForm.action = "/EgovPageLink.do"; document.menuListForm.submit(); }
function getLastLink(menuNo){ var tNode = new Array; for (var i = 0; i < document.menuListForm.tmp_menuNm.length; i++) { tNode[i] = document.menuListForm.tmp_menuNm[i].value; var nValue = tNode[i].split("|"); //선택된 메뉴(menuNo)의 하위 메뉴중 첫번재 메뉴의 링크정보를 리턴한다. if (nValue[1]==menuNo) { if(nValue[5]!="dir" && nValue[5]!="" && nValue[5]!="/"){ //링크정보가 있으면 링크정보를 리턴한다. return nValue[5]; }else{ //링크정보가 없으면 하위 메뉴중 첫번째 메뉴의 링크정보를 리턴한다. return getLastLink(nValue[0]); } } } }
|
코드 설명
: menuNo는 전달받은 숫자('100000') 의미
: forward라는 문자열 뒤에 getLastLink에 menuNo를 만들어 이동할 URL를 만들어온다.
참고로 Hidden으로 아래와 같이 메뉴리스트가 숫겨져 있다.
[ <input type="hidden" name="tmp_menuNm" value="1010000|1000000|사이트 소개|/|/|/EgovPageLink.do?link=main/sample_menu/EgovAboutSite|"> , <input type="hidden" name="tmp_menuNm" value="3010000|3000000|공지사항|/|/|/cop/bbs/selectBoardList.do?bbsId=BBSMSTR_AAAAAAAAAAAA|"> , <input type="hidden" name="tmp_menuNm" value="1000000|0|사이트소개|/|/||"> , <input type="hidden" name="tmp_menuNm" value="0|0|root|/|/||"> , <input type="hidden" name="tmp_menuNm" value="2010000|2000000|민원신청|/|/|/EgovPageLink.do?link=main/sample_menu/EgovServiceManage|"> , <input type="hidden" name="tmp_menuNm" value="4010000|4000000|FAQ|/|/|/uss/olh/faq/FaqListInqire.do|"> , <input type="hidden" name="tmp_menuNm" value="1020000|1000000|연혁|/|/|/EgovPageLink.do?link=main/sample_menu/EgovAboutSite|"> , <input type="hidden" name="tmp_menuNm" value="3040000|3000000|자유게시판|/|/|/cop/bbs/selectBoardList.do?bbsId=BBSMSTR_BBBBBBBBBBBB|"> , <input type="hidden" name="tmp_menuNm" value="2020000|2000000|민원결과확인|/|/|/EgovPageLink.do?link=main/sample_menu/EgovServiceResult|"> , <input type="hidden" name="tmp_menuNm" value="2000000|0|민원광장|/|/||"> , <input type="hidden" name="tmp_menuNm" value="4020000|4000000|QnA|/|/|/uss/olh/qna/QnaListInqire.do|"> , <input type="hidden" name="tmp_menuNm" value="3000000|0|알림마당|/|/||"> , <input type="hidden" name="tmp_menuNm" value="4030000|4000000|설문조사|/|/|/uss/olp/qnn/EgovQustnrRespondInfoManageList.do|"> , <input type="hidden" name="tmp_menuNm" value="1030000|1000000|조직소개|/|/|/EgovPageLink.do?link=main/sample_menu/EgovAboutSite|"> , <input type="hidden" name="tmp_menuNm" value="1040000|1000000|찾아오시는 길|/|/|/EgovPageLink.do?link=main/sample_menu/EgovAboutSite|"> , <input type="hidden" name="tmp_menuNm" value="4000000|0|정보마당|/|/||"> ] |
이후 숨겨져있는 input tag menuNo와, link에 값을 변경 설정하고 form.action에 요청할 URL까지 설정하고 submit을 통해 해당 URL를 요청한다.
예를 들어 알림마당을 클릭하면
알림마당의 menuNo : 3000000으로 goMenuPage('goMenuPage') 자바스크립트가 호출되고
3000000 의 첫번째 하위 링크인 3010000(공지사항)의 값이 설정된다.
menuNo = 3000000,
link = forward:/cop/bbs/selectBoardList.do?bbsId=BBSMSTR_AAAAAAAAAAAA
위의 정보로
/EgovPageLink.do의 URL를 요청한다.
