메뉴 건너뛰기

MH

내 사랑치 않고 끝내는 것 보다 사랑해서 잃어 버리는 편이 좋다.

It is better to have loved and lost than to have never loved at all.

문하우스
2019.03.27 00:37

게시판으로 간단한 거래장부 만들기

조회 수 293 추천 수 0 댓글 0
Extra Form
원작자 80san
적용여부 NO

홈페이지 의뢰를 받고 작업중 클라이언트로 부터 간단한 거래장부 프로그램을 구할 수 없을까 하는 문의를 받고 생각을 해 보다.

간단한 거래장부 정도는 홈피 게시판으로도 만들 수 있을 것 같아서 꾸며 보았습니다.

참고로 고객의 거래 장부라 보여 드릴 수는 없습니다.

 

먼저 스케치북게시판 과 게시판 확장변수 다중검색 애드온 이 필요하며 스케치북게시판도 수정을 합니다.

 

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>

 

85줄 <a>에 style을 추가합니다.

<a style="color:orange; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden"

 

119줄 <td>에 style을 추가합니다. 

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시 전체를 볼 수도 있습니다.

 

img_1.png 

2. 게시판수정 작업을 완료 했으면 거래처에 필요한 주요 내용들을 확장변수로 만듭니다.

항목작성중 검색부분을 "예"로 선택하시면 이 확장변수들로 "게시판 확장변수 다중검색 애드온"에서 상세검색을 할 수 있습니다. 

참고로 형식을 전화번호형식으로 지정하면 애드온에서 오류를 일으킵니다. 

img_014.jpg

 

3. "게시판 확장변수 다중검색 애드온"을 설치하고 해당 mid를 지정합니다.

게시판관리 - 고급설정 - 목록설정 에서 검색할 확장변수 이름을 추가하시면 목록게시판에 출력됩니다.

img_015.jpg

 

4. 게시판설정에서 "글 작성시 미리 입력된 글 출력"란에 기본이 될 장부 형식의 테이블을 짜 넣습니다.

http://tablesgenerator.com/html_tables 에서 자신이 필요한 테이블을 짜시면 편리합니다.

img_016.jpg

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>

에디터에서 편집한 코드를 "글 작성시 미리 입력된 글 출력"란에 붙여넣기 하시면 글 작성시 자동으로 내용입력란에 테이블이 출력됩니다.

img_017.jpg

 

5. 만약 거래장마다 테이블을 다른게 적용해야 되는 경우는 템플릿 컴포넌트 를 활용하시면 편합니다.

그리고템플릿 컴포넌트 스마트테이블 MH 템플릿을 참고하시여 테이블코드를 넣어서 각각의 테이블을 만들어서

글 작성시 출력해 주면 편합니다.

img_018.jpg

6. 모바일의 경우는 리스트형으로 게시판을 선택하면 아무래도 가로폭의 제약이 있으므로 웹진형으로 선택하면 보기가 편합니다.

img_019.jpg

위의 이미지와 같이 성명: ~ 내역:~ 부분이 상단에 출력되게 할려면

/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에서 출력]

img_020.jpg

 

[모바일에서 출력]

img_021.jpg

모바일의 경우는 테이블부분이 스와이프 작동됩니다.

 

끝으로 위와 같이 홈피에서 거래장을 만들면 인터넷이나 와이파이가 작동되는 어떤 곳에서도 PC나 테블릿, 모바일로 거래명부를 쉽게 볼 수 있고 작성할 수 있습니다.

Who's 팔공산

profile

이 世上에서 現在가 가장 중요한 時間이며,
내가 만나고 있는 바로 그 사람이 第一 중요한 사람이며,
同時에 가장 중요한 것은 그 사람에게 善으로서 行하는 것이다.

Atachment
첨부 '9'
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
?

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
269 XE타운 XE보드에서 getTimeGap을 하루전, 2일전, 1달전 등으로 바꾸고 싶습니다 file 웹지기 2020.02.01 17 변형
268 XE타운 프로필 이미지가 없는 경우 물음표(?)가 아닌 닉네임 앞자리 + 개별 배경색 표시 file 구름이 2020.01.07 17 변형
267 문하우스 mh_fullpage 레이아웃과 sketchbook5 게시판스킨의 충돌 해결 80san 2020.01.06 25 적용
266 문하우스 제목에 마우스 Hover시 썸네일 출력하기 file 80san 2019.12.24 22 적용
265 문하우스 마감일자 있는 게시판 내용을 위젯으로 출력해 보기 file 80san 2019.12.07 31 적용
264 XE타운 마감일자가 있는 성격의 게시물 제목에 자동으로 상태(종료, 오늘종료, 진행중 등등 ) 반영하기 팁 file 마트몬 2019.12.03 57 변형
263 문하우스 Html안에서 이미지 경로 설정 방법 80san 2019.11.24 61 적용
262 문하우스 로그인 회원만 파일 다운로드 되게 스케치북 게시판 수정방법 file 80san 2019.11.23 62 적용
261 문하우스 게시판 상단에 풀립형식으로 위젯이나 기타글 등록하는 방법 file 80san 2019.11.16 77 적용
260 문하우스 위젯에 닫기 버턴을 달아보자 file 80san 2019.11.08 66 적용
259 문하우스 레이아웃에 Elegant Accordion 갤러리 적용하는 방법 file 80san 2019.11.05 58 적용
258 XE타운 게시판목록 제목 뒤에 붙는 아이콘 제어하기 file 구름이 2019.10.23 86 적용
257 XE타운 사이트의 특정파일(이미지,동영상,압축파일)들을 타 사이트에서 링크 금지 시키는 방법 튜닝셀프 2019.10.19 98 적용
256 문하우스 "게시판 전체 검색 모듈"을 스케치북에 적용하는 방법 file 라르게덴 2019.10.15 84 변형
255 문하우스 Lightbox 적용 위젯에서 원본 파일 출력 file 80san 2019.09.22 108 적용
254 문하우스 에니메이션(-webkit-animation) 효과 쉽게 적용하는 방법 file 80san 2019.09.19 123 적용
253 Xe 위젯에 특정 카테고리글만 출력하기 file 앙띠2 2019.09.10 348 적용
» 문하우스 게시판으로 간단한 거래장부 만들기 file 80san 2019.03.27 293 NO
251 문하우스 호스팅 이전 하면서 /xe 떼고 SSL설치한 경험기 입니다. file 80san 2019.03.16 247 적용
250 문하우스 게시글보기 링크문구 바로가기 아이콘 출력 file 80san 2019.02.23 272 적용
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14

위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...