當(dāng)數(shù)據(jù)量上來的時候,要找到它們中的一條,單單翻頁去查找是一件很困難的事,這是時候就需要用到數(shù)據(jù)的搜索,可以瞬間找到我們想要的數(shù)據(jù),既可以模糊搜索也可以精準(zhǔn)搜索。
在【分頁】那一節(jié)我們已經(jīng)做到了翻頁,現(xiàn)在我們給這個列表加入搜索框進(jìn)行搜索。
效果圖
搜索姓名是“地方”的記錄效果圖
理思路
拿到任務(wù)的時候,如果沒有設(shè)計圖,自己腦子里要有個大概的想法,當(dāng)然有經(jīng)驗了可以直接擼代碼;還不好下手那就自己手動畫一個(紙跟筆的少不了的)。萬事俱備只欠動手?jǐn)]碼了。
- 1、DIV+CSS(專輯開頭的步驟一有介紹,實(shí)現(xiàn)用戶操作一面,這里我們只需要額外增加:關(guān)鍵詞輸入框+搜索按鈕的樣式)
- 2、PHP接收參數(shù)+MYSQL查詢
接收用戶提交的關(guān)鍵詞,賦值給$keyword
,組裝sql查詢關(guān)鍵詞語句"SELECT * FROM feedback WHERE name LIKE '%{$keyword}%'";
,去執(zhí)行sql語句或者相應(yīng)數(shù)據(jù)返回前臺呈現(xiàn)給用戶。
注:
name LIKE '%{$keyword}%'"
意思是獲取name字段中包含$keyword
的記錄集,兩邊的%
百分號是指匹配任意類型和長度的字符,即模糊搜索,精準(zhǔn)搜索去掉百分號即可。
- 3、測試+debug修改
整個需求功能都實(shí)現(xiàn)后,自己再簡單的測試一遍,有時候以用戶角度去體驗一下自己做的功能,會發(fā)現(xiàn)不一樣的問題,我們需要完善一下并修改debug,再提交給產(chǎn)品驗收。相信堅持這樣做,這份嚴(yán)謹(jǐn)?shù)膽B(tài)度會給你帶來意想不到收獲。
無非就是開頭的三步驟,穩(wěn)穩(wěn)的完成任務(wù),看著是不是離全棧工程師又更近一步了。
完整代碼結(jié)合課程開頭的代碼使用
老友記之PHP7留言板開發(fā)(步驟一)
老友記之PHP7留言板開發(fā)(步驟二)
老友記之PHP7留言板開發(fā)(步驟三)
<?php
include 'config.php';
$page = !empty($_GET['page'])?intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?strip_tags($_GET['keyword']):'';
$pagesize = 1;
// 統(tǒng)計總記錄數(shù),便于計算出總頁數(shù)
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%'";
}else{
$sql = "SELECT * FROM feedback";
}
$result = mysqli_query($mysqli, $sql);
$total = mysqli_affected_rows($mysqli);
$total_page = ceil($total/$pagesize); // 進(jìn)一法取整獲取總頁數(shù)
// 開始分頁查詢,根據(jù)page計算偏移量
$offset = ($page - 1) * $pagesize;
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
$sql = "SELECT * FROM feedback LIMIT {$offset}, {$pagesize}";
}
$result = mysqli_query($mysqli, $sql);
$lists = array();
while($rows = mysqli_fetch_array($result)){
$lists[] = $rows;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表帶搜索功能_留言板_科科分享</title>
<!-- 2.新建css樣式文件并根據(jù)效果圖編寫css代碼 -->
<link rel="stylesheet" href="feedback.css">
</head>
<body>
<!-- 工作區(qū),呈現(xiàn)給用戶看的 -->
<!-- 1.開始搭建腳手架 -->
<div class="container_box">
<div class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">LIST</h5>
</div>
<div class="down list">
<div class="search">
<form action="list.php">
關(guān)鍵詞:<input type='text' name="keyword" />
<input type="submit" value="去搜索">
</form>
</div>
<ul>
<?php
foreach($lists as $item){
?>
<li>姓名:<?php echo $item['name']?> 聯(lián)系方式:<?php echo $item['contact']?> 內(nèi)容:<?php echo $item['content']?></li>
<?php
}
?>
</ul>
<div class="pages">
<ul>
<?php
for($p = 1; $p<=$total_page; $p++){
?>
<li <?php echo ($page == $p)?'class="active"':'';?>><a href="?page=<?php echo $p?>&keyword=<?php echo $keyword?>"><?php echo $p?></a></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</body>
</html
總結(jié)
關(guān)鍵詞:like(喜歡,像...)
查詢用戶輸入的關(guān)鍵詞就是在數(shù)據(jù)庫中查詢用戶喜歡的數(shù)據(jù)出來并呈現(xiàn)給用戶。
本節(jié)結(jié)束,記得勤加練習(xí),盡量手寫代碼。
如有內(nèi)容錯誤或者疑惑記得下方評論區(qū)涂鴉!~