[egov] 포탈 사이트 화면 분석 - 1

포탈 사이트에 페이지가 어떻게 구성되어 있는지 확인 해보기로 했다.

포탈 사이트의 메인 화면이다.

알림마당의 공지사항에 화면이 어떻게 구성되는지. 어떠한 순서로 불리게 되는지 알아보자.

[그림 - 포탈 메인화면]

사이트 소개, 민원광장 등 각 메뉴에 마우스를 위치시키면 같은 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를 요청한다.