LẬP TRÌNH PHP14 . 06 . 2019Lượt xem: 3011

Lab 7: Sử dụng Bootstrap sửa giao diện đẹp mắt hơn

Bootstrap là một thư viện bao gồm css và js, để làm giao diện. Có rất nhiều hàm và class viết sẵn để bạn tùy biến giao diện theo ý mình. Đa số các website hiện nay sử dụng Boostrap. Bootstrap được tạo ra từ Twitter.

Trước tiên bạn vào https://getbootstrap.com/docs/4.3/getting-started/download/ và tải về phiên bản mới nhất.

Đưa nó vào thư mục gốc của Project, sửa tên thành Bootstrap. Trong thư mục này có 2 thư mục con là css và js.

Tiếp theo: Làm thôi nào!

Trước tiên sửa lại header.php, Việc sử dụng Boostrap cũng không quá khó, để hiểu rõ bạn hãy vào document để đọc nhé: https://getbootstrap.com/docs/4.3/getting-started/introduction/

<!DOCTYPE html>
<html>
<head>
<title>HƯỚNG ĐỐI TƯỢNG PHP</title>
<!-- Unicode Tiếng Việt -->
<meta charset="utf-8"> 
<meta name="author" content="HuynhThaiHung.com" />
<!-- Tập tin định nghĩa css -->
<!-- <link href="site.css" rel="stylesheet" /> -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
	<h2>Project training - Xây dựng website bán hàng</h2>
	<div class="navbar navbar-dark bg-primary navbar-static-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<a href="product-list.php" class="navbar-brand">Danh sách sản phẩm</a>
				<a href="product-add.php" class="navbar-brand">Thêm sản phẩm</a>
			</div>
			<form class="form-inline">
			    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
			    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
			</form>
		</div>
	</div>

Với Bootraps sẽ có thể tùy biến rất nhiều cách bạn chịu khó tìm hiểu thêm.

Tiếp theo sửa file `footer.php`

</div>
<div class="container">
	<footer>
		Quay lại <a href="/demo/lap3">Trang chủ</a><br/>
		&#169; 2019 - Huynh Thai Hung
	</footer>	
</div>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Bước 3: Sửa lại trang Thêm Sản Phẩm, `product-add.php`

Bạn hãy edit lại code cũ từ phần báo lỗi xuống dưới, kết thúc trước phần footer nhé.

Bạn code cẩn thận không là sửa mệt nghỉ.

<!-- Code tại đây -->
<div class="container form-text">
	<div class="row">
		<div class="col-sm-12">
			<h1>Thêm Sản Phẩm</h1>
		</div>
		<div class="col-sm-12">
			<!-- Form Thêm sản phẩm -->
			<form method="post" enctype="multipart/form-data">
				<!-- Tên sản phẩm -->
				<div class="form-group">
					<label for="txtname">Tên sản phẩm</label>
					<input class="form-control" id="txtname" type="text" name="txtname" value="<?php echo isset($_POST["txtname"]) ? $_POST["txtname"] : "" ?>">
				</div>
				<!-- Mô tả sản phẩm -->
				<div class="form-group">
					<label for="txtdesc">Mô tả sản phẩm</label>
					<textarea class="form-control" type="text" id="txtdesc" name="txtdesc" rows="3" value="<?php echo isset($_POST["txtdesc"]) ? $_POST["txtdesc"] : "" ?>"></textarea>
				</div>
				<!-- Số lượng sản phẩm -->
				<div class="form-group">
					<label for="txtquantity">Số lượng sản phẩm</label>
					<input class="form-control" type="number" id="txtquantity" name="txtquantity" value="<?php echo isset($_POST["txtquantity"]) ? $_POST["txtquantity"] : "" ?>">
				</div>
				<!-- Giá sản phẩm -->
				<div class="form-group">
					<label for="txtprice">Giá sản phẩm</label>
					<input class="form-control" type="number" id="txtprice" name="txtprice" value="<?php echo isset($_POST["txtprice"]) ? $_POST["txtprice"] : "" ?>">
				</div>
				<!-- Loại sản phẩm -->
				<div class="form-group">
					<label>Loại sản phẩm</label>
					<select class="form-control" name="txtcateid">
						<option value="" selected>-- Chọn loại --</option>
						<?php $cates = Category::list_category() ?>
						<?php 	foreach ($cates as $item) { ?>
						<option value="<?php echo $item['CateID'] ?>"><?php echo $item['CategoryName'] ?></option>
						<?php } ?>
					</select>
				</div>
				<!-- Loại sản phẩm -->
				<div class="form-group">
						<label for="txtpic">Url Hình ảnh</label>
					<div class="custom-file">
						<input type="file" id="txtpic" name="txtpic" accept=".png,.gif,.jpg,.jpeg">
						<!-- <label class="custom-file-label" for="txtpic">Chọn hình</label> -->
					</div>
				</div>
				<button type="submit" class="btn btn-primary" name="btnsubmit">Thêm sản phẩm</button>
			</form>
		</div>
	</div>
</div>

Bước cuối: Sửa lại trang Danh Sách Sản Phẩm, `product-list.php`

Sửa toàn bộ code của danh sách sản phẩm.

<?php 
require_once('entities/product.class.php');
?>
<?php 
include_once('header.php');
// $prods là biến khởi tạo đối tượng từ class Product, function list_product()
$prods = Product::list_product();
?>

<div class="container text-center form-text">
	<div class="row">
		<div class="col-sm-12">
			<h1>Sản phẩm</h1>	
		</div>
		<?php foreach ($prods as $item) { ?>
		<div class="col-sm-4">
			<img src="<?php echo $item['Picture']; ?>" class="img-responsive" style="width: 100%" alt='Image' onerror="this.src='uploads/default.jpg'">
			<p class="text-danger"><?php echo $item['ProductName']; ?></p>
			<p class="text-info"><?php echo $item['Price']; ?></p>
			<p>
				<button type="button" class="btn btn-primary">Mua hàng</button>
			</p>
		</div>
		<?php } ?>
	</div>
</div>

<?php include_once('footer.php'); ?>