오늘 미션은 알아두면 아주 유용한 기능인 나만의 목록에 대해서 설명드리겠습니다.

게시판은 다들 알고 있죠? 게시판의 한계는 틀이 정해져 있다는 겁니다.

제목, 내용, 첨부파일을 입력하는 부분이 동일하죠? 또한, 출력되는 형태도 몇가지로 고정되어 있습니다.

이런 한계점을 극복하기 위해 나만의 목록을 사용할 수 있습니다.

나만의 목록은 사용자가 원하는 입력양식과 출력양식을 직접 설정할 수 있으며, 목록화면/읽기화면/쓰기화면으로 구성되어 원하는 디자인으로 수정할 수 있답니다. 

본 미션에서는 초급 미션에서 만들었던, 매니져농장의 농장연혁을 나만의 목록을 이용해서 만들어보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

 

우선 생각해야 하는 것이 농장연혁에서 필요한 항목을 먼저 살펴봐야 합니다.

 

 

필요한 항목은 년도, 제목만 있으면 됩니다.  그리고, 년도에 따라 오름차순으로 정렬이 되면 되겠죠?

 

※ 오름차순은 작은거 -> 큰거로 올라가는 형태, 내림차순 큰거 ->작은거로 내려가는 형태로 이해하심 쉽습니다~

 

[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]로 이동한 후 나만의 목록 추가 버튼을 클릭하고 아래와 같이 입력하고 저장합니다.

 

① 나만의 목록코드를 hisotry 로 입력합니다.

② 사용여부를 체크합니다.

③ 페이지명과 등록완료시 안내멘트를 입력하세요.

④ 필요한 컬럼항목을 아래와 같이 입력합니다.

⑤ 1번째항목(년도)의 정렬순서를 오름차순으로 선택합니다.

⑥ 저장합니다.

 

 

 

 

 

 

 

 

 

 

 

 

위의 설정이 완료되면 자동으로 나만의 목록디자인으로 이동합니다.

왼쪽디자인을 "2. 매니져농장"으로 선택합니다.

 

 

아래와 같이 리스트화면(목록화면) 디자인에 기본디자인을 입력합니다.

 

① TEXT모드로 전환합니다.

② 접근권한을 설정하고, 샘플디자인을 "기본디자인"으로 선택합니다.

③ "샘플디자인 소스가져오기"를 클릭하면 편집창에 소스가 추가됩니다.

④ 수정(모두저장)버튼을 클릭하여 저장합니다.

 

 

동일한 방법으로 읽기화면과 쓰기화면에 기본디자인을 사용하여 소스를 추가합니다.

사용자가 읽고, 작성해야되는 부분이 있다면 당연히 읽기화면과 쓰기화면이 반드시 필요합니다.

그러나, 농장연혁에서는 회사연혁을 관리자가 직접 작성하므로 읽기화면과 쓰기화면이 필요없이 목록형태로 출력되는 리스트화면만 필요합니다. 

리스트화면의 소스에 대해서 설명드리겠습니다.

 

◆ 게시물의 총개수와 현재페이지의 위치를 표시하는 부분이며, 대부분의 목록형태에서 이 소스를 사용한답니다.

 

◆ 타이틀 부분입니다. {NAME1}, {NAME2}, ... 은 항목명이 자동으로 표시됩니다.

※ 자동으로 표시를 원하지 않을 경우에는 {NAME1}, {NAME2}, ... 을 지우시고, 직접 제목을 입력하시면 됩니다!

 

 

◆ 실제 목록형태로 데이터를 출력하는 소스입니다. sm_val1, sm_val2, ... 은 해당항목의 값이 출력됩니다.

    sm_read_url, sm_reg_date, sm_reg_date, sm_reg_date2 변수가 기본으로 정의 되어 있습니다.

※ 이외의 변수를 사용하고자할 경우에는 외부에 자바스크립트 함수를 따로 추가하셔서 사용하셔야 합니다.

 

 

위의 소스를 농장연혁에 맞도록 아래와 같이 수정해봅시다.

 

 

수정이 완료되면 데이터를 입력해서 결과를 확인해보도록 하겠습니다~

회사연혁의 경우에는 관리자가 직접 연혁을 입력하므로 [프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]로 이동하고 등록데이타를 클릭합니다.

 

 

데이타등록을 클릭해서 년도에 상관없이 농장연혁을 등록해봅시다. (5개정도)

아래와 같이 입력한 년도에 따라 자동으로 정렬이 됩니다.

 

 

입력이 완료되었으니 확인해봅시다. [프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]으로 이동하여, 해당 URL CODE를 클릭하면 아래와 같은 결과가 나타납니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이제 URL을 연결하는 작업만 남았습니다.

[디자인관리 》 전문가 환경설정 》 네비게이션 마법사]으로 이동한후 농장연혁을 나만의 목록의 "농장연혁"으로 경로를 변경합니다.

 

 

 

 

 

 

 

수고하셨습니다. ^^

 

 

완성화면 : http://uhkr59.aramschool.co.kr/shop_contents/myboard_list.htm?myboard_code=history