홈페이지 만들기

개요

안녕하세요. 애니빌드 입니다.

이전 강좌에서 견적문의, 맞춤게시판, 맞춤전송폼 등을 설치해 보았습니다.
사용해보셨다면 이런 단품 프로그램은 모두 제작 방법이 동일하다는걸 느끼셨을 겁니다.

하지만 이번에 추가할 제품소개 솔루션은 다양한 기능이 포함되어 있고 제공되는 디자인페이지가 많기 때문에 단품 프로그램보다 작업량이 조금 더 많습니다.

이번 강좌를 통해 제품소개 솔루션 설치 방법을 익힌다면, 이후 쇼핑몰 솔루션, 구인구직솔루션, 뉴스기사 솔루션등 모두 설치 방법이 동일하기 때문에 쉽게 작업 하실수 있으리라 봅니다.^^

프로그램 설치

설치

[프로그램샵 > 프로그램 추가설치 > 프로그램 견적문의]에서 아래와 같은 솔루션들이 제공되고 있음을 확인 할 수 있습니다.

설치 방법은 동일 합니다.

[제품소개 솔루션]으로 들어가셔서 모듈만 설치 합니다.

설치 하고 나면 관리자모드 메뉴에 [제품관리]라는 새로운 대메뉴가 생성 됩니다.
단품 프로그램은 대부분 "프로그램 환경설정"에 설치 되지만 솔루션은 관리자 모드 대메뉴로 바로 설치 됩니다.

솔루션은 기능이 많기 때문에 우선 기본적인 데이타를 임의로 등록 하고 진행하시는것이 좋습니다.

설정

권한설정

[제품 관리 > 제품분류 관리 > 분류 기본 설정]에서 "최상위 접근권한 "에 비회원에 체크 합니다.

[제품 관리 > 제품 관리 > 환경설정]에서 접근권한을 설정 합니다.

분류설정

[제품 관리 > 제품분류 관리 > 분류 관리]에서 아래와 같이 분류를 생성 합니다.

제품등록

제품을 임의로 등록 합니다. [제품 관리 > 제품 관리 > 제품 관리]에서 상품을 임의로 약 10개 가까이 등록 합니다.
이때 등록폼에서 사용하지 않는 항목은 닫아주세요. (다시 열어야 하는 경우 [제품 관리 > 제품 관리 > 환경설정]에서 복구 할 수 있습니다.)

이렇게 제품분류와 제품정보를 등록 했다면 홈페이지 상에 정상적으로 출력될 수 있도록 해야 합니다.

제품분류 설정

메뉴 네비게이션 에서 제품리스트 링크주소를 알아내야 하는데 [제품 관리 > 제품분류 관리 > 분류 관리]에서 각 카테고리별 링크주소를 알 수 있습니다.

링크주소를 유심히 보시면 뒤쪽에 분류 코드가 들어가 있는데 이부분을 지우면 전체 상품이 출력 됩니다.
[디자인관리 > 전문가 환경설정 > 네비게이션 마법사]로 이동해서 아래와 같이 "제품소개"의 링크 주소를 변경 합니다.

페이지 수정

디자인 페이지 수정

제품 리스트가 출력 되는 부분의 디자인페이지를 수정해보도록 하겠습니다.
프로그랩샵에서 솔루션구매시 대부분 세부화면 디자인에서 셋팅 됩니다.

[디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]으로가면 아래와 같이 제품소개 페이지가 새로 생성되어 있습니다.


본 강좌에서는 제품목록 페이지와 제품 상세보기 페이지, 2개의 페이지만 사용하도록 하겠습니다.
제품목록을 클릭해서 스킨을 "서브 스킨"을 선택하고 저장 해주시구요.
우측에 기본 템플릿 디자인이 있습니다. 기본 템플릿 디자인은 수정이 불가능 하기때문에 "phpx 기본소스"선택하고 나만의 디자인으로 복사해주세요.




나만의 디자인으로 복사했다면 원하는데로 디자인 수정하시면 됩니다. 필자는 디자인 작업하지 않고 그냥 넘어가도록 하겠습니다.^^


제품 상세보기 페이지도 위와 똑같이 작업해주세요.
여기까지 작업 하신 다음 홈페이지 접속해서확인해보시면 아래와 같이 정상적으로 출력 됩니다.

제품은 출력 되고 있지만 좌측 메뉴에는 전혀 출력되지 않고 있습니다.
우리는 제품소개 솔루션에서 등록한 제품카테고리가 왼쪽 메뉴로 나와야 하는데 현재 왼쪽 메뉴는 [디자인관리 > 전문가 환경설정 > 네비게이션 마법사]에 있는 메뉴분류를 가져고 있기 때문에 당연히 출력되지 않고 있습니다.
그렇다고 해서 제품카테고리를 일일이 네비게이션 마법사에 등록해도 되지만 매우 비효율적이기 때문에 권장하지 않습니다.
해결방법은 특정 페이지에 대해서만 다른 좌측메뉴를 출력 하도록 하는 방법이 있습니다.

제품 카테고리 만들기

좌측 제품 카테고리를 만들어 보겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]으로 가셔서 [프로그램 마법사 생성]을 통해 아래와 같이 그룹디자인을 생성해주세요.


필자는 {GROUP_pj_v_lay}라는 그룹디자인을 생성 하였습니다.
생성한 그룹디자인을 "서브스킨"에 적용해야 하는데 우리는 이전 강좌에서 $NAVI_INFO 에 대해서 공부 했습니다.
$NAVI_INFO는 네비게이션 마법사에서 제공되는 변수 뿐만 아니라 페이지의 속성까지 제공하고 있습니다.

[디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 이동 하셔서 "서브스킨" 을 아래와 같이 소스 수정해주세요.

<!--@if($NAVI_INFO[page_type] == 'product')-->
	{GROUP_pj_v_lay}
<!--@else-->
	{GROUP_left_all}
<!--@end-->

소스 설명을 잠깐 드리겠습니다.
$NAVI_INFO[page_type]는 현재 접속한 페이지의 간략정보라고 보시면 됩니다.

즉 제품목록, 제품검색, 제품 상세보기등 모두 product를 반환 하게 되므로 if 문법에 의해 {GROUP_pj_v_lay} 을 출력하고, 그렇지 않은경우 {GROUP_left_all}을 출력해라는 구문 입니다.

$NAVI_INFO에 대해서 자세히 알아보시려면 http://manual.anybuild.co.kr/page/basic1_01b에서 확인 해 보시기 바랍니다.


마무리

여기까지 작업 하셨으면 홈페이지 접속 하셔서 정상적으로 작동 되는지 확인해보시기 바랍니다.
완성 화면 : http://uany03.anybuild.co.kr/product/product_list.htm
여기까지 잘따라 오셨다면 쇼핑몰 솔루션 , 구인구직 솔루션, 뉴스 솔루션등 모든 솔루션은 설치 방법이 동일하기 때문에 쉽게 설치 하실수 있습니다.
수고하셨습니다.


top