본문 바로가기

테마만들기31

그누보드 테마 제작 34 - 접속자 집계 위젯 개발 페이지나 위젯의 마지막 작업이 될 듯 합니다. 바로 접속자 집계 위젯 페이지입니다. (outlogin.skin.php가 있지만, 제 테마는 안쓰는 파일입니다.) 게시글 보기 페이지의 우측 영역을 위해 새로 만든 파일에 다음과 같이 코드를 추하였습니다. 이제 visit.skin.php 파일만 작업하면 되겠네요. 짜잔... 금방 완료되었어요~ 소스는 아래에 넣어놓아요~ 2020. 7. 28.
그누보드 테마 제작 33 - 일반 페이지(회사소개/개인정보처리방침/서비스이용약관) 개발 드디어 마지막 작업입니다. (위젯이 일부 남은것 같긴 한데... 애써 무시하고 있습니다.) 일반페이지는 너무 심플해 보여서 바로 진행합니다. /bbs/content.php 를 호출하면 나타나는 페이지이고 테마 작업은 /theme/mt703/skin/content/basic/content.skin.php 가 되겠습니다. 어랏... 위 파일을 고쳤는데... 반응이 없습니다... (아.. 좀.. 날로 먹음 안되나? ㅡㅡ++) /bbs/content.php 파일을 살펴보아야겠습니다. 아니면 관리자에서 설정하는 곳이 있는지도요. 먼저 /bbs/content.php 부터... 1. get 파라메터로 받아온 co_id 값부터 정규식으로 무언가를 걸러냅니다. $co_id = preg_replace('/[^a-z0-9_.. 2020. 7. 25.
그누보드 테마 제작 32 - 투표(POLL) 페이지 개발 투표(Poll) 페이지를 개발합니다. 일단 메뉴에서 페이지가 보이지 않습니다. 어떻게 해야 보여지는지 찾아봅니다. 어드민에 투표 메뉴가 있네요. 우상단에 있는 "투표 추가" 버튼을 눌러 투표를 생성해보겠습니다. 우측 영역에 보여지는 설문 투표 양식 위젯(?) 부터 만들겠습니다. 만들려면 어딘가 보여야 하는데... 전 우측 사이드 영역이 없어 아예 볼 수 없습니다. 저 화면이 나오게 하기 위해서는 무엇을 해야 하는지 몰라 검색을 통해 찾아다녔습니다. 기본 테마에서는 aside(우측영역)에서 poll() 함수를 호출하면 나오게 되어 있더군요. 저는 위에서 말씀드린데로, 메인 화면의 일부분에 노출이 되도록 하겠습니다. 그대로 써도 되지 않을까 싶을 정도로 괜찮아 보입니다. 그러나 CSS에 주석을 하면... 어.. 2020. 7. 24.
그누보드 테마 제작 31 - 접속자 리스트 페이지 개발 오늘의 테마는 접속자 리스트 페이지 개발입니다. 개발을 위해 그누 기본 테마로 확인해보니... 접속자가 없습니다. 당연하죠... 로컬 개발 환경이니... 우선 관련 테이블이 무언지 알아보고, 강제로 삽입을 하던지, 방법을 찾아봐야겠습니다. /bbs/current_connect.php에서 쿼리를 로그로 출력해봅니다. select a.mb_id, b.mb_nick, b.mb_name, b.mb_email, b.mb_homepage, b.mb_open, b.mb_point, a.lo_ip, a.lo_location, a.lo_url from g5_login a left join g5_member b on (a.mb_id = b.mb_id) where a.mb_id 'hunnovsi' order by a.lo_.. 2020. 7. 23.
그누보드 테마 제작 28 - 게시판 리스트 및 새글 페이지 모바일 화면 수정 개발 지난 번 말씀대로 모바일에서는 리스트가 심하게 깨집니다. (반응형으로 만드는건데... 이러면 안되는거잖아요? 그쵸?) 이전 게시판 리스트 작업을 할때, Metronic Admin Template의 메일폼을 사용했었습니다. 그때 메일 리스트의 상단에 검색 영역이 요긴하게 쓰일 것 같아 찾아봅니다. 으악... 이게 뭔가요??? DIV를 생각을 잘 못했네요. 수정... 드디어 알아냈습니다. 정말 삽질에 노가다에... 이렇게 모르니 그동안 고생을 하죠... Bootstrap4에서는 col-xs-6이 없어졌다는군요. Bootstrap3까지만 지원하고 4에서는 col-6이라고 써야 한답니다. 그러니 아무리 해도 안되는 거였습니다. 까먹기 전에 정리!! Mobile Tablet PC Large PC Bootstrap.. 2020. 7. 19.
그누보드 테마 제작 27 - 새글 페이지 개발 게시판이 끝났음에도 남은 페이지가 은근히 많이 있습니다. 새글, 1:1문의, FAQ, Q&A, 접속자, 투표... 오늘은 전체검색과 UI가 비슷한 새글을 작업할게요. 기본 테마의 화면은 이렇게 생겼습니다. /bbs/new.php /theme/mt703/skin/new/new.skin.php 위 2가지 파일을 봐야겠네요. 항상 그랬듯이 현재 제작 중 테마의 화면을 보겠습니다. 사실 좀 정렬이 되어보이는 이유는 그누의 스타일시트가 적용되기때문이죠. 주석 처리하는 순간... 일순간에 망가집니다. 검색영역은 전체검색 페이지와 동일해서 금방 끝났네요. 리스트 영역 개발 들어갑니다. 게시판에서 사용했던 리스트로 해야겠습니다. (모바일 화면일때 영역이 어그러지는 버그가 발견되어서 향후 수정 진행 예정이었는데...) .. 2020. 7. 18.
그누보드 테마 제작 26 - 전체 검색 페이지 개발 오늘은 전체 검색 페이지 작업을 진행합니다. Metronic Admin Template은 전체 검색 UI를 따로 있습니다. 전 검색어 입력란 하단에, 인기검색어나 최근 검색어... 먼일일지도 모르지만, 자동완성 검색어까지도 넣을 수 있다면 좋을 것 같네요. 방향을 정했으니, 이제 그누의 기본 테마를 살펴보겠습니다. 오늘은 위 화면을 만들어야 하는군요. 그 전에 그누보드 기본 테마의 상단에 있는 검색창... 그걸 먼저 처리를 하겠습니다. (검색이 되어야 전체 화면을 만들 수 있으니까요) 항상 하던 순서대로, 그누 기본 테마의 소스를 살펴봅니다. (/theme/basic/head.php 부분에 있겠죠?) 사이트 내 전체검색 인기 검색어 2020. 7. 16.
그누보드 테마 제작 25 - 관리자 선택 삭제/복사/이동 기능 개발 오늘은 게시판 관련 작업에서 남은 두 가지 작업 중 선택 삭제, 선택 복사, 선택 이동 페이지를 작업합니다. 기본 그누 테마의 화면과 현재 작업중인 테마의 화면을 비교하려고 하는데 현재 테마에서 선택 삭제/복사/이동 버튼이 전혀 동작을 안하고 있네요... 오늘은 금방 끝날 줄 알았는데, 처음부터 발목을 잡혔네요. 기존 코드는 button 태그에 type에 submit을 적용하여 클릭시 바로 form.submit()을 수행하도록 되어 있는데, 제작 중인 테마는 bootstrap의 dropdown을 이용하여 화면을 만들었더니 submit()을 타지 못하고 있네요. 뭐 스크립트 함수 하나 만들어서 강제로 script를 타게 하면 될거라고 생각됩니다. // === 그누 기본 테마의 코딩 // === 클릭하면 바.. 2020. 7. 14.
그누보드 테마 제작 23 - 게시글 부가 페이지 개발 부가 페이지란, 아래 영역을 말하는겁니다. 저 영역을 남겨두긴 했는데, 저기에 뭘 넣어야 할지 답을 못정하고 있다. 걍 없애버릴까도 잠깐 생각이... sir.kr에서 찾아봐야겠습니다. 아.. 기본테마에서도 찾아봐야겠어요. 별거 없네요... SIR에서 가져온 본 게시판의 최신글과 인기글을 배치하고 그 아래로 최신 댓글을 위치시켜보겠습니다. 이번에도 작업 순서를 정해서 진행해볼게요. 1. 보기 페이지의 Side 영역을 위한 파일을 생성합니다. 2. Metronic Admin 템플릿을 이용하여 UI 만들기 3. 각 게시판의 최신글과 인기글을 돌려줄 쿼리 제작 4. 각 게시판의 최신 댓글과 인기 댓글을 돌려줄 함수 제작 5. /bbs/view_side.php 개발 6. view_side.skin.php 개발 이.. 2020. 7. 10.
그누보드 테마 제작 22 - 게시글 리스트 페이지 개발 게시판 관련 마지막 작업이네요. 바로 게시글 리스트 작업입니다. 그누의 기본 테마를 살펴보고, 이전에 준비해둔 제작할 테마의 모양을 보겠습니다. 지금까지 게시글에 적용하는 UI는 사실 Metronic Admin에서 제공하는 Mail UI 였습니다. 여러가지로 비슷해보여서 작업을 하고 있습니다만, 고쳐야 할 부분이 너무 많아서 시간이 많이 걸리고 있네요. (사실 그만 할까 라는 생각도 굴뚝같습니다. 그러나 나와의 약속이니 어떻게든 마무리하려 합니다.) Metronic Admin UI를 개발 중인 테마 화면에 붙여봅니다. 오늘은 순서를 정해보고 하겠습니다. 1. 카테고리 영역 2. 게시글 상단 영역 3. 게시글 리스트 영역 4. 페이징 영역 5. 검색 영역 이 정도 업무로 나뉘는것으로 보여집니다. 이제 달려.. 2020. 7. 9.
그누보드 테마 제작 21 - 게시글 보기 및 댓글 페이지 개발 지난 포스팅에서 정말이지 우여곡절 끝에 게시글 작성 및 수정 페이지를 완료했었습니다. 그 느낌이 부여잡고 보기 페이지를 완료시키려 합니다. 기본 그누 테마의 보기 페이지를 확인하고, 현재 개발 중인 테마의 깨지고 있는 모습을 확인합니다. 어째 두개 다 깨져보이는 이유는 뭘까요? 흠... 어떻게 해야 할지 좀 감이 안잡히네요. 이건 뭐 둘 다 깨져보이니... 정확히 말하면 제가 제일 못하는 화면 구성을 어떻게 해야 할지가 고민됩니다. 하는 수 없이 Metronic Admin 템플릿을 뒤져봐야겠죠... 오... 템플릿 중 메일 폼이 있는데, 이게 그나마 제일 비슷한 것 같네요. 맘에 듭니다. https://keenthemes.com/metronic/preview/demo1/custom/apps/inbox.h.. 2020. 7. 8.
그누보드 테마 제작 20 - 게시글 작성 및 수정 페이지 개발 오늘은 드디어 대망의 게시판 작업이 진행됩니다. 그 중에서도 오늘은 게시물 작성(쓰기) 및 수정 페이지를 먼저 만들려고 합니다. 게시판도 회원가입만큼 많은 옵션을 가지고 있습니다. 회원가입은 모두 사용으로 설정하고 작업하니 큰 문제가 없었는데요. 게시판은 사용함과 안함의 차이가 있는 것들이 일부 있을 것으로 보여집니다. (예: 위지윅에디터 사용 여부 등) 이런 이유로 일단은 모두 사용으로 정의해놓은 상태에서 작업을 진행하고, 하나씩 풀어가면서 확인 및 디버깅 작업을 하려고 합니다. 게시판 설정을 위하여 어드민 사이트로 이동합니다. 먼저 스킨을 테마의 basic과 테마의 gallery로 변경합니다. 공지사항을 먼저 작업을 할 계획입니다. 공지사항의 쓰기 페이지가 완료되면, 자유게시판, 갤러리, QA를 순서.. 2020. 7. 7.