租房頁面如圖： 代碼如下： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>租房子</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> //引入boo ...
租房頁面如圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>租房子</title>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script> //引入bootstrap前端框架的三個文件
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<style>
.yangshi{
margin-left: 69px;
}
.ys{
margin-left: 69px;
}
.juli{
margin-left: 28px;
}
</style>
<body>
<form action="rental.php" method="get" style="margin-top: -145px;"> //form表單中使用get方式進行提交
<div style="width: 80%; height: 650px; background-image: url(./img/魅力羅蘭Music炫圖13.jpg); margin-left: 150px; margin-top: 150px;">
<div style="margin-left: 20px;">
<h1 style="margin-left: 40%; pading-top: 20px;">租房子</h1>
<div class="juli">區域：<input type="checkbox" class="ck1" onclick="qx(this)"> 全選</div>
<div>
//連接資料庫並利用去重查詢取出列名為區域的這一組數據
<?php
require_once "./DBDA.class.php";
require_once "./page.class.php";
$db = new DBDA();
$sqy = "select distinct area from housedb"; //去重查詢
$aqy =$db->query($sqy,0);
foreach($aqy as $v){
echo "<span class='yangshi'><input type='checkbox' class='ck1' name='qy[]' value='{$v[0]}'> {$v[0]}</span>";
}
?>
</div>
</div>
效果如圖：
<div style="margin-left: 20px; margin-top: 20px;">
<div>租房類型：<input type="checkbox" class="ck2" onclick="zflx(this)"> 全選</div>
<div>
//連接資料庫並利用去重查詢取出列名為租房類型的這一組數據
<?php
$srt = "select distinct renttype from housedb";
$art = $db->query($srt,0);
foreach($art as $v){
echo "<span class='ys'><input type='checkbox' class='ck2' name='zflx[]' value='{$v[0]}'> {$v[0]}</span>";
}
?>
</div>
效果如圖：
<div style="margin-top: 20px;">
<div class="juli">戶型：<input type="checkbox" class="ck3" onclick="hx(this)"> 全選</div>
<div>
//連接資料庫並利用去重查詢取出列名為戶型的這一組數據
<?php
$sht = "select distinct housetype from housedb";
$aht = $db->query($sht,0);
foreach($aht as $v){
echo "<span class='yangshi'><input type='checkbox' class='ck3' name='hx[]' value='{$v[0]}' > {$v[0]}</span>";
}
?>
</div>
</div>
效果如圖：
</div>
<div style="margin-top: 20px; margin-left: 20px;">
<span class="glyphicon glyphicon-search" style="margin-top: 10px; float: left;"></span>
//關鍵字查詢
<input type="text" class="form-control" name="keyword" placeholder="關鍵字搜索" style="max-width: 120px;float: left;">
<button type="submit" class="btn btn-danger"style="float: left; margin-left: 20px;">搜索</button>
效果如圖：
</div>
//使用表格在頁面輸出全部數據信息
<table class="table table-bordered">
<thead>
<tr>
<th>關鍵字</th>
<th>區域</th>
<th>房子面積</th>
<th>租價</th>
<th>租房類型</th>
<th>戶型</th>
</tr>
</thead>
<tbody>
<?php
$tj1 = " 1=1 "; //分別對不同查詢的條件做一個恆成立的條件
$tj2 = " 1=1 ";
$tj3 = " 1=1 ";
$tj4 = " 1=1 ";
if(!empty($_GET["qy"])){ //區域的條件判斷
$qy = $_GET["qy"];
$str = implode("','", $qy);
$tj1 = "area in ('{$str}')";
}
if(!empty($_GET["zflx"])){ //租房類型的條件判斷
$zflx = $_GET["zflx"];
$str = implode("','", $zflx);
$tj2 = "renttype in ('{$str}')";
}
if(!empty($_GET["hx"])){ //戶型的條件判斷
$hx = $_GET["hx"];
$str = implode("','", $hx);
$tj3 = "housetype in ('{$str}')";
}
if(!empty($_GET["keyword"])){ //關鍵字查詢的條件判斷
$keyword = $_GET["keyword"];
$tj4 = "keyword like '%{$keyword}%'";
}
$zts = "select count(*) from housedb where {$tj1} and {$tj2} and {$tj3} and {$tj4}";
$ats = $db->query($zts,0);
$page = new page($ats[0][0],3); //分頁查詢取總數，設置每頁顯示的行數據
效果如圖：
$sql = "select * from housedb where {$tj1} and {$tj2} and {$tj3} and {$tj4}".$page->limit; //利用拼接字元串方式將調取分頁方法與條件進行拼接
$arr = $db->query($sql,0);
foreach($arr as $v){
echo "<tr>
<td>{$v[1]}</td>
<td>{$v[2]}</td>
<td>{$v[3]}</td>
<td>{$v[4]}</td>
<td>{$v[5]}</td>
<td>{$v[6]}</td>
</tr>";
}
?>
</tbody>
</table>
效果如圖：
<div>
<?php
echo $page->fpage();
?>
</div>
</div>
</form>
</body>
<script>
//使用JS實現全選功能
function qx(qx){
var ck1 = document.getElementsByClassName("ck1");
for(var i=0;i<ck1.length;i++){
ck1[i].checked=qx.checked;
}
}
function zflx(zflx){
var ck2 = document.getElementsByClassName("ck2");
for(var i=0;i<ck2.length;i++){
ck2[i].checked=zflx.checked;
}
}
function hx(hx){
var ck3 = document.getElementsByClassName("ck3");
for(var i=0;i<ck3.length;i++){
ck3[i].checked=hx.checked;
}
}
</script>
</html>
