sherylranka426
@sherylranka426

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

「前へ」リンクを押すと前ページに遷移させたい

Q&A

Closed

解決したいこと

「前へ」リンクを押すと前ページに遷移させたい

発生している問題・エラー

「前へ」リンクを押すと次ページへすすんでしまう

該当するソースコード

<?php

// post_code 意味:郵便番号
// prefectures 意味:都道府県
// municipalities 意味:市区町村

$comment = 'ここに検索結果が表示されます' . "<br>" . "<br>";
$table_start = '';
$table_end = '';
$regexp_post_code = '/[0-9]{7}/';
$num_search = '';
$page = 1;
$prefecturesList =
    [
        '都道府県を検索',
        '北海道',
        '新潟県',
        '兵庫県'
    ];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['post_code'])) {
        $post_code = htmlspecialchars($_POST['post_code'], ENT_QUOTES, 'UTF-8');
    }

    if (isset($_POST['prefectures'])) {
        $prefectures = htmlspecialchars($_POST['prefectures'], ENT_QUOTES, 'UTF-8');
    }

    if (isset($_POST['municipalities'])) {
        $municipalities = htmlspecialchars($_POST['municipalities'], ENT_QUOTES, 'UTF-8');
    }

    if (isset($_POST['page'])) {
        $page = htmlspecialchars($_POST['page'], ENT_QUOTES, 'UTF-8');
        $explode_page =  explode(",", $page);
        $page = $explode_page[0];
        $prefectures = $explode_page[1];
    }

    // 空白削除
    $post_code = str_replace(array(" ", " "), "", $post_code);
    $prefectures = str_replace(array(" ", " "), "", $prefectures);
    $municipalities = str_replace(array(" ", " "), "", $municipalities);

    // エラー表示

    if ($post_code === '') {
        $error1[] = '郵便番号を入力してください' . "<br>";
    } elseif ($preg_match = (preg_match($regexp_post_code, $post_code) !== 1) || mb_strlen($post_code) !== 7) {
        $error1[] = '郵便番号は7桁の半角数字で入力してください' . "<br>";
    }

    if ($prefectures === '都道府県を検索') {
        $error2[] = '都道府県を選択してください。' . "<br>";
    }

    if ($municipalities === '') {
        $error2[] = '市区町村を入力してください。' . "<br>";
    }

    // DB接続
    if (count($error1) === 0 || count($error2) === 0 || $_POST['page'] !== '') {
        $comment = '';

        // テーブル同時に作成
        $table_start =
            "<table border=1>
    <tr>
    <th>郵便局</th>
    <th>都道府県</th>
    <th>市区</th>
    <th>町村</th>
    </tr>";

        $table_end = "</table>";

        if ($prefectures === '北海道') {
            $db_table = 'zip_hokkaido_table';
        } elseif ($prefectures === '兵庫県') {
            $db_table = 'zip_hyogoken_table';
        } elseif ($prefectures === '新潟県') {
            $db_table = 'zip_nigataken_table';
        }

        // 接続情報
        $host = '';
        $username = '';
        $passwd = '';
        $dbname = '';
        $link = mysqli_connect($host, $username, $passwd, $dbname);

        if ($link) {
            // 文字化け防止
            mysqli_set_charset($link, 'utf8');

            // SELECT文 郵便番号から検索
            if (isset($_POST['post_code']) && $_POST['post_code'] !== '') {
                $query =
                    "SELECT post_code, kanzi_prefectures, kanzi_city_ward, kanzi_town_village FROM zip_hokkaido_table WHERE post_code = '$post_code'
            UNION SELECT post_code, kanzi_prefectures, kanzi_city_ward, kanzi_town_village FROM zip_hyogoken_table WHERE post_code = '$post_code'
            UNION SELECT post_code, kanzi_prefectures, kanzi_city_ward, kanzi_town_village FROM zip_nigataken_table WHERE post_code = '$post_code'";
            }

            // SELECT文 地名から検索
            if (isset($_POST['prefectures']) && isset($_POST['municipalities']) && $_POST['municipalities'] !== '') {
                $query =
                    "SELECT post_code, kanzi_prefectures, kanzi_city_ward, kanzi_town_village
            FROM $db_table WHERE kanzi_prefectures = '$prefectures' AND kanzi_city_ward = '$municipalities'";
            }

            // クエリを実行
            $result = mysqli_query($link, $query);
            var_dump($result);

            // 結果を配列で取得
            while ($row = mysqli_fetch_array($result)) {
                $zipcode_all[] = $row;
            }

            // ページ総数
            $total = count($zipcode_all) / 10;

            // ページネーション 1ページ目
            if ($page === 1) {
                $zipcode_part = array_slice($zipcode_all, 0, 10);
            }

            if (isset($_POST['page'])) {
                $page = (int)$_POST["page"];
                $start = ($page - 1) * 10;
                var_dump($page);
                $zipcode_part = array_slice($zipcode_all, $start, 10);
            }

            // 検索結果総数
            $num_search = '検索結果は' . count($zipcode_all) . '件' . "<br>" . "<br>" . '郵便番号検索結果';

            // 結果セットを開放
            mysqli_free_result($result);

            // 接続を閉じる
            mysqli_close($link);

            // 接続失敗した場合
        } else {
            print 'DB接続失敗';
        }
    }
}

