만들 내용

세일 상품 상세 페이지를 만들어 보겠습니다.
프로젝트 이름은 product_item입니다.
퍼블리싱 원본은 Start Bootstrap을 가져와서 수정했습니다.

만들 페이지 미리 보기

데이터 설계

데이터베이스에 저장할 구조를 결정합니다.

필요한 항목 추출

• 450 * 300 이미지
• 상품 이름
• 원래 가격
• 세일 가격
• 상품 설명

데이터베이스 테이블 생성

데이터베이스 테이블을 생성합니다.

CREATE TABLE `icdb`.`product_item` ( 
    `id` INT NOT NULL AUTO_INCREMENT , 
    `main_image_url` VARCHAR(255) NULL , 
    `name` VARCHAR(255) NULL , 
    `price` VARCHAR(255) NULL , 
    `sale_price` VARCHAR(255) NULL ,     
    `description` VARCHAR(255) NULL , 
    `insert_date` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP , 
    PRIMARY KEY (`id`)
) ENGINE = InnoDB; 

sale_price 열이 null이 아닐 경우 세일중입니다.
description 열은 설명입니다.

샘플 데이터 입력

INSERT INTO `product_item` (`id`, `main_image_url`, `name`, `price`, `sale_price`, `description`) VALUES
 (1, 'https://cdn.pixabay.com/photo/2021/08/21/07/55/croissant-6562091__340.jpg', '맛있는 빵', '5000', '3000', '이 빵은 세일중입니다.'),
 (2, 'https://cdn.pixabay.com/photo/2015/12/05/11/04/bread-1077984__480.jpg', '고소한 토스트', '10000', null, '토스트는 세일을 하지 않습니다.');

프로그램 코드 작성

파라미터가 있는지 확인합니다.

index.php

if (isset($_GET['id']) === false) {exit();}

파라미터를 변수로 설정합니다.

index.php

$id = $_GET['id'];

데이터를 불러옵니다.

index.php

$row = ICL::db_row("select * from product_item where id = ?", [$id]);

메인 이미지를 보여줍니다.

index.php

<div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="<?= $row->main_image_url ?>" alt="<?= $row->name ?>" /></div>

상품 고유 번호를 보여줍니다.

index.php

<div class="small mb-1">ITEM : <?= $row->id ?></div>

상품 이름을 보여줍니다.

index.php

<h1 class="display-5 fw-bolder"><?= $row->name ?></h1>

세일중일 경우 세일 가격을 표기합니다.

index.php

<?php if ($row->sale_price != null) : ?>
<span class="text-decoration-line-through"><?= number_format($row->price) ?>원</span>
<span><?= number_format($row->sale_price) ?>원</span>
<?php endif ?>

세일중이 아닐 경우 일반 가격을 표기합니다.

index.php

<?php if ($row->sale_price == null) : ?>
<span><?= number_format($row->price) ?>원</span>
<?php endif ?>

상품 설명을 보여줍니다.

index.php

<p class="lead"><?= $row->description ?></p>

개발자 확인

http://localhost:8500/ 에서 결과를 확인합니다.

개발서버 배포

프로젝트 디렉토리를 모두 복사해서 FTP를 통해 "개발서버"에 업로드합니다.

기획자 확인 요청

웹에이전시의 기획자 분께 확인을 요청합니다.

개발 의뢰를 요청하시려면 먼저 FAQ를 읽어보시고, 적합하다고 판단하시면 [email protected]로 연락해 주세요.