군포시공익활동지원센터 kboard 커스텀 후기 입니다.
1. 등록 페이지 (editor.php)
지점등록에 필요한 컬럼 추가
필드추가에는 여러가지 방법이 있다.
(1). Kboard에서 제공하는 필드추가 방법
관리자페이지 로그인 / kboard / 게시판 목록 및 관리 / 수정이 필요한 게시판 선택 / 입력필드
여기서 필요한 필드를 선택한 후 필드 이름과(필드 레이블)과 메타키를 입력
장점 : 시간이 적게 든다. 접근이 쉽다.
단점 : 새로운 게시판에서 똑같은 필드를 사용해야 하는 경우, 필드를 하나씩 다시 추가해야한다.
(2). 필드 커스텀
vscode 또는 파일질라를 통해 ftp서버에 접속 후 php파일을 수정하는 방법
VSCode 접속 / ftp-simple 다운로드 / ftp-simple : open the file directly from FTP server에 해당 홈페이지 ftp정보 입력 / f1 누른 후 ftp-simple : remote directory open to workspace / 수정해야하는 kboard 스킨 선택 후 php파일 수정
editor.php같은 경우 등록페이지에 기본적인 틀과 editor-fields.php에 커스텀 된 필드들은 출력 해 주는 로직인것 같다. 필드를 커스텀 해야 할 경우 editor-fields.php에 있는 다른 필드를 복사 후 수정하는 방법이 제일 안전하다.
단점 : 시간이 많이 걸린다.
장점 : 필드를 코드로 넣어버렸기 때문에 다른 게시판에서 똑같은 스킨을 적용할 경우 필드 또 다시 추가하지 않아도 된다. 코드를 수정하면서 홈페이지를 보고 수정이 용이하다.
이번 군포시홈페이지는 대부분 kboard에서 제공하는 필드들로 가능해서 (1) 방법을 많이 사용했다.
2. 리스트 페이지 (list.php)
(1). 지도연동
지도연동은 생각보다 쉬운 편이었다. Kboard에서 제공하는 스킨 중 ocean-franchise 스킨의 경우 대한민국 지도를 사용하는데 이걸 군포시 지도로 바꾸면 된다.
방법은 <img src=”<?php echo $skin_path?>/images/군포시.png”> 기본적이미지로 군포시 지도를 준비하고,
<div class=”map-area” data-map=”<?php echo $skin_path?>/images/산본1동.png”> 마우스 hover시에 data-map이라는 kborad가 지정한 데이터 속성으로 img src가 변경되는 방법인 것 같다.
<a href=”<?php echo $url->set(‘category1’, ‘산본1동’)->tostring()?>”>
또한 위와같은 a태그를 이용해서 카테고리1중 ‘산본1동’ 키워드를 가진 데이터를 출력하는 url로 이동할 수 있다.
(2). 다중 필드 검색
여러필드에 원하는 값을 지정 후 해당 값에 부합하는 지점을 list에 출력하는 검색 기능
우선 검색을 위해서는 form이 필요하다.
<form id=”kboard-search-form-<?php echo $board->id ?>” method=”get” action=”<?php echo $url->toString() ?>”>
해당 폼이 있으면 get매서드를 통해 form안에 있는 input 또는 select들의 값이 전송된다 ( 내 생각에는 kboard에서 운영하는 controller로 전송하지 않을까 싶다.)
아래는 form 안에 있는 input 또는 select 이다.
<!--주소검색 input-->
<input type="text" name="keyword" value="<?php echo kboard_keyword() ?>">
<!-- count 옵션 필드 검색 -->
<?php $count = isset($kboard_search_option['count']['value']) ? $kboard_search_option['count']['value'] : ''; ?>
<input type="hidden" name="kboard_search_option[count][key]" value="count">
<select name="kboard_search_option[count][value]">
<option value="">수용인원</option>
<option value="1명~10명" <?php if ($count == '1명~10명'): ?> selected<?php endif ?>>1명~10명</option>
<option value="10명~20명" <?php if ($count == '10명~20명'): ?> selected<?php endif ?>>10명~20명</option>
<option value="40명~50명" <?php if ($count == '40명~50명'): ?> selected<?php endif ?>>40명~50명</option>
</select>
<!-- place_info 옵션 필드 검색 -->
<?php $count = isset($kboard_search_option['place_info']['value']) ? $kboard_search_option['place_info']['value'] : ''; ?>
<input type="hidden" name="kboard_search_option[place_info][key]" value="place_info">
<select name="kboard_search_option[place_info][value]">
<option value="">공간유형</option>
<option value="회의" <?php if ($place_info == '회의'): ?> selected<?php endif ?>>회의</option>
<option value="강연(세미나)" <?php if ($place_info == '강연(세미나)'): ?> selected<?php endif ?>>강연(세미나)
</option>
<option value="공연" <?php if ($place_info == '공연'): ?> selected<?php endif ?>>공연</option>
</select>부가적으로 위 코드에서 <?php if ($count == ‘1명~10명’): ?> selected<?php endif ?> 이 코드는 $count 변수에 값이 ‘1명~10명’과 같다면 seleted 되도록 하는 코드인데 얻어걸린 코드이다.
수정하면 다음과 같다.
<?php if ($kboard_search_option[‘count’][‘value’] == ‘1명~10명’): ?> selected<?php endif ?>
이렇게 하면 2차원베열로 지정되어있는 count ,value가 오류없이 출력된다.
php에서 값을 확인, 출력하는 코드
<?php echo '<pre>'; print_r($kboard_search_option['count']['value']); echo ''; ?>참고 : 코스모스팜 입력필드 검색방법
3. 상세 페이지 (document.php)
(1). 슬라이드
슬라이드를 만드는 방법은 순수 자바스크립트로 구현하는 방법이 있고, kboard 스킨중에서 제공하는 방법을 이용하는 방법이있다.
처음 슬라이드를 만들때는 순수 자바스크립트로 구현을 해보았다. 참고:스크립트 슬라이드
그런데 슬라이드의 개수를 정하는 부분에 있어서 kboard에 미디어 추가 또는 첨부파일을 이용해야 했는데, ‘kboard 미디어 추가’ 기능을 이용하려할때 어려움이 많아서 첨부파일을 이용했더니 지저분해지고 단점이 많았다.
그래서 kboard-first-contents-mall에서 제공하는 슬라이드를 보고 이용했다.
코드는 다음과 같다.
<?php if($media_list):?>
<div class="kboard-first-contents-mall-image-gallery">
<?php foreach($media_list as $media_item):?>
<div data-thumb="<?php echo kboard_resize($media_item->file_path, 200, 200)?>" data-src="<?php echo site_url($media_item->file_path)?>">
<img src="<?php echo site_url($media_item->file_path)?>" alt="<?php echo esc_attr(basename($media_item->file_name))?>">
</div>
<?php endforeach?>
</div>
<?php else:?>
<div class="kboard-first-contents-mall-no-image"></div>
<?php endif?>php코드 안에있는 div를 media_item의 개수 만큼 만들고 해당 div안에 이미지 주소를 media_item의 주소로 입력하는 코드이다.
슬라이드의 로직은 js와, css를 이용해서 만들었다.