?>

<!DOCTYPE html>
<html lang="ja">

<head>
    <title>郵便番号検索</title>
</head>

<body>

    <h1>郵便番号検索</h1>
    <h2>郵便番号から検索</h2>

    <!-- 郵便番号から検索 -->
    <form method="post" name="post" id="form1">
        <p><input type="text" name="post_code" placeholder="例)1010001" value=<?php print $post_code ?>>&nbsp;<input type="submit" value="検索"></p>

        <h2>地名から検索</h2>

        <!-- 地名から検索 -->

        <label>
            都道府県を検索&nbsp;
            <select name="prefectures">
                <?php
                foreach ($prefecturesList as $va) {
                    if ($va === $explode_page[1]) {
                        print "<option value='$va' selected>" . $va . "</option>";
                    } else {
                        print "<option value='$va'>" . $va . "</option>";
                    }
                }
                ?>
            </select>
        </label>

        <label>
            市区町村&nbsp;
            <input type="text" name="municipalities" value=<?php print $municipalities ?>>
        </label>

        &nbsp;<input type="submit" value="検索">

    </form>

    <!-- 棒線 -->
    <hr>

    <!-- ここに検索結果が表示される -->
    <?php
    print $comment;
    ?>

    <!-- エラーメッセージ -->
    <?php
    if (($post_code !== '' &&  $preg_match = preg_match($regexp_post_code, $post_code) === 1) || ($prefectures !== '都道府県を検索' && $municipalities !== '')) {
        $error1 = [];
        $error2 = [];
    }

    foreach ($error1 as $error_message_value_1)
        print $error_message_value_1;

    foreach ($error2 as $error_message_value_2)
        print $error_message_value_2;

    ?>

    <!-- 検索結果総数 -->
    <?php print $num_search; ?>

    <!-- テーブル 開始-->
    <?php
    print $table_start;
    ?>

    <?php
    foreach ($zipcode_part as $value) {
    ?>

        <tr>
            <td><?php print $value['post_code'] . "<br>"; ?></td>
            <td><?php print $value['kanzi_prefectures'] . "<br>"; ?></td>
            <td><?php print $value['kanzi_city_ward'] . "<br>"; ?></td>
            <td><?php print $value['kanzi_town_village'] . "<br>"; ?></td>
        </tr>

    <?php
    }
    ?>

    <!-- テーブル 終了-->
    <?php
    print $table_end;
    ?>

    <!-- ページネーション-->
    <?php if ($page > 1) : ?>
        <a href="javascript:post.submit()">前へ</a>
        <input type="hidden" name="page" value="<?php print $page - 1; ?>,<?php print $prefectures; ?>" form="form1">
    <?php endif; ?>

    <?php if ($page < $total) : ?>
        <a href="javascript:post.submit()">次へ</a>
        <input type="hidden" name="page" value="<?php print $page + 1; ?>,<?php print $prefectures; ?>" form="form1">
    <?php endif; ?>

</body>

</html>

自分で試したこと

POSTでページ遷移させたいです。
JavaScriptを使わずテキストリンクでPOSTはできない、と調べて分かったのですが
JavaScript学んでおらずいまいちjavascript:post.submit()の使い方がわかっていないです。
よろしくお願いします。

0

2Answer

name属性がpageの要素が複数あるので、最後の要素の値つまり「次へ」用のパラメータが送信されているのだと思います。

1つの<form>タグでなんとかしようとせずに、それぞれ<form>タグを使ってはいかがでしょうか。
そうすれば1つの値に複数の意味をもたせるような事もなくなり、混乱が少なくなると思います。

1Like

