Xin chào, hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn viết một trang đánh giá sản phẩm đơn giản.
Chức năng:
- Hiển thị sản phẩm và số người đánh giá điểm số cho sản phẩm tương ứng.
- Trang hiển thị sản phẩm có form cho người dùng đánh giá.
Tạo Cơ sở dữ liệu MySQL
Các bạn tạo database đặt tên là “rating”. Sau đó tạo 1 bảng dùng để
lưu thông tin về sản phẩm, 1 bảng dùng để lưu thông tin đánh giá sản
phẩm và thêm vào các record như sau:
CREATE TABLE IF NOT EXISTS `products`
(
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT
NULL,
`img_url` text NOT
NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT
CHARSET=utf8 AUTO_INCREMENT=4 ;
INSERT INTO `products` (`id`, `title`,
`img_url`) VALUES
(1, 'MB Gigabyte G1.Sniper B5', 'template/img/products/1.jpg'),
(2, 'Asus MeMo pad ME102A', 'template/img/products/2.jpg'),
(3, 'LCD Philips 27'''' 273G3
DHSW', 'template/img/products/3.jpg');
CREATE TABLE IF NOT EXISTS `rating_info`
(
`product_id` int(10) NOT
NULL,
`rate_1` int(10) NOT
NULL,
`rate_2` int(10) NOT
NULL,
`rate_3` int(10) NOT
NULL,
`rate_4` int(10) NOT
NULL,
`rate_5` int(10) NOT
NULL,
PRIMARY KEY (`product_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `rating_info` (`product_id`,
`rate_1`, `rate_2`, `rate_3`, `rate_4`, `rate_5`) VALUES
(1, 1, 2, 3, 1, 2),
(2, 12, 23, 21, 22, 11),
(3, 2, 2, 1, 1, 2);
|
Lập trình PHP
Các bạn tải về source
tại đây gồm
có các hình ảnh sản phẩm. Tiếp theo chúng ta tạo các file template cho
trang web gồm 1 template cho trang hiển thị danh sách sản phẩm, 1
template cho trang hiển thị chi tiết sản phẩm như sau.
Trang Hiển thị danh sách sản phẩm ( trang index )
<!DOCTYPE html>
<html>
<head>
<title>Rating</title>
<meta
charset="utf-8">
<link
href="template/css.css" type="text/css"
rel="stylesheet">
</head>
<body>
<div
id="container">
<header>
<h1><a
href="index.php">COMPUTER ABC</a></h1>
</header>
<div
id="main-wrapper">
<?php
echo $html ?>
</div>
<footer>
</footer>
</div>
</body>
</html>
|
|
|
Trang hiển thị chi tiết sản phẩm và đánh giá
<!DOCTYPE html>
<html>
<head>
<title>Rating</title>
<meta charset="utf-8">
<link href="template/css.css"
type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1><a
href="index.php">COMPUTER ABC</a></h1>
</header>
<div id="main-wrapper">
<div
id="product-info">
<?php
echo $html ?>
</div>
<div
id="rating">
<form
action="" method="POST">
<h3>Đánh
giá</h3>
<input
type="radio" name="rate" value="5" checked>
5
<input
type="radio" name="rate" value="4"> 4
<input
type="radio" name="rate" value="3"> 3
<input
type="radio" name="rate" value="2"> 2
<input
type="radio" name="rate" value="1"> 1<br
/>
<input
type="submit" name="rate_submit" value="Rate"
id="submit-button">
</form>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
|
|
|
Chúng ta đã có các trang template. Tiếp theo chúng ta sẽ viết các
hàm PHP để lấy dữ liệu, cập nhật đánh giá. Trong bài viết này chỉ hướng
dẫn lấy sản phẩm và cập nhật đánh giá, các chức năng khác như thêm sản
phẩm sẽ hướng dẫn ở bài tiếp theo.
Đầu tiên chúng ta sẽ tạo một kết nối CSDL:
| $conn = mysqli_connect("localhost", "root",
"", "rating") or die("Khong the ket noi toi
CSDL"); |
|
|
Hàm lấy thông tin đánh giá. Hàm này dùng để lấy thông tin về đánh giá của 1 sản phẩm thông qua ID và trả về kết quả HTML
function getRatingInfo($id){
global $conn;
$query = "SELECT * FROM rating_info WHERE
product_id=".$id;
$result = mysqli_query($conn, $query);
$return = 'Đánh giá<br /><ul
id="rating-info">';
if(mysqli_num_rows($result) > 0){
$row =
mysqli_fetch_array($result);
$return .=
"<li><strong>5</strong>:
".$row['rate_5']."</li>";
$return .=
"<li><strong>4</strong>:
".$row['rate_4']."</li>";
$return .=
"<li><strong>3</strong>:
".$row['rate_3']."</li>";
$return .=
"<li><strong>2</strong>:
".$row['rate_2']."</li>";
$return .=
"<li><strong>1</strong>:
".$row['rate_1']."</li>";
}else{
for($i = 1; $i < 6;
$i++){
$return
.= "<li>".$i.": 0%</li>";
}
}
$return .= "</ul>";
return $return;
}
|
|
|
Hàm cập nhật thông tin đánh giá. Khi người dùng check vào ô đánh giá
điểm, thì chúng ta sẽ cập nhật số người đánh giá điểm số đó thêm 1
người như sau
function setRatingInfo($id, $rate){
global $conn;
$query = "SELECT rate_".$rate."
FROM rating_info WHERE product_id=".$id;
$result = mysqli_query($conn,$query);
$row = mysqli_fetch_array($result);
$i = $row['rate_'.$rate];
$i++;
$query = "UPDATE rating_info SET
rate_".$rate."=".$i." WHERE product_id=".$id;
$result = mysqli_query($conn,$query);
} |
|
|
Hàm lấy sản phẩm. Hàm này dùng để lấy thông tin của 1 sản phẩm thông qua ID và trả lại kết quả HTML.
function getProduct($id){
global $conn;
$query = "SELECT * FROM products WHERE
id=".$id;
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_array($result);
$rating_info = getRatingInfo($id);
$return = '<div id="product-img">
<img
src="'.$row['img_url'].'" alt="" title="" />
</div>'.$rating_info.'
<div
class="clear-fx"></div>
<h2>'.$row['title'].'</h2>';
return $return;
} |
|
|
Hàm lấy danh sách sản phẩm. Hàm này dùng để lấy tất cả các sản phẩm trong CSLD và trả về kết quả HTML
function listProduct(){
global $conn;
$query =
"SELECT * FROM products";
$result =
mysqli_query($conn, $query);
$return =
"";
while($row =
mysqli_fetch_array($result)){
$rating_info
= getRatingInfo($row['id']);
$return
.= '<div class="product-info">
<div
id="product-img">
<img
src="'.$row['img_url'].'" alt="" title="" />
</div>'.$rating_info.'
<div
class="clear-fx"></div>
<h2><a
href="index.php?id='.$row['id'].'">'.$row['title'].'</a></h2></div>';
}
return $return;
} |
|
|
Như vậy chúng ta đã viết các hàm cần thiết. Chúng ta tiếp tục xử lý
đến trang index.php. Tại đây sẽ kiểm tra nếu người dùng click vào sản
phẩm thì sẽ load template hiển thị chi tiết, ngược lại người dùng chỉ
vào trang index.php thì sẽ load template hiển thị danh sách sản phẩm
include("functions.php");
if(isset($_GET['id'])){
$id=$_GET['id'];
// UPDATE RATING
if(isset($_POST['rate_submit'])){
if(isset($_POST['rate'])){
$rate
= $_POST['rate'];
setRatingInfo($id,
$rate);
}
}
$html = getProduct($id);
include("template/view-product.php");
}else{
$html = listProduct();
include("template/list-products.php");
} |
|
|
Lưu ý là phải include file functions.php trước để chúng ta có thể sử
dụng các hàm mà chúng ta đã viết. Đến đây chúng ta đã hoàn thành trang
đánh giá đơn giản. Tuy nhiên nó vẫn chưa có định dạng CSS, chúng ta hoàn
thành trang web với định dạng CSS sau
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #ecf0f1;
}
a:link, a:visited{
color: #2980b9;
text-decoration: none;
}
a:hover, a:active{
text-decoration: underline;
color: #e74c3c;
}
#container{
width: 400px;
margin: 20px auto;
padding: 10px;
border-radius: 5px;
border: 1px solid #7f8c8d;
background: #fff;
}
#product-img{
float: left;
width: 70%;
}
#rating-info{
float: left;
width: 30%;
padding: 0;
list-style-type: none;
}
.clear-fx{
clear: both;
}
.product-info{
border-bottom: 1px solid #bdc3c7;
margin-bottom: 10px;
}
#submit-button{
padding: 5px 20px;
margin-top: 10px;
}
h1{
background: #3498db;
padding: 10px 0;
}
h1 a:link, h1 a:visited{
color: #fff;
} |
|
|
Sản phẩm sau khi hoàn thành
Trang đánh giá đơn giản hiển thị danh sách sản phẩm
Trang hiển thị chi tiết sản phẩm kèm đánh giá
Tải source đầy đủ
tại đây. Chúc các bạn thành công .
Xem thêm tại
http://hocweb.com.vn/category/hocweb/php-mysql/php-co-ban/
----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để
website ngày càng phát triển hơn. Xin cám ơn bạn!
Đăng nhận xét