홈페이지 의뢰를 받고 작업중 클라이언트로 부터 간단한 거래장부 프로그램을 구할 수 없을까 하는 문의를 받고 생각을 해 보다.
간단한 거래장부 정도는 홈피 게시판으로도 만들 수 있을 것 같아서 꾸며 보았습니다.
참고로 고객의 거래 장부라 보여 드릴 수는 없습니다.
먼저 스케치북게시판 과 게시판 확장변수 다중검색 애드온 이 필요하며 스케치북게시판도 수정을 합니다.
1. 스케치북게시판에서 목록형을 약간 개조합니다.
만약 전체 홈피에서 목록형게시판을 사용하지 않는다면 "_list_normal.html" 파일을 직접 수정하셔도 되고,
아니면 임의의 게시판형식을 하나 만드셔도 됩니다.
23줄 부분 {$lang->title}부분(제목)을 적당히 수정합니다.
<th scope="col" class="title"><span><a href="{getUrl('sort_index','title','order_type',$order_type)}"><!--@if(!$mi->link_board)-->작업내역<!--@else-->{$lang->link_site}<!--@end--><i cond="$sort_index=='title'" class="arrow {$order_icon}"></i></a></span></th>
<a style="color:orange; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden"
max-width:100px는 적당한 사이즈를 적어 넣어시고,
아래 부분은 확장변수란에 마우스 hover시 전체 확장변수명이 출력되는 옵션으로 말풍선(툴팁) 애드온이 설치되어 있어야 작동합니다.
class="pr_tooltip" pr_color="dark" pr_position="top" title="{$document->getExtraValueHTML($val->idx)}"
<td cond="$val->idx!=-1" style="max-width:100px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden" class="pr_tooltip" pr_color="dark" pr_position="top" title="{$document->getExtraValueHTML($val->idx)}" class="<!--@if($val->eid=='link_url')-->link_url<!--@else-->m_no<!--@end-->">
위와 같이 수정하시면 확장변수란들이 max-width보다 넓어지지 않고 작업내역의 넓이가 보장되며, 글이 1줄이상 출력되지 않습니다. 그리고 "말풍선 애드온" 설치하시면 줄어 들었던 확장변수들도 마우스 hover시 전체를 볼 수도 있습니다.
2. 게시판수정 작업을 완료 했으면 거래처에 필요한 주요 내용들을 확장변수로 만듭니다.
항목작성중 검색부분을 "예"로 선택하시면 이 확장변수들로 "게시판 확장변수 다중검색 애드온"에서 상세검색을 할 수 있습니다.
참고로 형식을 전화번호형식으로 지정하면 애드온에서 오류를 일으킵니다.
3. "게시판 확장변수 다중검색 애드온"을 설치하고 해당 mid를 지정합니다.
게시판관리 - 고급설정 - 목록설정 에서 검색할 확장변수 이름을 추가하시면 목록게시판에 출력됩니다.
4. 게시판설정에서 "글 작성시 미리 입력된 글 출력"란에 기본이 될 장부 형식의 테이블을 짜 넣습니다.
http://tablesgenerator.com/html_tables 에서 자신이 필요한 테이블을 짜시면 편리합니다.
Table을 만들때 테이블의 전체넓이를 675px정도로 맞추시면 스케치북에서 인쇄시 A4용지에 가로사이즈가 맞습니다.
인쇄할일이 없어면 굳이 전체넓이를 맞출 필요는 없고요.
"Copy to clipboard"를 해서 에디터편집기에 붙여 넣기를 합니다.
상단의 </style>바로 밑에 보면 아래 table코드가 시작되는데
<div style="overflow-x: auto;">을 추가합니다.
모바일에서 테이블의 넓이가 화면 범위를 넘어설때 스와이프기능이 작동되게 하는 코드입니다.
참조 https://moonhouse.co.kr/html/480352
그리고 table의 width를 100%로 하시면 PC에서는 게시판전체폭으로 모바일에서는 설정한 가로폭으로 출력됩니다.
</style>
<div style="overflow-x: auto;">
<table class="tg" style="undefined;table-layout: fixed; width: 100%">
<colgroup>
<col style="width: 44px" />
~ 생략 ~
</table>
</div>
에디터에서 편집한 코드를 "글 작성시 미리 입력된 글 출력"란에 붙여넣기 하시면 글 작성시 자동으로 내용입력란에 테이블이 출력됩니다.
5. 만약 거래장마다 테이블을 다른게 적용해야 되는 경우는 템플릿 컴포넌트 를 활용하시면 편합니다.
그리고템플릿 컴포넌트 스마트테이블 MH 템플릿을 참고하시여 테이블코드를 넣어서 각각의 테이블을 만들어서
글 작성시 출력해 주면 편합니다.
6. 모바일의 경우는 리스트형으로 게시판을 선택하면 아무래도 가로폭의 제약이 있으므로 웹진형으로 선택하면 보기가 편합니다.
위의 이미지와 같이 성명: ~ 내역:~ 부분이 상단에 출력되게 할려면
/modules/board/m.skins/sketchbook5/_list_webzine.html을 아래와 같이 코드를 첨부해 주시면 됩니다.
<!--// 확장변수 제목상단에 출력 -->
<h3 class="name">
<!--@if(!$mi->extra_val_no1)-->{@ $mi->extra_val_no1 = 1; }<!--@end-->
<!--@if($oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted()) )-->
<!--@if($document->getExtraValue($mi->extra_val_no1))-->
{@$extravar_list = $document->getExtraVars()}{$extravar_list[1]->name} : {$document->getExtraValue(1)}
<!--@else-->
<!--@end-->
<!--@end-->
<span style="font-size:0.8em; color:#888">내역 : {$document->getTitle($mi->subject_cut_size)}</span>
</h3>
<!--// 제목 -->
<h3 class="ngeb" cond="$mi->guest_name == ''">{$document->getTitle($mi->subject_cut_size)}</h3>
7. 최종적으로 거래장을 작성한 모습입니다.
[PC에서 출력]
[모바일에서 출력]
모바일의 경우는 테이블부분이 스와이프 작동됩니다.
끝으로 위와 같이 홈피에서 거래장을 만들면 인터넷이나 와이파이가 작동되는 어떤 곳에서도 PC나 테블릿, 모바일로 거래명부를 쉽게 볼 수 있고 작성할 수 있습니다.
p.s 이후에 게시판 스킨을 따로 분리해서 만들었습니다.
거래장+Map 게시판스킨 Mh Books - https://moonhouse.co.kr/xemy/529922