만들 내용

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

만들 페이지 미리 보기

데이터 설계

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

필요한 항목 추출

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

데이터베이스 테이블 생성

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

CREATE TABLE `icdb`.`product_list_sale` ( 
    `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 ,     
    `insert_date` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP , 
    PRIMARY KEY (`id`)
) ENGINE = InnoDB; 

sale_price 열이 null이 아닐 경우 세일중입니다.

샘플 데이터 입력

소스코드

INSERT INTO `product_list_sale` (`id`, `main_image_url`, `name`, `price`, `sale_price`) 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', '8000'),
 (3, 'https://cdn.pixabay.com/photo/2016/03/05/20/02/sandwich-1238615__480.jpg', '나이스 샌드위치', '3500', null),
 (4, 'https://cdn.pixabay.com/photo/2017/09/18/14/49/egg-sandwich-2761894__480.jpg', '통삶은 계란빵', '4200', '3000'),
 (6, 'https://cdn.pixabay.com/photo/2021/08/21/07/55/croissant-6562091__340.jpg', '맛있는 빵', '5000', null),
 (7, 'https://cdn.pixabay.com/photo/2015/12/05/11/04/bread-1077984__480.jpg', '고소한 토스트', '10000', null),
 (8, 'https://cdn.pixabay.com/photo/2016/03/05/20/02/sandwich-1238615__480.jpg', '나이스 샌드위치', '3500', '1200'),
 (9, 'https://cdn.pixabay.com/photo/2017/09/18/14/49/egg-sandwich-2761894__480.jpg', '통삶은 계란빵', '4200', '500');

프로그램 코드 작성

데이터를 불러옵니다.

index.php
소스코드

require_once($_SERVER['DOCUMENT_ROOT'] . "/ICL.php");
$data = ICL::db_select("select * from product_list_sale");

세일중일 경우 세일 뱃지를 보여줍니다.

index.php
소스코드

<?php if ($row->sale_price != null) : ?>
    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>                        
<?php endif ?>

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

index.php
소스코드

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

개발자 확인

잘 보입니다.

개발서버 배포

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

기획자 확인 요청

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

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