Comments

  1. @sherylranka426

    Questioner

    お返事ありがとうございます!
    「郵便番号から検索」「都道府県を検索」「ページングの前へ」「ページングの次へ」のformを分けると、うまくいきました。
    しかし、formを分けると改行され、見た目が変わるのですが
    例えば「次へ」「前へ」を一列にしたい場合、POSTで表現することは難しくなるのでしょうか。

  2. 解決したようで良かったです。

    formを分けると改行され、見た目が変わるのですが
    例えば「次へ」「前へ」を一列にしたい場合、POSTで表現することは難しくなるのでしょうか。

    表示は基本的にスタイルの領分なのでcssで解決できると思いますよ。

    また、検索やページングはGETメソッドにされることが多いです。
    POSTにこだわりがなければGETにすることも検討できます。

    • 主にGETメソッドはデータの取得、POSTはデータの登録や編集などの用途であること
    • GETメソッドは検索条件やページをURLで表現できること(直接アクセスが可能)

    参考

  3. @sherylranka426

    Questioner

    さっそくのご回答、ありがとうございます!

    GETで表現できたので、POSTで表現するとどういう書き方になるのだろうと思い書いてみただけで、特にこだわりないので次からGET表現していきたいと思います!

    スタイルの領分なのでcssで解決できる

    たしかに、だからFlexboxなるものがあるのですね…。とても勉強になりました。
    こちらも一列にできるか試してみようと思います!

    ご親切に参考資料もありがとうございます。

POSTでページ遷移させたいです。

GET でなく POST を使う理由は何ですか?

ページングで遷移先のページ番号をサーバーに送信したいのではなかろうかと想像してますが、そうであればページ番号はクエリ文字列に設定し、サーバー側ではそれを受け取って処理するようにしてはいかがですか? そうすれば GET で遷移できるので javascript を使わなくて済みます。(自分が知る限りですが、普通ページャーはそうなってます)

0Like

Comments

  1. @sherylranka426

    Questioner

    GETで表現できたため、POSTで表現するとどういう書き方になるのだろうと思い、書いてみました。

    ページャーは普通GET

    GETが一般的なのですね。
    POSTでページングは行われることはないのでしょうか。もし、あれば教えていただければとてもうれしいです。

    また、すみません疑問に思ったことなのですが、
    クエリ文字列を設定した

    <a href="?page=<?php print($page - 1); ?>&prefectures=<?php print $prefectures; ?>&municipalities=<?php print $municipalities; ?>">前のページへ</a>
    

    のGETで送られるデータは?〇〇の後ろの値が送られる、ということでしょうか。

  2. POSTでページングは行われることはないのでしょうか。もし、あれば教えていただければとてもうれしいです。

    あるかもしれませんが、

    「郵便番号から検索」「都道府県を検索」「ページングの前へ」「ページングの次へ」のformを分ける

    というやり方は自分的には考えにくいし、ページャーに POST を使う例も知りません。

    例えば下の画像の赤枠のようなページャーの場合(一般によくある形のページャーだと思います)、First, Prev, 5, 6, ... Next, Last で form を分けるなんてことはしませんよね。

    image.jpg

    クエリ文字列で情報を送りたくないとかの理由で、どうしても POST でページングするという要件があれば、form を submit する形で遷移するのではなく、AJAX とか fetch API を使って POST で遷移先のページ番号などの情報をサーバーに送信し、返ってきた応答でページを書き換えるというようなことを考えると思いますが。

    GETで送られるデータは?〇〇の後ろの値が送られる、ということでしょうか。

    そうです。上の画像の例でいうと、青枠の部分の pageNumber=8 です。その情報からサーバーは 8 ページ目を取得して応答として返しています。ページャーも 8 ページ目であることを示しています。

  3. @sherylranka426

    Questioner

    ご返信ありがとうございます!

    例えば下の画像の赤枠のようなページャーの場合(一般によくある形のページャーだと思います)、First, Prev, 5, 6, ... Next, Last で form を分けるなんてことはしませんよね。

    たしかに…よく見るのは「次へ」「前へ」ではなく、1,2,3,…ですね、
    どういった書き方になるのか想像がつかないですが同じようにFirst, Prev, 5, 6, ... Next, Lastをformごとに分けるのは大変そうです。

    POST でページングするという要件があれば、form を submit する形で遷移するのではなく、AJAX とか fetch API を使って POST で遷移先のページ番号などの情報をサーバーに送信し、返ってきた応答でページを書き換える

    AJAX やfetch APIの知識はないですが、こういった方法があるのですね!
    また勉強する機会があるかもしれないので、頭の片隅に置いておきます。

    そうです。上の画像の例でいうと、青枠の部分の pageNumber=8 です。その情報からサーバーは 8 ページ目を取得して応答として返しています。ページャーも 8 ページ目であることを示しています。

    そうなのですね!
    練習ではinput type=textなど、inputを使っていたので、
    リンクのデータの受け渡しがなかなかイメージつかず悩んでました(-_-;)

    わかりやすいご解説ありがとうございます!

Your answer might help someone💌