hướng dẫn lấy danh sách sản phẩm từ database với php và tạo hiệu ứng mua hàng với css3

Khi các bạn xây dựng một website bán hàng trực tuyến chẳng hạn, phần nội dung trang chủ của các bạn phải thể hiện được danh sách các sản phẩm.

  • Trong danh sách này, về mặt hình thức, các bạn có thể bố trí các sản phẩm sắp xếp theo dạng bảng, sử dụng các định dạng CSS để trông đẹp mắt.
  • Tiếp đến là phần nội dung, các bạn sử dụng ngôn ngữ để load trực tiếp dữ liệu từ cơ sở dữ liệu MySQL.

Vì thế, ở ví dụ này, chúng ta sẽ xây dựng một trang chủ đơn giản với dữ liệu động load từ cơ sở dữ liệu, kết hợp với CSS3 tạo giao diện thân thiện người dùng.

Giao diện sẽ xây dựng:

trangchu

Trước khi thực hiện, yêu cầu:

  • Cài đặt chương trình Xampp để sử dụng ngôn ngữ PHP và MySQL.
  • Tạo một thư mục gốc danhsachsanpham với các thành phần sau:

thumucgoc

Trong thư mục images, copy 4 hình sản phẩm và đặt tên lần lượt là: 1.png, 2.png, 3.png, 4.png.

Khi mọi thứ sẵn sàng, các bạn làm theo các bước sau:

Bước 1: Vào phpmyadmin, tạo cơ sở dữ liệu tên là quanlybanhang với cấu trúc bảng sanpham như sau:

csdl

Sau đó, chèn 4 sản phẩm vào bảng:

dulieu

