ゆるキャラのペパクラ情報サイトを作る(4)引き続きコーディング&アップロード

0
    JUGEMテーマ:ホームページ作成
     

    続けていきましょう。

    4.検索クエリの作成(当該ページ用、全ページ数取得用)

    これはまず、GETとPOSTでのコードを1つにまとめたかったので、あらかじめ検索語を1つの変数に移してやります。

    if(isset($_POST['searchword'])){
    $searchword = $_POST['searchword'];
    }else{
    $searchword = urldecode($_GET['searchword']);
    }
    

    そして検索クエリを作っていくわけですが、ここで白状します、一つ手抜きをしました。複数語のand検索になっていません。理由は単に面倒くさかったから、いえ、サイトの完成を第一優先にしたからです。将来的には実装していきますので、お許しください。

    で、クエリですがポイントが2つあります。

    a.ALLまたはallを指定すると、全件表示するようにする。それ以外はLIKE検索で名称、地域、所属、説明文を対象に検索する。

    b.ページ数取得用に全件検索するクエリと、当該ページ表示用にLIMITを付けるクエリの2つを用意する。

    まずはaです。

    if($searchword=='ALL' || $searchword=='all'){
    $query1 = 'SELECT * FROM yuruchara';
    }else{
    $query1 = 'SELECT * FROM yuruchara';
    $query1 = $query1.' WHERE name LIKE '%'.$searchword.'%'';
    $query1 = $query1.' or area LIKE '%'.$searchword.'%'';
    $query1 = $query1.' or affiliation LIKE '%'.$searchword.'%'';
    $query1 = $query1.' or note LIKE '%'.$searchword.'%'';
    }
    

    ALLまたはallの場合はWHERE句無しの全件検索、それ以外はWHERE句でLIKEを用いた検索を行わせます。行を分けているのは単に見やすくするためです。

    それからb。これはaで作ったクエリにLIMIT句を付け足すだけです。ただ、その前にページ番号を設定しておく必要があります。

    if(!isset($_GET['page'])){
    $page = 1;
    }else{
    $page = $_GET['page'];
    }
    $query = $query1.' LIMIT '.(($page-1)*20).',20';
    

    前半で、GETでなければ1ページ、GETの場合は指定ページを$pageに入れてやり、最後の行でLIMIT句に整形してやります。

    5.全ページ数の取得

    これは簡単です。まずコードはこうです。

    $result1 = mysql_query($query1);
    $numRow1 = mysql_num_rows($result1);
    $itemPerPage = 20;
    $numPage = ceil($numRow1/$itemPerPage);
    

    先ほど作ったLIMIT句無しの方のクエリを使ってて問合せ(1行目)、検索結果の行数を取得し(2行目)、1ページ20行として(3行目で決め打ち)、全行数を1ページの行数で割った結果を切り上げてページ数を算出します。

    6.当該ページデータの取得

    これはもっと簡単、1行です。

    $result = mysql_query($query);
    

    7.検索結果の表示部

    ここは次のようなコードになります。結局これは試行錯誤でレイアウトしました。

    echo '
    <table class=ypindex>
    <tr>
    <th width=180>名称</th>
    <th width=160>分類/所属</th>
    <th width=380>入手方法等</th>
    </tr>
    ';
    
    while ($row = mysql_fetch_assoc($result)){
    
    echo'
    <tr>
    <td class=ypname><a href='.$row['url'].' target=_blank><img class=ypphoto src=./ypimg.php?id='.$row['index'].'>'.$row['name'].'</a></td>';
    if($row['category']=='ご当地'){
    echo'<td><img class=icon src=./images/ypindex/icon4.gif>'.$row['affiliation'].'<br/>('.$row['area'].')</td>';
    }else{
    echo'<td><img class=icon src=./images/ypindex/icon5.gif>'.$row['affiliation'].'<br/>('.$row['area'].')</td>';
    }
    if($row['avail']=='DL'){
    echo'<td><a href='.$row['url'].' target=_blank><img class=icon src=./images/ypindex/icon1.gif></a>'.$row['note'].'</td></tr>';
    }elseif($row['avail']=='DL終了' or $row['avail']=='DLなし'){
    echo'<td><a href='.$row['url'].' target=_blank><img class=icon src=./images/ypindex/icon1b.gif></a>'.$row['note'].'</td></tr>';
    }elseif($row['avail']=='販売'){
    echo'<td><a href='.$row['url'].' target=_blank><img class=icon src=./images/ypindex/icon2.gif></a>'.$row['note'].'</td></tr>';
    }elseif($row['avail']=='販売終了'){
    echo'<td><a href='.$row['url'].' target=_blank><img class=icon src=./images/ypindex/icon2b.gif></a>'.$row['note'].'</td></tr>';
    }elseif($row['avail']=='配布'){
    echo'<td><a href='.$row['url'].' target=_blank><img class=icon src=./images/ypindex/icon3.gif></a>'.$row['note'].'</td></tr>';
    }else{
    echo'<td><a href='.$row['url'].' target=_blank><img class=icon src=./images/ypindex/icon3b.gif></a>'.$row['note'].'</td></tr>';
    }
    }
    echo '</table>';
    

    まず最初のブロックでthタグを使って表の項目名称欄を作ります。表の幅はここで決めてしまいます。

    次にwhile文を使って、検索結果がなくなるまで1行ずつ$rowに検索結果を読み込ませます。whileにしているのは、検索結果が何行になるかがわからないためです。

    そして検索結果を表に埋め込んでいきます。if文がいろいろ書いてあるのは、分類と入手方法のアイコンを切り替えるためです。

    ところところclassが指定してあるのは、cssで表示をコントロールするためです。htmlだけではわかりませんが、表の枠線は、thとtdに対して左と下、tableに対して上と右に表示させることで、簡単にすっきりした表を作っています。

    8.ページナビゲーション

    1ページ20件で複数ページにわたる場合は、表の上下にページナビゲーションを表示してページをジャンプできるようにします。全件表示にしても10ページ程度とそれほど多くはないので、今回はこんな感じのシンプルなページナビゲーションにしました。

    Page:[1][2][3][4][5][6][7][8][9][10]

    現在ページだけリンクがなく、ほかの数字には該当ページへのリンクが貼ってあります。この部分のコードはこうなります。

    echo 'Page: ';
    for($count=1; $count<$numPage+1; $count++){
    if($count==$page){
    echo '['.$count.'] ';
    }else{
    echo '<a href="./ypindex.php?page='.$count.'&searchword='.urlencode($searchword).'">['.$count.']</a> ';
    }
    }
    echo '<br />';
    

    総ページ数になるまでforループでリンクを書いていき、現在ページは文字だけです。ポイントはGETのリンクを作る際に、ページ番号と検索語の2つを引数にすること、検索語はurlencodeをしてやること(読みだす部分でurldecodeを使っているところは既に出てきました)

    コーディングは以上です、そしてアップロードです。
    これは思った以上にすんなり進みました。
    phpのコードは通常通りftpでアップロード。
    データベースはローカルのphpMyAdminからsqlフォーマットでエクスポートしたものを、今度はサーバのphpMyAdminでインポートして終了です。

    出来上がったページがこちら「ゆるキャラペパクラインデックス」です。皆様もぜひお楽しみください。それからゆるキャラのペパクラ情報、お待ちしています!。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天