반응형
이번엔 서브페이지를 헤더와 푸터로 나눠보자. 방법은 비슷하다. 우선 루트에 single-product.html이라는 파일을 다른이름으로 저장해서 product.php로 만든다. 이처럼 퍼블리셔가 준 원본 파일들에서 바로 수정하지 말고 원시파일은 백업해두고 새로 파일을 만들어서 사용하는것을 권장한다. 그래야 화면이 깨지거나 할때 원본 파일과 비교할 수 있다.
똑같이 End mainmenu area 를 찾는다. 거기까지가 헤더다. <div class="footer-top-area">도 찾는다. 거기부터가 푸터다. 해당 부분을 모두 지우고 inlcude 처리를 해준다. index.php에 썼던것을 그대로 가져다 쓰면 된다.
/product.php
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/top.php";
?>
<div class="product-big-title-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="product-bit-title text-center">
<h2>Shop</h2>
</div>
</div>
</div>
</div>
</div>
<div class="single-product-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="single-sidebar">
<h2 class="sidebar-title">Search Products</h2>
<form action="">
<input type="text" placeholder="Search products...">
<input type="submit" value="Search">
</form>
</div>
<div class="single-sidebar">
<h2 class="sidebar-title">Products</h2>
<div class="thubmnail-recent">
<img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
<h2><a href="">Sony Smart TV - 2015</a></h2>
<div class="product-sidebar-price">
<ins>$700.00</ins> <del>$800.00</del>
</div>
</div>
<div class="thubmnail-recent">
<img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
<h2><a href="">Sony Smart TV - 2015</a></h2>
<div class="product-sidebar-price">
<ins>$700.00</ins> <del>$800.00</del>
</div>
</div>
<div class="thubmnail-recent">
<img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
<h2><a href="">Sony Smart TV - 2015</a></h2>
<div class="product-sidebar-price">
<ins>$700.00</ins> <del>$800.00</del>
</div>
</div>
<div class="thubmnail-recent">
<img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
<h2><a href="">Sony Smart TV - 2015</a></h2>
<div class="product-sidebar-price">
<ins>$700.00</ins> <del>$800.00</del>
</div>
</div>
</div>
<div class="single-sidebar">
<h2 class="sidebar-title">Recent Posts</h2>
<ul>
<li><a href="">Sony Smart TV - 2015</a></li>
<li><a href="">Sony Smart TV - 2015</a></li>
<li><a href="">Sony Smart TV - 2015</a></li>
<li><a href="">Sony Smart TV - 2015</a></li>
<li><a href="">Sony Smart TV - 2015</a></li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="product-content-right">
<div class="product-breadcroumb">
<a href="">Home</a>
<a href="">Category Name</a>
<a href="">Sony Smart TV - 2015</a>
</div>
<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="img/product-2.jpg" alt="">
</div>
<div class="product-gallery">
<img src="img/product-thumb-1.jpg" alt="">
<img src="img/product-thumb-2.jpg" alt="">
<img src="img/product-thumb-3.jpg" alt="">
<img src="img/product-thumb-4.jpg" alt="">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="product-inner">
<h2 class="product-name">Sony Smart TV - 2015</h2>
<div class="product-inner-price">
<ins>$700.00</ins> <del>$800.00</del>
</div>
<form action="" class="cart">
<div class="quantity">
<input type="number" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" min="1" step="1">
</div>
<button class="add_to_cart_button" type="submit">Add to cart</button>
</form>
<div class="product-inner-category">
<p>Category: <a href="">Summer</a>. Tags: <a href="">awesome</a>, <a href="">best</a>, <a href="">sale</a>, <a href="">shoes</a>. </p>
</div>
<div role="tabpanel">
<ul class="product-tab" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Description</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Reviews</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<h2>Product Description</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique, diam in consequat iaculis, est purus iaculis mauris, imperdiet facilisis ante ligula at nulla. Quisque volutpat nulla risus, id maximus ex aliquet ut. Suspendisse potenti. Nulla varius lectus id turpis dignissim porta. Quisque magna arcu, blandit quis felis vehicula, feugiat gravida diam. Nullam nec turpis ligula. Aliquam quis blandit elit, ac sodales nisl. Aliquam eget dolor eget elit malesuada aliquet. In varius lorem lorem, semper bibendum lectus lobortis ac.</p>
<p>Mauris placerat vitae lorem gravida viverra. Mauris in fringilla ex. Nulla facilisi. Etiam scelerisque tincidunt quam facilisis lobortis. In malesuada pulvinar neque a consectetur. Nunc aliquam gravida purus, non malesuada sem accumsan in. Morbi vel sodales libero.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>Reviews</h2>
<div class="submit-review">
<p><label for="name">Name</label> <input name="name" type="text"></p>
<p><label for="email">Email</label> <input name="email" type="email"></p>
<div class="rating-chooser">
<p>Your rating</p>
<div class="rating-wrap-post">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<p><label for="review">Your review</label> <textarea name="review" id="" cols="30" rows="10"></textarea></p>
<p><input type="submit" value="Submit"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="related-products-wrapper">
<h2 class="related-products-title">Related Products</h2>
<div class="related-products-carousel">
<div class="single-product">
<div class="product-f-image">
<img src="img/product-1.jpg" alt="">
<div class="product-hover">
<a href="" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="">Sony Smart TV - 2015</a></h2>
<div class="product-carousel-price">
<ins>$700.00</ins> <del>$800.00</del>
</div>
</div>
<div class="single-product">
<div class="product-f-image">
<img src="img/product-2.jpg" alt="">
<div class="product-hover">
<a href="" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="">Apple new mac book 2015 March :P</a></h2>
<div class="product-carousel-price">
<ins>$899.00</ins> <del>$999.00</del>
</div>
</div>
<div class="single-product">
<div class="product-f-image">
<img src="img/product-3.jpg" alt="">
<div class="product-hover">
<a href="" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="">Apple new i phone 6</a></h2>
<div class="product-carousel-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-product">
<div class="product-f-image">
<img src="img/product-4.jpg" alt="">
<div class="product-hover">
<a href="" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="">Sony playstation microsoft</a></h2>
<div class="product-carousel-price">
<ins>$200.00</ins> <del>$225.00</del>
</div>
</div>
<div class="single-product">
<div class="product-f-image">
<img src="img/product-5.jpg" alt="">
<div class="product-hover">
<a href="" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="">Sony Smart Air Condtion</a></h2>
<div class="product-carousel-price">
<ins>$1200.00</ins> <del>$1355.00</del>
</div>
</div>
<div class="single-product">
<div class="product-f-image">
<img src="img/product-6.jpg" alt="">
<div class="product-hover">
<a href="" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="">Samsung gallaxy note 4</a></h2>
<div class="product-carousel-price">
<ins>$400.00</ins>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/bot.php";
?>
product.php와 index.php가 같은 경로에 있어서 경로의 영향을 안받지만 두 파일이 다른 경로에 있다면 include 된 파일 안에 경로가 포함되어 있다면 반드시 절대 경로로 해주어야 한다.
다음 시간엔 디비에 저장된 값을 가져와서 화면에 뿌리는 것을 해보도록 하자.
반응형
'PHP강좌 > 쇼핑몰만들기강좌' 카테고리의 다른 글
| php+mysql 쇼핑몰 만들기 강좌 - #28. 세션을 이용한 장바구니 (1) | 2022.08.08 |
|---|---|
| php+mysql 쇼핑몰 만들기 강좌 - #27. 쿠키를 이용한 최근 본 상품 (0) | 2022.07.29 |
| php+mysql 쇼핑몰 만들기 강좌 - #25. 헤더와 푸터 분리하기(메인페이지) (2) | 2022.06.13 |
| php+mysql 쇼핑몰 만들기 강좌 - #24. 쇼핑몰 템플릿 적용하기 (2) | 2022.06.08 |
| 괜찮은 무료 쇼핑몰 템플릿 (0) | 2022.06.08 |