7-7.위젯 개발 미니 프로젝트 - admin.php 소스 분석

· 댓글 : 0 조회 : 2176 · 0
마지막으로 admin.php의 소스 코드를 둘러보겠습니다. 
역시나 세부적인 내용은 주석을 참고하시기 바라며 직접 이래저래 만져보시길 권장합니다!

admin.php의 코드는 크게 아래와 같이 구성되어 있습니다. 

1. 위젯 설정란 (타이틀, 링크, 노출개수, 제목자르기)
2. CSS 스타일
3. 자바스크립트 코드 (위젯코드 생성, 위젯 추가)


하나하나 순서대로 들여다 보겠습니다. 



1. 위젯 설정란 (타이틀, 링크, 노출개수, 제목자르기)

5929

위의 코드는 "위젯추가", "위젯코드 추출" 팝업창에서 "소광장 위젯"에 대한 위젯 설정 영역에 해당됩니다. 


"위젯코드 추출" 팝업창
5931

위의 "위젯코드 추출" 팝업창은 아래의 "직접코딩" 모드의 위젯 꾸미기 페이지에서 위젯 아이콘을 클릭하면 뜨는 팝업창입니다. 
5908



"위젯추가" 팝업창
5933

위의 "위젯추가" 팝업창은 아래의 "위젯전시" 모드의 위젯 꾸미기 페이지에서 "위젯추가" 버튼을 클릭하면 뜨는 팝업창입니다. 
위의 "위젯추가" 팝업창 하단의 버튼명이 "위젯추가"인 점을 확인하기 바랍니다. 
5907




"위젯추가" 팝업창 (위젯속성 변경용)
5932

이 팝업창의 명칭도 "위젯추가" 이지만 하단의 버튼명을 보면 "위젯추가"가 아닌 "속성변경"입니다. 
이것은 이미 생성한 위젯에 대해서 위젯 속성을 변경할 때 뜨는 팝업창인데 아래 화면에서 보듯 이미
생성된 위젯 Tile의 우측 상단 붉은 색 영역 안의 아이콘을 클릭하면 뜹니다. 

5934

즉, 이 "위젯 설정란" 코드는 위의 팝업창들 내에서 위젯 속성을 지정할 때 출력이 됩니다. 
크게 어려운 내용은 없으니 직접 소스코드를 눈으로 보면서 주석을 참고하시기 바랍니다. 

개인적으로는 form 선언 부분이 지금까지 봤던 form 선언과 달라서 눈에 띄더군요. 

 

form태그의 하위 태그로 존재했던 input 태그가 하나도 없는데 이는 이 페이지에서 설정된
위젯 속성들은 일반적인 파라미터 형식이 아닌 좀 특수한 형태로 하나의 String에 담아서
넘깁니다. (ex. limit^5,sbjcut^15,link^/rb/c/5,title^소광장)

form submit 바로 form submit가 되는 게 아니라 saveCheck(this)라는 자바스크립트 함수가
호출이 되는데 이 함수에서 위젯 설정의 파라미터 세팅이 이루어집니다. 
(여기서 "this"는 form 자체를 의미하고 실제 자바스크립트 소스를 보면 아시겠지만 맨 끝에
return false가 선언되어 있어 실제로 form submit되지는 않습니다)



2. CSS 스타일

5928

admin.php의 css인데 짧고 간단하니 자세한 설명은 패쓰하겠습니다. 




3. 자바스크립트 코드 (위젯코드 생성, 위젯 추가)

5930

처음에 보면 눈에 잘 안 들어올 수 있는데 하나하나 직접 코드를 눈으로 확인해보시길 권장합니다. 
위젯코드를 생성하는 widgetCode() 함수와 속성 설정 form을 submit시 실행되는 saveCheck(f) 함수
- 이렇게 두 개의 함수가 존재합니다. 

widgetCode() 함수
- 이 함수는 위젯 설정란에 입력된 값들을 추출하여 실제 위젯코드를 생성하는 php 코드를 생성하여 "위젯코드" 팝업창에
출력합니다. (아래 이미지 참고)

5935


saveCheck(f) 함수
- 이 함수는 위젯 설정란에 입력된 값들을 추출하여 이 admin.php 팝업창을 띄운 opener, 즉 부모창에게 넘겨줍니다. 
이 opener라는 부모창은 이 위젯 설정값들을 넘겨받아 위젯영역 부분에 Tile로 뿌려줍니다. 
(아래 이미지 참고)
5936

위의 페이지가 결국엔 admin.php의 opener, 즉 부모창인데 이 부모창의 소스는
rb\modules\home\lang.korean\pages\edit.menu.php 에서 확인 가능합니다. 
이 파일의 자바스크립트 부분을 보면 saveCheck(f)함수에서 사용되는 변수들이 많이 보입니다. 


이상으로 소광장 위젯의 admin.php 소스를 둘러보았고 다음 장은 위젯에서 특정 글 클릭시
"소광장" 모듈에서 열람할 수 있게 소광장 사용자의 main.php 소스를 살짝 수정하도록 하겠습니다. 


통계분석을 위해 매체별 전용URL 사용해주세요.