쇼핑몰 이렇게 쉽게 만들어도 되나요 ? (Feat:코딩 없이 상품 목록 만들기)

안녕하세요.

쇼핑몰앱을 만들기 위해서는 여러 단계의 절차를 거쳐야 합니다. 간단히 설명드리면 사업계획 수립단계를 시작으로 쇼핑몰 플랫폼 선택, 쇼핑몰 구축, 쇼핑몰 운영, 법적규정준수, 개인정보보호, 보안등 여러 단계를 거쳐 쇼핑몰을 제작할 수 있을 것입니다. 오늘은 쇼핑몰 구축에 필요한 단계 중 상품목록을 소비자에게 보여주는 폼을 코딩 없이 스마트메이커를 이용하여 만들어 보도록 하겠습니다.

 

쇼핑몰 상품목록 화면

 

우선 상품목록을 제작하기 위해서는 상품의 이미지와 상품정보 등이 저장될 데이터베이스가 필요하며 이를 위한 데이터베이스 구성(디자인)이 필요합니다. 천천히 따라 해 보시길 추천드립니다.

 

1. 데이터베이스 구성 하기

 

스마트메이커에서 데이터베이스를 구성하기 위해서 폼을 먼저 만들고 F5, F10키를 이용하여 자동으로 데이터베이스를 생성하는 방식을 사용할 수도 있지만, 이 번 포스팅에서는 Heidisql을 사용할 줄 안다는 가정하에 직접 데이터베이스를 디자인해 보도록 하겠습니다. Heidisql을 실행시켜 다음과 같이 테이블을 구성합니다.

 

1.1 테이블 구성

 

테이블명 : 상품등록

 

컬럼명	데이터유형	길이/설정	NULL 허용여부	기본값
등록번호	CHAR	4		없음
이미지	LONGBLOB		√
상품종류	CHAR	50	√
상품명	CHAR	50	√
가격	INT	11	√
비고	VARCHAR	255	√

 

 

데이터베이스 디자인 화면

 

위와 같이 Heidisql을 실행하여 데이터베이스를 디자인합니다.

 

 

2. 상품정보 데이터베이스에 등록하기

상품정보를 데이터베이스에 저장하기 위해서는 상품의 정보를 저장하기 위한 폼을 만들어야 합니다. 폼을 이용해 기본 데이터를 입력받아서 데이터베이스에 저장하도록 합니다.

 

2-1 상품등록 폼 만들기

 

상품등록 디자인 화면

 

위와 같이 아톰을 배치 후 스타일속성 및 데이터속성을 다음과 같이 설정합니다.

(주의: F5, F10을 눌러 데이터베이스를 생성할 수 있습니다. 하지만, Heidisql에서 미리 만들어 났기 때문에 생성할 필요가 없습니다.)

 

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

 

DB정보설정

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

테이블명 : 상품등록

필드명    : 등록번호

자료형태 : 문자형

최대자릿수 : 4

 

검색옵션

기본검색키, 자동검색, 자동증가에 체크 설정

 

 

아톰명 : 상품종류 (콤보박스)

 

DB정보설정

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

테이블명 : 상품등록

필드명    : 상품종류

자료형태 : 문자형

최대자릿수 : 50

 

검색옵션

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

 

스타일속성(상품등록)

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

스타일속성에 자체정의 선택 후 상의, 하의 추가 설정

 

 

아톰명 : 상품명 (입력란)

 

DB정보설정

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

테이블명 : 상품등록

필드명    : 상품명

자료형태 : 문자형

최대자릿수 : 50

 

검색옵션

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

 

반응형

 

아톰명 : 가격 (입력란)

 

DB정보설정

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

테이블명 : 상품등록

필드명    : 가격

자료형태 : 정수형

최대자릿수 : 11

 

검색옵션

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

 

 

아톰명 : 이미지입력 (이미지입력란)

 

DB정보설정

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

테이블명 : 상품등록

필드명    : 이미지입력

자료형태 : 이미지형

최대자릿수 : 비활성화(자동으로 비활성 됨)

 

마지막으로 저장버튼의 스타일속성에서 기능선택의 저장을 선택합니다.

 

 

모든 과정이 끝나면 실행모드로 전환하여 상품종류, 상품명, 가격, 이미지 등을 선택한 후 저장을 클릭하여 데이터베이스에 상품정보를 저장합니다. 여기서 만든 쇼핑몰은 의류를 판매하는 쇼핑몰이 컨셉 이므로 데이터베이스에 저장된 이미지와 각종 정보는 의류와 관련된 정보입니다. 다른 쇼핑몰을 만들고 싶으신 분들은 용도에 맞게 수정하여 데이터를 입력하면 됩니다.

 

상품등록 실행화면

 

이렇게 해서 데이터베이스의 기초 데이터가 완성되었습니다. 거듭 말씀드리지만 데이터는 본인의 제작의도에 맞추어 데이터를 입력하시면 됩니다. 테스트를 위해서 4~5개 정도의 기초데이터를 입력하시길 추천합니다.

 

포스팅이 길어지는 관계로 상품목록 구현방법은 다음 블로그에 포스팅을 진행할까 합니다. 계속 공부하고 싶으신 분들에게는 죄송하지만, 포스팅이 길어지면 좀 지루해하시는 분들이 계신 것 같아서요. 다음 포스팅 기대해 주세요.

 

오늘은 여기까지...

감사합니다.