Go to Qiita Advent Calendar 2024 Top
LoginSignup
jankenpon0205
@jankenpon0205 (002 ruru)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

あいまい検索（部分一致検索）を実装したい

Q&A

Closed

PHPCSSMySQLCRUD操作

解決したいこと

リスト一覧表があるサイトに部分一致検索を実装したいのですが、それらしいサイトが見当たらず、わかりません。
新しいファイルを作成せずにどうやって作るのか誰か教えていただきたいです。

具体的にやりたいことは、
名前を記入　
⇒　検索をかけたら「ID」,「名前」,「メアド」が表示される　
⇒　検索をかけた場所（虫メガネのマークにしています）を押すと、元のリスト一覧表に戻る
、ということを行いたいです。

また、どのようなサイトなのかわかりやすくするために「list」と「common」、「css」とは他のファイルも添付させていただきます。
宜しくお願いします。

list.php

<?php

require_once("common.php");

$sql = "SELECT * FROM users ORDER BY id ASC;";
$stmt = $pdo->query($sql);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="CSS/reset.css">
        <link rel="stylesheet" href="CSS/style.css">
        <link rel="stylesheet" href="CSS/responsive.css">
        <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- fontawesome -->
        <link href="https://use.fontawesome.com/releases/v6.4.0/css/all.css" rel="stylesheet">
    <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/base.js"></script>

        <title>Lesson13CRUD実装-課題-</title>
    </head>

    <body>
        <header>

        <h1>リストの表示<br><span class="sub">-list-</span></h1>

        </header>

        <div id="content">

        <div class="create_btn">
            <button>
                <a href="create_form.php"><i class="fas fa-plus-circle">新規登録はこちら</i></a>
            </button>
        </div>

        <div id="search">
        <form action="list.php" method="post">
        <input type="search" name="search" placeholder="ユーザー名で検索">
        <button type="button" ><i class="fa-solid fa-magnifying-glass"></i></button>
        </form>
        
        
        </div>

        <table style="border-collapse: separate">
         <tr>

         <th class="id">ID</th>

         <th class="name">NAME</th>

         <th class="mail">MAIL</th>

         <th class="up">EDIT</th>

         <th class="dele">DELETE</th>

         </tr>

        <?php foreach ($result as $list) {?>
         <tr>

         <td class="id"><?php echo htmlspecialchars($list["id"]); ?></td>

         <td class="name"><?php echo htmlspecialchars($list["username"]); ?></td>

         <td class="mail"><?php echo htmlspecialchars($list["mail"]); ?></td>

         <td class="up">
            <a href="update_form.php?id=<?php echo $list["id"]; ?>">
                <i class="fas fa-file-alt"></i>
            </a>
         </td>

         <td class="dele">
            <a href="delete.php?id=<?php echo htmlspecialchars($list["id"]); ?>"onclick="return confirm('このレコードを削除します。よろしいでしょうか？')">
                <i class="fas fa-trash-alt"></i>
            </a>
         </td>
         </tr>
        <?php } ?>


    </table>

    
        </div>


    </body>

</html>

common.php

<?php

header("X-FRAME-OPTIONS: DENY");

define("HOST", "localhost");

 
define("DB_NAME", "task02");

 
define("USER", "root");

 
define("PASS", "");

 
 

 

 
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET 'utf8'");

 
 

 
$pdo = new PDO("mysql:host=" . HOST . ";dbname=" . DB_NAME, USER, PASS, $options);

 
 

 
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

 
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

 ?>

css

@charset "utf-8";
body {
    background: #d5ecfc;
    color: rgb(80, 80, 80);
}

h1 {
    text-align: center;
    font-size: 24px;
    color: #fff;
    background: #04489b;
    padding: 15px;
    line-height: 1rem;
}

a {
    text-decoration: none;
}

input {
    padding-left: 3px;
    border: 0.5px solid rgb(146, 146, 146);
    border-radius: 3px;
    display: block;
}

#content {
    margin: 15px auto !important;
    overflow: hidden;
}

table {
    max-width: 520px;
}

td {
    padding: 5px;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.name {
    width: 150px;
}

.pass {
    width: 150px;
}

.up {
    width: 100px;
}

.dele {
    width: 100px;
}

.var_dump {
    padding: 15px;
    background: rgb(224, 255, 224);
    font-size: 16px;
}

.return {
    width: 800px;
    text-align: left;
    margin: 30px auto 0;
    display: block;
}

h2 {
    margin-bottom: 30px;
    ;
}


/* ==============================================
                  Design Plus
================================================*/


/* ===================common====================== */

header .icon:hover {
    opacity: 0.8;
}

body {
    background: url(../img/bg.jpg) no-repeat;
    background-color: rgba(255, 255, 255, 0.7);
    background-blend-mode: lighten;
    background-size: cover;
}

#content {
    max-width: 900px;
}

form h2 {
    padding: 60px 0;
    font-size: 1.2rem;
    text-align: center;
}

