원문(출처) : 그누보드 테마 제작 20 - 게시글 작성 및 수정 페이지 개발

 

오늘은 드디어 대망의 게시판 작업이 진행됩니다.
그 중에서도 오늘은 게시물 작성(쓰기) 및 수정 페이지를 먼저 만들려고 합니다.

 

게시판도 회원가입만큼 많은 옵션을 가지고 있습니다.
회원가입은 모두 사용으로 설정하고 작업하니 큰 문제가 없었는데요.
게시판은 사용함과 안함의 차이가 있는 것들이 일부 있을 것으로 보여집니다.
(예: 위지윅에디터 사용 여부 등)
이런 이유로 일단은 모두 사용으로 정의해놓은 상태에서 작업을 진행하고,
하나씩 풀어가면서 확인 및 디버깅 작업을 하려고 합니다.

 

게시판 설정을 위하여 어드민 사이트로 이동합니다.
먼저 스킨을 테마의 basic과 테마의 gallery로 변경합니다.

 

공지사항을 먼저 작업을 할 계획입니다.
공지사항의 쓰기 페이지가 완료되면, 
자유게시판, 갤러리, QA를 순서대로 확인 작업을 거치겠습니다.
공지사항의 선택 사항을 살펴봅니다.

 

설정해야 하는 항목들을 나열해보겠습니다.
정말 많네요. 아래 이미지에서 빨간 네모 친 부분은
완료 후 해제하여 다시 한 번 확인을 해야 하는 부분입니다.
또, DHTML 에디터의 경우 종류가 2가지 있으니 그것도 확인해야 합니다.
아 하나 더... 처음에는 Guest(비로그인 상태)로 테스트를 하셔야
Guest 글쓰기 관련 영역이 보여집니다.
그리고 나서 관리자로 로그인하셔서 한 번 더 해야 해요.
안그러면 공지여부 체크가 나타나지 않습니다.

 

이제 제가 본격적으로 그누의 기본화면과 금일고쳐야 하는 화면을 살펴보겠습니다.

 

정말 어지럽군요.... 흠... 달리자! 두드리면 열릴것이니!!!

 

Metronic Admin의 어느 템플릿을 이용할지도 결정해봅니다.
아래에서 "2 Columns Horizontal Form Layout"을 이용해야겠어요.
필요에 따라 다른 것들도 섞을 계획입니다.
https://keenthemes.com/metronic/preview/demo1/crud/forms/layouts/multi-column-forms.html

 

 

위 이미지들의 URL인 /bbs/write.php 부터 살펴봐야겠네요.
우와... 너무 복잡하네요. 일단 패스. 
아... 우선 앞으로 $w 변수가 많이 나올텐데요.
정리해두고 가는게 좋을 것 같아요.
(앞으로 계속 나오게 될 것이고, 그누보드를 사용하려면 필수더라구요.)
게시판에서의 $w 변수의 값과 의미 정리
   $w == "" : 새글 신규 작성
   $w == "u" : 글 수정 
   $w == "r" : 답글 작성 
   $w == "c" : 코멘트 신규 작성
   $w == "cu" : 코멘트 수정

 

뭐. 테마 작업이니까... 스킨이 더 중요합니다.
/theme/mt703/skin/board/basic/write.skin.php 를 열어서 보시죠.
(와 이것도 만만치 않게 복잡하네요~)

 

먼저 Metronic Admin의 빈 페이지를 만들어주고 시작하겠습니다.
(빈 페이지도 제공해주더라구요)
https://keenthemes.com/metronic/preview/demo1/layout/general/empty-page.html

 

Metronic Admin 템플릿은 메인 영역 사이에 빈 공간이 있습니다만,
전 없애버렸습니다. ("Page content goes here"의 위치가 다르죠?)
향후 만들려는 사이트가 가로폭이 꽤나 중요하거든요~

 

"2 Columns Horizontal Form Layout"의 HTML 소스입니다.
이걸 메인 영역에 훅 넣어버리고 시작합니다.

역시 전... 화면 만드는게 너무 싫어요 ㅠㅠ
(솔찮게 시간이 걸렸습니다.)

 

화면 작업 끝났으니 진짜 작업 진행합니다.
"임시 저장된 글"의 UI를 바꾸고 싶어 시도하다가, 고생중이네요.

 

"임시 저장된 글" 버튼을 누르면, ajax로 임시저장된 글을 불러오게 되더군요.
내용은 /js/autosave.js의 51라인부터 있습니다.
그러나 이 파일을 고치면 다른 테마에 영향을 주게 됨으로
제작중인 테마 폴더 안에 같은 파일을 만들고, 불러오게 할 것입니다.

 

음... 괜히 했어요... 여차 저차... 삽질을 해서 겨우 만들긴 했는데.
우측으로 밀려버렸는데, 이게 어케 안되네요.
(여기서도 한참 삽질하고 있습니다.)

 

여차 저차 임시 저장글을 완료했네요.
(역시 하면 됩니다. ^^)

 

----------------------------------

글이 잘려서 두 번째 이야기로 이어집니다.

[테마제작기(20記)] 게시글 작성 및 수정 페이지 개발 - 2/3