老友記之PHP7留言板開發(fā)(列表搜索)

當(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ū)涂鴉!~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 董多嬌第167天堅持分享,整個世界都是你投射出來的內(nèi)在和外在世界,永遠(yuǎn)搭配得好好的,他們是彼此的倒影,世界是一面鏡...
    良知良能良知良能閱讀 104評論 0 0
  • 如果真的愛你的伙伴,就考核他,要求他,逼迫他成長,如果你礙于情面,低目標(biāo),低要求,養(yǎng)了一群小綿羊,這是對伙伴前途最...
    思念的詩閱讀 168評論 0 0
  • 不知道大家發(fā)現(xiàn)了沒有,最近微信推出了一個新功能,可以說是一個小游戲,叫做“跳一跳”,這個游戲玩起來并不難,不需要多...
    小圓圈圈ooo閱讀 1,350評論 0 0