.return {
    width: 100%;
    margin: 0;
}

span.strong {
    font-size: 1.3em;
}

span.orange {
    color: #e2563b;
}


/*heder*/

header {
    background: -moz-linear-gradient(to bottom, #7b9bc7, #e9cfd4);
    background: -webkit-linear-gradient(to bottom, #7b9bc7, #e9cfd4);
    background: linear-gradient(to bottom, #7b9bc7, #e9cfd4);
    display: flex;
    flex-direction: row;
    position: relative;
}

header .icon {
    width: 100px;
    margin: 19px 19px 0;
    text-align: center;
    position: absolute;
}

header .icon img {
    width: 100%;
}

header h1 {
    width: 100%;
    background: none;
    line-height: 1.1;
}

header h1 span.sub {
    font-size: 0.7em;
}


/* ===================list====================== */


/*create_btn*/

.create_btn {
    margin: 0 auto 20px;
    padding-top: 20px;
    font-size: 14pt;
}

.create_btn button {
    margin: 0;
    position: relative;
}

.create_btn a {
    font-weight: bold;
    color: #e2563b;
}

.create_btn a:hover {
    opacity: 0.7;
}


/*!empty_return*/

p.return_empty a {
    font-weight: bold;
    color: #e2563b;
}

p.return_empty {
    padding-bottom: 30px;
}


/*search*/

#search {
    float: right;
    width: 30%;
    border-radius: 3px;
    font-size: 18px;
}

#search form {
    position: relative;
    background: #fff;
}

#search form input {
    width: 100%;
    border-color: #e2563b;
}

#search form input::placeholder {
    font-size: 12pt;
}

#search button {
    height: 100%;
    width: 50px;
    background: #e2563b;
    color: #fff;
    top: 0;
    right: 0;
    position: absolute;
}

#search button:hover {
    background: #f0907f;
}


/*btn*/

#search button {
    border-radius: 0 3px 3px 0;
}


/*list_table*/

table {
    border-spacing: 0px 2px;
    max-width: 65%;
}


/*id_color*/

tr:nth-child(n+2) .id {
    background-color: #0083ab;
    color: #fff;
}


/*Record odd*/

tr:nth-child(odd) .name,
tr:nth-child(odd) .mail,
tr:nth-child(odd) .up,
tr:nth-child(odd) .dele {
    background-color: #f5f8fb;
}


/*Record even*/

tr:nth-child(even) .name,
tr:nth-child(even) .mail,
tr:nth-child(even) .up,
tr:nth-child(even) .dele {
    background-color: #fff;
}


/*category*/

tr:first-child .id,
tr:first-child .name,
tr:first-child .mail,
tr:first-child .up,
tr:first-child .dele {
    height: 40px;
    background: #016079;
    color: #fff;
    font-size: 0.5em;
    position: relative;
}

tr:first-child .id,
tr:first-child .up,
tr:first-child .dele {
    width: 10%;
}

tr:first-child .mail {
    width: 40%;
}

tr:first-child td.id:after,
tr:first-child td.name:after,
tr:first-child td.mail:after,
tr:first-child td.up:after {
    height: 80%;
    width: 1px;
    content: "";
    top: 10%;
    right: 0;
    position: absolute;
    background-color: #fff;
}


/*EDIT DELETE_iconColor*/

tr:nth-child(n+2) .up a,
tr:nth-child(n+2) .dele a {
    color: #e2563b;
    font-size: 1.3em;
}

tr:nth-child(n+2) .up a:hover,
tr:nth-child(n+2) .dele a:hover {
    color: #f0907f;
    font-size: 1.3em;
}

tr {
    margin-bottom: 5px;
    overflow: hidden;
}


/* ===================form====================== */


/*form_input*/

.form_input input {
    width: 300px;
    background: #fff;
    border: solid 2px #e2563b;
    border-radius: 3px;
}


/*username*/

.form_input .username label {
    padding-left: 25px;
    font-weight: bold;
    color: #0e1d44;
    position: relative;
}

.form_input .username label:before {
    content: "";
    width: 20px;
    height: 30px;
    bottom: -5px;
    left: 3px;
    background: url(../img/icon_man.png) no-repeat;
    position: absolute;
}


/*mail*/

.form_input .mail label {
    padding-left: 35px;
    font-weight: bold;
    color: #0e1d44;
    position: relative;
}

.form_input .mail label:before {
    content: "";
    width: 30px;
    height: 30px;
    bottom: -8px;
    left: 3px;
    background: url(../img/icon_mail.png) no-repeat;
    position: absolute;
}

.form_input {
    display: flex;
    justify-content: center;
}

.form_input .username,
.form_input .mail {
    margin: 0 20px;
}

.form_btn {
    padding-top: 60px;
    display: flex;
    justify-content: center;
}

.form_create_btn,
.form_return_btn {
    margin: 0 20px;
}