Bước 2: Tạo các file css để định dạng danh sách và hiển thị hiệu ứng:

  • demo.css
  • @import url('reset.css');
    /* General Demo Style */
    body{
     background:#f9f9f9 url(../images/white_texture.jpg) repeat top left;
     color: #333;
     font-family: 'Oswald', Arial, sans-serif;
     font-size: 13px;
    }
    .container{
     position:relative;
    }
    a{
     color: #fff;
     text-decoration: none;
    }
    .clr{
     clear: both;
    }
    .main{
     position:relative;
     width:680px;
     margin: 0 auto;
    }
    h1{
     margin:0px;
     padding:20px 20px 10px 20px;
     font-size:34px;
     color:#333;
     text-shadow:1px 1px 1px #fff;
     text-align:left;
     font-weight:400;
     text-align:center;
    }
    h1 span{
     display:block;
     font-size: 14px;
     font-family: Georgia, serif;
     font-style: italic;
     color:#b2891b;
     padding-top:10px;
    }
    /* Header Style */
    .header{
     font-family:'Arial Narrow', Arial, sans-serif;
     line-height: 24px;
     font-size: 11px;
     background: #000;
     opacity: 0.9;
     text-transform: uppercase;
     z-index: 9999;
     position: relative;
     -moz-box-shadow: 1px 0px 2px #000;
     -webkit-box-shadow: 1px 0px 2px #000;
     box-shadow: 1px 0px 2px #000;
    }
    .header a{
     padding: 0px 10px;
     letter-spacing: 1px;
     color: #ddd;
     display: block;
     float: left;
    }
    .header a:hover{
     color: #fff;
    }
    .header span.right{
     float: right;
    }
    .header span.right a{
     float: none;
     display: inline;
    }
     
    .more{
     position:relative;
     clear:both;
     font-family:'Arial Narrow', Arial, sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     padding: 5px 0px 10px;
     width: 540px;
     margin: 0 auto;
    }
    .more ul{
     display:block;
     text-align:center;
     height: 30px;
    }
    .more ul li{
     display: block;
     padding: 4px 2px;
     float:left;
    }
    .more ul li.selected a,
    .more ul li.selected a:hover{
     background:#b2891b;
     color:#fff;
     text-shadow:none;
    }
    .more ul li a{
     color:#555;
     float:left;
     background:#fff;
     width:40px;
     padding: 2px 5px;
     -moz-box-shadow:1px 1px 2px #aaa;
     -webkit-box-shadow:1px 1px 2px #aaa;
     box-shadow:1px 1px 2px #aaa;
    }
    .more ul li a:hover{
     background:#000;
     color:#fff;
    }
  • style_common.css:
  • .view {
       width: 300px;
       height: 200px;
       margin: 10px;
       float: left;
       border: 10px solid #fff;
       overflow: hidden;
       position: relative;
       text-align: center;
       -webkit-box-shadow: 1px 1px 2px #e6e6e6;
       -moz-box-shadow: 1px 1px 2px #e6e6e6;
       box-shadow: 1px 1px 2px #e6e6e6;
       cursor: default;
       background: #fff url(../images/bgimg.jpg) no-repeat center center;
    }
    .view .mask,.view .content {
       width: 300px;
       height: 200px;
       position: absolute;
       overflow: hidden;
       top: 0;
       left: 0;
    }
    .view img {
       display: block;
       position: relative;
    }
    .view h2 {
       text-transform: uppercase;
       color: #fff;
       text-align: center;
       position: relative;
       font-size: 17px;
       padding: 10px;
       background: rgba(0, 0, 0, 0.8);
       margin: 20px 0 0 0;
    }
    .view p {
       font-family: Georgia, serif;
       font-style: italic;
       font-size: 12px;
       position: relative;
       color: #fff;
       padding: 10px 20px 20px;
       text-align: center;
    }
    .view a.info {
       display: inline-block;
       text-decoration: none;
       padding: 7px 14px;
       background: #000;
       color: #fff;
       text-transform: uppercase;
       -webkit-box-shadow: 0 0 1px #000;
       -moz-box-shadow: 0 0 1px #000;
       box-shadow: 0 0 1px #000;
    }
    .view a.info: hover {
       -webkit-box-shadow: 0 0 5px #000;
       -moz-box-shadow: 0 0 5px #000;
       box-shadow: 0 0 5px #000;
    }
  • style1.css
  • .view-first img {
       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }
    .view-first .mask {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       background-color: rgba(219,127,8, 0.7);
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
       -ms-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    .view-first h2 {
       -webkit-transform: translateY(-100px);
       -moz-transform: translateY(-100px);
       -o-transform: translateY(-100px);
       -ms-transform: translateY(-100px);
       transform: translateY(-100px);
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       -ms-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }
    .view-first p {
       -webkit-transform: translateY(100px);
       -moz-transform: translateY(100px);
       -o-transform: translateY(100px);
       -ms-transform: translateY(100px);
       transform: translateY(100px);
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }
    .view-first:hover img {
       -webkit-transform: scale(1.1,1.1);
       -moz-transform: scale(1.1,1.1);
       -o-transform: scale(1.1,1.1);
       -ms-transform: scale(1.1,1.1);
       transform: scale(1.1,1.1);
    }
    .view-first a.info {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       -ms-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }
    .view-first:hover .mask {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
    }
    .view-first:hover h2,
    .view-first:hover p,
    .view-first:hover a.info {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
       -o-transform: translateY(0px);
       -ms-transform: translateY(0px);
       transform: translateY(0px);
    }
    .view-first:hover p {
       -webkit-transition-delay: 0.1s;
       -moz-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
       -ms-transition-delay: 0.1s;
       transition-delay: 0.1s;
    }
    .view-first:hover a.info {
       -webkit-transition-delay: 0.2s;
       -moz-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
       -ms-transition-delay: 0.2s;
       transition-delay: 0.2s;
    }
  • Bước 3: Tạo file kết nối với cơ sở dữ liệu
    • dbconnect.php
    • <!--?php $connect = mysql_connect("localhost", "root", "") or die("Không kết nối được với MYSQL"); mysql_select_db("quanlybanhang", $connect) or die ("Không tìm thấy cơ sở dữ liệu"); mysql_query("SET NAMES utf8"); ?-->
    Bước 4: Tạo trang index
  • <!DOCTYPE html>
    <html>
     <head>
     <title>Danh sách sản phẩm</title>
     <meta charset="UTF-8" />
      
     <link rel="stylesheet" type="text/css" href="css/demo.css" />
     <link rel="stylesheet" type="text/css" href="css/style_common.css" />
     <link rel="stylesheet" type="text/css" href="css/style1.css" />
     </head>
     <body>
     
    <div class="container">
     
    <div class="main">
     <?php include ("dbconnect.php"); $rs = mysql_query("select * from sanpham"); while($row = mysql_fetch_array($rs)){ ?>
     
    <div class="view view-first">
     <img src="images/<?php echo $row['hinhanh']; ?>" />
     
    <div class="mask">
     
    <h2><?php echo $row['tensanpham']; ?></h2>
     
     
     
    <?php echo $row['mota']; ?>
     
     <a href="#" class="info">MUA HÀNG</a>
     </div>
     
     </div>
     
      
     <?php } ?>
     </div>
     
     </div>
     
     </body>
    </html>

Nhận xét

Đăng nhận xét

Bài đăng phổ biến