Flash Sale! Up to 40% off on unlimited courses, tutorials and creative asset downloads Up to 40% off on unlimited assets SAVE NOW
Advertisement
  1. Code
  2. PHP
Code

PHP와 MySQL을 이용한 장바구니 구축

by
Difficulty:AdvancedLength:LongLanguages:

Korean (한국어) translation by Dae-yeop Lee (you can also view the original English article)

이번 주 스크린캐스트 + 튜토리얼에서는 PHP와 MySQL을 이용해 장바구니를 만드는 방법을 알려드리겠습니다. 여러분도 알게 되겠지만 장바구니 만들기는 생각보다 어렵지는 않습니다.


스크린캐스트 미리보기



1단계

먼저 폴더 구조를 살펴보겠습니다.


구조

  • reset.css -이 링크를 통해 CSS를 재설정할 수 있습니다.
  • style.css - HTML 마크업의 스타일을 지정하는 데 사용할 CSS 파일
  • connection.php - 데이터베이스 연결을 생성할 파일
  • index.php - 장바구니의 템플릿
  • cart.php - 장바구니 안의 제품을 변경하는 데 사용할 파일(추가, 제거)
  • products.php - 제품 목록 페이지

2단계

먼저 HTML 마크업을 작성한 다음 스타일을 지정하겠습니다. 따라서 index.php를 열고 아래 코드를 복사해서 붙여넣습니다.

보다시피 이 페이지에는 메인 열과 사이드바로 구성된 두 개의 열이 있습니다. 이번에는 CSS로 넘어갑시다. style.css 파일을 열고 아래 코드를 입력합니다.

다음은 제품 페이지의 모습입니다.



전체 스크린캐스트



3단계

PHP/MySQL 부분으로 넘어가기 전에 먼저 데이터베이스를 만들어야 합니다. 따라서 phpMyAdmin을 열고 다음 단계를 따릅니다.

  1. 사용권한(Privileges) 탭으로 이동한 후 새 사용자 추가 버튼을 클릭하고 다음과 같이 설정합니다. 사용자명(Username): tutorial; 호스트: localhost; 암호: supersecretpassword. 이제 전역 권한이 설정됐는지 확인한 후 다음 단계로 넘어갑니다.
  2. tutorials라는 새 데이터베이스를 만듭니다.
  3. products라는 새 테이블을 만들고 필드 개수를 4로 설정합니다. 이제 다음 필드를 채웁니다. id_integer - INT로 설정하고 PRIMARY로 표시합니다(auto_increment도 설정합니다); name - 길이가 100인 VARCHAR로 만듭니다; description - 길이가 250인 VARCHAR; price - DECIMAL(2,6)으로 설정합니다.
  4. 몇 가지 견본 제품으로 테이블을 채웁니다.

시간을 절약하기 위해 products 테이블을 출력해뒀기 때문에 여러분은 다음 쿼리만 실행하면 됩니다.





4단계

데이터베이스에서 데이터를 추출하기에 앞서 제품 목록 및 장바구니의 템플릿으로 사용할 index.php를 만들겠습니다. 따라서 index.php 페이지의 맨 위에 다음 코드를 추가합니다.

  1. session_start() - 나중에 사용하기 위한 것으로서 실제로 세션을 사용할 수 있게 해줄 것입니다(다른 데이터가 브라우저로 전송되기 전에 session_start가 작성돼 있어야 합니다).
  2. 두 번째 줄에는 데이터베이스 연결을 설정하는 connection.php를 인클루드했습니다(이 내용은 조만간 다루겠습니다). 한 가지 더 설명하자면 include와 require의 차이점은 require를 사용했을 때 파일을 찾을 수 없다면 스크립트 실행이 종료된다는 것입니다. "include"를 사용하면 스크립트가 계속 작동합니다.
  3. 사이트의 모든 파일에 전체 HTML 코드(CSS에 대한 링크, js에 대한 링크)를 복사하는 대신 모두 단 하나의 파일을 참조하도록 만들 수 있습니다. 따라서 먼저 "page"라는 GET 변수가 설정돼 있는지 확인합니다. 그렇지 않은 경우 _pages라는 새 변수를 만듭니다. pages라는 GET 변수가 먼저 설정되면 인클루드할 파일이 유효한 페이지인지 확인합니다.

이를 위해서는 파일을 인클루드해야 합니다. 다음 줄을 index.php에서 ID가 "main"인 div 사이에 추가합니다.

다음은 지금까지 작성한 전체 index.php입니다.


MySQL에 대한 연결을 만들어 봅시다. connections.php를 열고 다음 코드를 입력합니다.


5단계

