메뉴 건너뛰기

MH

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

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

문하우스
2019.03.27 00:37

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

조회 수 31 추천 수 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
번호 분류 제목 원작자 날짜 조회 수 적용여부
» 문하우스 게시판으로 간단한 거래장부 만들기 file 80san 2019.03.27 31 NO
251 문하우스 호스팅 이전 하면서 /xe 떼고 SSL설치한 경험기 입니다. file 80san 2019.03.16 52 적용
250 문하우스 게시글보기 링크문구 바로가기 아이콘 출력 file 80san 2019.02.23 155 적용
249 문하우스 게시판 글쓰기시 Tag부분 출력 유무 설정방법 file 80san 2019.02.17 30 적용
248 문하우스 "드래그하여 페이지/문서 이동 애드온" 적용팁 5 file 80san 2019.02.14 87 적용
247 XE타운 XE 위젯을 반응형으로 적용하자 file 도토리묵 2018.12.31 76 변형
246 XE타운 댓글이 2줄 이상일 경우 접고 펴는 기능추가하기 file 이온디 2018.11.27 74 변형
245 문하우스 Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기 file 80san 2018.11.02 90 적용
244 문하우스 Xedition 레이아웃 스킨에서 검색버턴 바꾸기 file 80san 2018.10.31 72 적용
243 문하우스 xedition레이아웃과 sketchbook5 게시판을 같이 사용시 미미한 문제점수정 file 80san 2018.10.27 78 적용
242 문하우스 구글 드라이브 자료링크를 XE게시판에 적용하는 방법 file 80san 2018.09.25 137 적용
241 XE타운 게시판 사용자정의 일자(연월일)에 시간 추가하는 방법 file sunup 2018.09.03 96 NO
240 XE타운 PC, 모바일, Tab 접속장치 구분 코드 file misol 2018.08.03 87 적용
239 XE타운 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여주는 방법 prologos 2018.07.28 55 적용
238 문하우스 구글 웹사이트 번역기 웹페이지에 간단하게 달기 file 80san 2018.07.27 80 NO
237 문하우스 이미지 Hover시 Zoom기능 출력 file 80san 2018.07.25 79 적용
236 기타 XE 위젯에 임시 저장글이 뜰때 해결방법 file 잡다한 생각 2018.07.13 26 적용
235 문하우스 외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법 file plruto 2018.02.17 208 적용
234 문하우스 Ckeditor에 스킨 설치하는 방법 file 80san 2018.02.13 281 NO
233 문하우스 Ckeditor에 플러그인 설치하는 방법 1 file 80san 2018.02.11 415 적용
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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