租房页面如图：
代码如下：
<!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=" 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- 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>