-
쇼핑몰 장바구니 이렇게 쉽게 만든다고 ?? (Feat : 코딩 없는 찜 목록)스마트메이커 2024. 2. 20. 19:29반응형
쇼핑몰에서 쇼핑을 하다가 마음에 드는 품목이 있다면 해당 품목을 장바구니에 담아 넣어 놓던가 아니면 찜을 해 놓고 계속 쇼핑을 하던가 할 텐데요, 쇼핑몰에서 장바구니 혹은 찜목록을 어떻게 구현하는지 궁금하시죠?
안녕하세요.
위 제목에서 알 수 있듯이 쇼핑몰에서 장바구니, 혹은 찜목록을 스마트메이커로 코딩 없이 어떻게 구현할 수 있는지 배워보도록 하겠습니다. 여기서는 가장 기본적인 장바구니(찜목록)를 구현하는 방법으로 초중급 스마트메이커 개발자에게 도움이 되었으면 합니다. 자~ 그럼 시작해 보겠습니다.
1. 데이터베이스 테이블 생성 하기
데이터베이스의 테이블을 생성하기 위해서 스마트메이커에서는 테이블생성을 위한 화면을 디자인 후 키보드의 F5, F10키를 순서대로 눌러 테이블을 생성합니다. 하지만, 여기서는 테이블 생성을 위한 화면디자인 없이 heidisql(하이디)을 사용할 수 있다는 전제로 학습을 진행하려 합니다. 위 화면과 같이 찜리스트 테이블을 생성합니다.
각 칼럼에 대해 간략하게 설명하자면, 등록번호, 제품번호, 아이디의 칼럼으로 구성되어 있으며 등록번호가 PK(프라이머리 키)입니다. 제품번호는 상품등록테이블의 등록번호가 저장되는 칼럼이며, 아이디는 로그인한 사용자의 아이디를 저장하기 위한 칼럼입니다.
2. 화면 디자인 하기
지난 시간에 쇼핑몰을 상품리스트 폼을 만들어 보았습니다. 상품리스트의 품목을 선택하면 해당 품목에 대한 상세페이지를 아래와 같이 디자인합니다.
사용된 아톰은 사각형 그리기, 이미지입력란,, 데이터입력란, 기능버튼입니다.
화면 디자인 시 주의사항은 폼영역 밖에 4개의 데이터입력란을 배치하였습니다.
반응형2-1 아톰 속성 설정하기
화면디자인 시 사용된 아톰들의 속성을 설정해야 합니다. 스마트메이커로 앱 개발 시에 속성설정은 기본입니다. 속성 설정에 앞서 각 아톰에 대한 속성을 이해하고 있어야 하며, 이에 대해 자세히 알고 싶으시면 아래 링크 클릭 후 학습해 보시길 추천합니다.
또한 각 아톰들의 데이터속성을 이용하여 데이터베이스의 테이블과 연결할 수 있으니 아래 링크도 학습해 보시길 추천합니다.
화면 디자인에 사용된 아톰들의 스타일 속성은 설정할 것이 없으며 데이터 속성을 아래 그림과 같이 설정합니다.
상품명(데이터입력란), 가격(데이터입력란) 아톰의 데이터 속성도 마찬가지로 필드명을 아톰명과 같게 선택합니다. (위 그림에서 필드명만 바뀌었으므로 설정이미지(화면)는 생략하였습니다.)
폼 디자인 시 바깥영역에 있는 등록번호(데이터입력란)와 찜등록번호를 아래 화면과 같이 데이터 속성을 설정합니다.
아이디(데이터입력란), 찜결과(데이터입력란) 아톰은 상품리스트에서 파라미터로 값을 받아오기 위한 아톰입니다. 따로 설정할 것은 없습니다. 이렇게 해서 아톰들의 속성 설정을 마쳤습니다. 계속 다음 과정을 따라 해 보세요. 파이팅 ~
3. 진행관리자로 이벤트 설정하기
진행관리자를 이용해서 장바구니 담기(찜하기)를 클릭했을 때 이벤트를 설정해야 합니다. 이벤트설정 시 미리 데이터베이스에 존재하는 테이블의 값을 조회할 수 있는 DB처리객체를 만들어 사용해야 하며, DB처리객체에 "찜하기"객체가 존재해야 합니다. 이를 위해서 DB처리 객체를 실행하여 "찜하기"객체를 미리 생성해 놓습니다. (DB처리 객체에서 "찜하기"라는 객체명이 존재한다는 전제하에 진행합니다. 객체 생성 시 아래 화면 참조하시기 바랍니다.)
이벤트 설정을 아래 화면과 같이 설정을 합니다.
이렇게 해서 코딩 없이 스마트메이커로 장바구니(찜목록) 만들기를 완성하였습니다. 이제 스마트메이커의 실행모드를 실행시커 잘 작동하는지 테스트를 해보시기 바랍니다. 참고로 아래는 실행화면입니다.
여러분은 잘 동작하시나요? 혹시, 잘 안되시는 분들을 위해 파일을 첨부합니다.
다음 시간에는 장바구니(찜목록)에 담겨있는 품목을 보여주는 폼과 삭제처리를 할 수 있는 폼을 만들어 볼까 합니다.
다음 포스팅도 많이 기대해 주세요.
오늘은 여기까지...
감사합니다.
728x90