이제 제품 페이지에 대한 마크업을 작성할 차례입니다. 따라서 제품 페이지를 열고 다음 코드를 입력합니다.

페이지를 살펴봅시다.


보다시피 꽤나 지저분합니다. 아래의 CSS를 추가해서 스타일을 지정해 보겠습니다.

좋습니다. 이제 다른 모습으로 만들어 봅시다.


훨씬 좋아졌습니다. 그렇죠? 다음은 전체 style.css 코드입니다.


6단계

데이터베이스에서 제품을 추출하기 전에 테이블에서 마지막 두 개의 테이블 행을 제거해 봅시다(테이블의 형태를 확인하기 위해서만 사용했으니까요). 다음 코드를 제거합니다.

좋습니다! 이제 테이블 행이 있는 위치에 다음 PHP 코드를 입력합니다.

  1. 먼저 SELECT를 사용해 제품을 조회한 다음 데이터베이스의 각 행을 순회해서 테이블 행의 페이지에 표시합니다.
  2. 앵커가 동일한 페이지로 링크돼 있음을 볼 수 있습니다(사용자가 앵커를 클릭하면 카트/세션에 제품이 추가됩니다). 제품의 ID 같은 몇 가지 변수도 추가로 전달했습니다.

장바구니에 추가 링크 중 하나에 커서를 올리면 페이지 하단에 제품 ID가 전달된 것을 볼 수 있습니다.



7단계

이번에는 페이지의 맨 위에 다음 코드를 추가해서 링크가 작동하도록 만들어 봅시다.

  1. action이라는 GET 변수가 설정돼 있고 값이 ADD이면 코드를 실행합니다.
  2. GET 변수를 통해 전달된 ID가 정수인지 확인합니다.
  3. 제품 ID가 장바구니 SESSION에 있는 경우 수량을 1만큼 늘립니다.
  4. ID가 세션에 없으면 GET 변수를 통해 전달된 ID가 데이터베이스에 있는지 확인합니다. 만약 그렇다면 가격을 가져오고 세션을 만듭니다. 그렇지 않으면 message라는 변수에 오류 내용을 설정합니다.

message 변수가 설정돼 있는지 확인하고 페이지에 표시합니다(H1 페이지 제목 아래에 다음 코드를 입력합니다).

다음은 전체 products.php 페이지입니다.

다음은 제품 ID가 유효하지 않은 경우 표시되는 오류 메시지입니다.



8단계

index.php로 되돌아가서 사이드바를 만들어보겠습니다. 다음 코드를 추가합니다.

  1. 먼저 cart 세션이 설정돼 있는지 확인합니다. 그렇지 않은 경우 사용자에게 장바구니가 비어 있음을 알리는 메시지를 표시합니다.
  2. 다음으로 mysql SELECT를 생성하는데, 세션에도 있는 제품만 선택합니다. 이를 위해 foreach 함수를 사용합니다. 따라서 세션을 순회하면서 제품 ID를 SELECT에 추가합니다. 다음으로 substr 함수를 사용해 SELECT에서 마지막 쉼표를 제거합니다.
  3. 최종적으로 브라우저에 데이터를 출력합니다.

아래 그림을 봅시다.



index.php는 모든 파일의 템플릿이기 때문에 사이드바는 cart.php에서도 보일 것입니다. 멋지지 않나요?


9단계

마지막으로 cart.php를 열고 다음 코드를 입력합니다.

이 코드는 index.php와 products.php의 코드와 비슷하므로 모든 내용을 다시 설명하지는 않겠습니다. 여기서 눈여겨봐야 할 부분은 폼으로 수량을 표시하는 대신 입력상자로 표시하고 있다는 것입니다(수량을 변경할 수 있게). 또한 테이블을 form 태그로 감쌌습니다. 상품의 총 합계 금액을 구하려면 세션에 있는 특정 제품의 수량과 가격을 곱하면 됩니다. 이 작업이 각 루프에서 수행됩니다.

참고: 입력은 배열이고, 키는 제품의 ID이며, 수량은 수량 값입니다.



10단계

마지막으로 해야 할 단계는 폼을 작동시키는 것입니다. 따라서 다음 코드를 cart.php 페이지 상단에 추가합니다.

  1. 먼저 폼이 제출됐는지 확인합니다. 폼이 제출됐고 입력 값이 0이면 해당 세션을 해제합니다.
  2. 다른 값이면 수량을 해당 값으로 설정합니다.

다음은 cart.php의 전체 코드입니다.


이 튜토리얼이 재미있길 바라고, 궁금한 사항이 있다면 좀 더 자세히 다루는 동영상 튜토리얼을 확인하세요!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.