.form_create_btn:hover,
.form_return_btn:hover {
    opacity: 0.7;
}

.form_create_btn:active,
.form_return_btn:active {
    transform: scale(0.95);
}


/*return_btn*/

p.return {
    position: relative;
    background: #b0b4c2;
    border-radius: 3px;
}

p.return a {
    padding: 10px;
    padding-left: 50px;
    padding-right: 25px;
    color: #0e1d44;
    font-weight: bold;
    display: block;
}

p.return a:before {
    content: "";
    width: 30px;
    height: 25px;
    background-image: url(../img/arrow_return.png);
    top: 55%;
    left: 10%;
    transform: translate(0, -55%);
    position: absolute;
}


/*create_btn*/

.form_create_btn input {
    border: none;
    padding: 10px 68px;
    background-color: #e2563b;
    color: #fff;
}

.var_dump{
    padding: 15px;
    background: #cef;
    font-size: 16px;
}

index_form.php

<?php

header("X-FRAME-OPTIONS: DENY");

?>

<!DOCTYPE html>

 
<html>

 
    <head>

 
        <meta charset="utf-8">

 
            <link rel="stylesheet" href="CSS/reset.css">

 
            <link rel="stylesheet" href="CSS/style.css">

 
            <link rel="stylesheet" href="CSS/responsive.css">

 
        <meta name="viewport" content="width=device-width,initial-scale=1">

 
        <title>Lesson13CRUD実装-課題-</title>

 
    </head>

 
 

 
    <body>

 
        <header>

 
            <div class="icon">

 
                <a href="list.php">

 
                    <img src="./img/DAWN_icon.png" alt="icon">

 
                </a>

 
            </div>

 
            <h1>新規登録<br><span class="sub">-create-</span></h1>

 
        </header>

 
        <div id="content">

 
            <form action="create.php" method="post" onsubmit="return check()" id="content">

 
                <h2><span class="strong orange">新しく登録する</span>ユーザーを<br class="sp">作成しましょう。</h2>

 
                <div class="form_input">

 
                    <div class="username">

 
                        <label for="name">ユーザー名</label>

 
                        <input type="text" id="name" name="username">

 
                    </div>

 
                    <div class="mail">

 
                        <label for="email">メールアドレス</label>

 
                        <input type="email" id="email" name="mail">

 
                    </div>

 
                </div>

 
                <div class="form_btn">

 
                    <div class="form_return_btn">

 
                        <p class="return"><a href="list.php">リスト表に戻る</a></p>

 
                    </div>

 
                    <div class="form_create_btn">

 
                        <input type="submit" value="新規登録">

 
                    </div>

 
                </div>

 
            </form>

 
        </div>

 
        <script type="text/javascript">

 
        function check() {

 
            if (window.confirm('登録をしてよろしいですか？')) { 

 
               
 
                return true;

 
            } else { 

 
                window.alert('登録がキャンセルされました'); 

 
                

 
                return false;

 
            }

 
        }

 
        </script>

 
    </body>

 
</html>

index.php

<?php

 
require_once("common.php");

$name = $_POST["username"];

 
$mail = $_POST["mail"];

 


 
 

 
try {

 

 
    $sql = "insert into users(username,mail) values(:name,:mail)";

    $stmt = $pdo->prepare($sql);

    $stmt->bindValue(":name", $name, PDO::PARAM_STR);

    $stmt->bindValue(":mail", $mail, PDO::PARAM_STR);

    $stmt->execute();
 
    header("Location: list.php");

 
    exit;

 
} catch (Exception $e) {

 
    echo $e->getMessage();

 
}
0

1Answer

ikepu-tp
@ikepu-tp

すみません，コードが長くてすべて見切れないです。（マークダウン記法を順守してコードを見やすくした方が読みやすいですし，回答するのに余分なものは不要だと思います）
実現したいことを要約すると，usernameについて，完全一致ではなく，部分一致で抽出したいことだと思います。
「SQL　LIKE」等で検索してみたらよいと思います。
（久しぶりにPDOを書くので色々忘れています。間違えていたら申し訳ないです。）

list.php
<?php

require_once("common.php");

- $sql = "SELECT * FROM users ORDER BY id ASC;";
+ $sql = "SELECT * FROM users where `username` LIKE :username ORDER BY id ASC;";
- $stmt = $pdo->query($sql);
+ $stmt = $pdo->prepare($sql);
+ $stmt->bindValue(":name", "*" . $_POST["name"] . "*", PDO::PARAM_STR);
+ $stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
1Like

Comments

  1. @ikepu-tp

    クローズするのであれば、解決したか否か、解決したのであれば、その方法等を明記してあげてください。
    今後、似たことを調べた方の有益な情報になり得るので。

  2. @jankenpon0205

    Questioner

    すみません、まだ解決してなくずっとオープン状態は嫌なのでクローズさせていただきました。

Your answer might help someone💌

LoginSign Up