쇼핑몰 이렇게 쉽게 만들어도 되나요 ? ( 2탄 )

고객이 쇼핑몰의 상품목록을 보고 마음에 드는 상품을 찜해 놓은 뒤 마음에 드는 상품을 구입하는 것이 일반적인 쇼핑 방법일 텐데요, 지난 시간에 이어서 상품리스트를 코딩 없이 스마트메이커로 만들어 볼까 합니다.

 

 

안녕하세요.

지난 포스팅(쇼핑몰 이렇게 쉽게 만들어도 되나요 ?)에서 쇼핑몰에 필요한 데이터베이스를 디자인하였고, 테스트를 위한 기초 데이터도 5개 정도 입력하였습니다. 그럼, 본격적으로 상품목록을 만들어 보도록 하겠습니다.

 

 

상품 리스트 실행 화면

 

1. 상품 목록 폼 디자인 하기 

 

상품목록 화면 디자인 화면

 

위와 같이 상품 목록 화면을 구성 합니다. 사용된 아톰은 데이터입력란, 이미지입력란, 버튼, 뷰추가, 기능버튼 및 사각형 그리기 아톰등이 사용되었습니다. 화면 디자인 시 주의해야 할 사항은 이미지 입력란 위에 투명색을 적용한 기능버튼이 있는 것에 주의하시기 바랍니다. 투명색을 적용한 이유는 그림을 클릭했을 때 상세페이지로 이동할 수 있는 이벤트를 적용하기 위해서입니다. 그리고 폼 밖에(폼의 오른쪽) 메뉴가 존재하는데 이는 햄버거 클릭 시 나타날 메뉴이며 메뉴구성은 개발자가 원하는 대로 메뉴를 구성하면 됩니다. 또한 메뉴는 뷰추가 아톰을 사용하였으며 슬라이딩방식의 메뉴입니다. 지난 포스팅에서 햄버거 슬라이딩 메뉴를 제작하는 방법에 대해 자세히 설명되어 있는 포스팅이 있으니 궁금하신 분은 아래 링크를 참고하시기 바랍니다.

 

https://taedoristory.tistory.com/entry/%ED%96%84%EB%B2%84%EA%B1%B0%EA%B0%80-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9%EC%9D%84-%ED%95%98%EB%A9%B4-Feat-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9-%ED%96%84%EB%B2%84%EA%B1%B0-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0

햄버거가 슬라이딩을 하면 ... (Feat : 슬라이딩 햄버거 메뉴 만들기)

 

 

다음은 상품을 여러개 표시하기 위해 스크롤 묶기를 설정해야 하며, 스크롤로 묶인 아톰들의 여백(진한색 부분)을 클릭하여 아래 화면과 같이 설정해 줍니다.

 

상품 목록 스크롤 묶기 설정 화면

 

 

2. 아톰 속성 설정 하기

위에서 디자인된 아톰들의 스타일 속성 및 데이터 속성을 아래와 같이 설정해야 합니다.

 

우선, 상품버튼은 상품버튼(기능버튼)의 스타일 속성에서 기능선택을 상세폼보기로 설정합니다. 그리고 실행모델명을 @path:\상품상세. QPM으로 설정하고 참조아톰명에 등록번호, 아이디를 입력하여 상품상세. QPM에서 값을 받아 올 수 있도록 합니다.

 

콤보박스 아톰의 스타일 속성을 아래 그림과 같이 설정해 줍니다.

(주의 : 기본값없음의 선택을 전체로 바꿔주세요.)

 

콤보박스 스타일 속성 설정 화면

 

 

나머지 아톰들의 데이터 속성을 다음과 같이 설정합니다.

 

반응형

 

아톰명 : 콤보박스 (콤보박스)

 

DB정보설정

----------------

테이블명 : 상품등록

필드명    : 상품종류

자료형태 : 문자형

최대자릿수 : 50

 

검색옵션

기본검색키, 자동검색, 자동증가 모두 체크 해제

 

 

아톰명 : 등록번호 (데이터입력란)

 

DB정보설정

----------------

테이블명 : 상품등록

필드명    : 등록번호

자료형태 : 문자형

최대자릿수 : 4

 

검색옵션

기본검색키, 자동검색에 체크 설정 (자동증가는 체크 해제 합니다.)

 

 

아톰명 : 상품명 (데이터입력란)

 

DB정보설정

----------------

테이블명 : 상품등록

필드명    : 상품목

자료형태 : 문자형

최대자릿수 : 50

 

검색옵션

기본검색키, 자동검색, 자동증가 모두 체크 해제

 

 

아톰명 : 가격 (데이터입력란)

 

DB정보설정

----------------

테이블명 : 상품등록

필드명    : 가격

자료형태 : 정수형

최대자릿수 : 11

 

검색옵션

기본검색키, 자동검색, 자동증가 모두 체크 해제

 

이렇게 해서 모든 설정이 끝났습니다. 축하합니다. 이제 스마트메이커의 실행모드로 실행해 보시기 바랍니다.

아래 화면과 같이 실행화면이 나오시나요 ?  혹시 안되시는 분들을 위해 폼을 첨부합니다. 스마트메이커 공부에 도움이 되었으면 합니다.

 

상품등록.QPM

0.00MB

쇼핑몰메인.QPM

0.00MB

 

 

상품 목록 최종화면

 

어떠셨나요? 정말 코딩없이 클릭만으로 상품 목록 폼(페이지)을 제작할 수 있었습니다. 비록 쇼핑몰의 모든 기능이 포함된 폼(페이지)은 아니지만 쇼핑몰 제작 시 반드시 활용할 수 있는 기능을 이렇게 쉽게 제작해 보았습니다. 정말이지 스마트메이커의 뛰어난 능력에 감사하게 됩니다.

 

오늘은 여기까지...

감사합니다.