前回の続き。アップロード時に指定したキーワード(OS:iPhone/Android)の画像を含む画像を表示するようにした。
成果物:ranking.html (OS選択のリンクを追加)
メモ
- PHPプログラム(ranking.php)を実行する際にパラメータでキーワード(OS)を渡している
- SQLのWHERE句で条件が複数の場合はANDで結ぶ
ソースコード
ranking.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマホキャプチャーギャラリー</title> </head> <body> <a href="index.html">Home</a> | <a href="upload.html">アップロード</a> | <a href="ranking.html">人気順</a> | <a href="latest.html">新着順</a> <p>ランキングページ[ranking.html] <a href="?os=all">ALL</a> | <a href="?os=iPhone">iPhone</a> | <a href="?os=Android">Android</a></p> <div id="ranking"></div> <div id="paging"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="./function.js"></script> <script type="text/javascript"> $(document).ready(function() { var page = getUrlVars()['page']; if (page === undefined) { page = 1; } var os = getUrlVars()['os']; if (os === undefined) { os = 'all'; } $.ajax({ type: "GET", url: "ranking.php", data: { page: page, os: os }, success: function(json_data) { /* パラメータ(json_data):ranking.phpの処理結果 { "items":{ {"id":"xx", "name":"xx", ...}, {"id":"xx", "name":"xx", ...}, ... }, "totalnum":"xx", "totalpage":"xx" } */ // 画像部のHTML生成 $.each(json_data.items, function(index, data) { $('#ranking').append( '<a href="item.php?id='+data.id+'"><img src="./images/'+data.filename+'" alt="image" width="160" /></a> ' ); }); // ページング部のHTML生成 var totalpage = json_data.totalpage; if (page > 1) { $('#paging').append('<a href="?page='+(page-1)+'&os='+os+'">前</a>'); } else { $('#paging').append('前'); } for (var i=1; i<=totalpage; i++) { // 現在ページの番号を強調する if (page == i) { $('#paging').append('<strong><a href="?page='+i+'&os='+os+'">'+i+'</a></strong>'); } else { $('#paging').append('<a href="?page='+i+'&os='+os+'">'+i+'</a>'); } } if (page < totalpage) { $('#paging').append('<a href="?page='+(+page+1)+'&os='+os+'">次</a>'); // "page+1"だと文字列結合になるから+pageにして数値型に変換している } else { $('#paging').append('次'); } } }); }); </script> </body> </html>
ranking.php
<?php require_once('config.php'); require_once('function.php'); // パラメータの確認 if (preg_match('/^[1-9][0-9]*$/', $_GET['page'])) { $page = (int)$_GET['page']; } else { $page = 1; } if ($_GET['os'] == 'iPhone' || $_GET['os'] == 'Android') { $os = h($_GET['os']); } else { $os = 'all'; } header('Content-Type: application/json; charset=utf-8'); echo json_encode(get_ranking($page, $os)); function get_ranking($page, $os) { try { $dbh = new PDO(DSN, DB_USER, DB_PASS); } catch(PDOException $e) { var_dump($e->getMessage()); exit; } // page offset count // 1 0 3 // 2 3 3 // 3 4 3 // 4 7 3 $offset = IMAGENUM_PER_PAGE * ($page - 1); if ($os == 'all') { $sql = sprintf("select * from mobile_capture_showcase where status='active' order by counter desc limit %d, %d", $offset, IMAGENUM_PER_PAGE); $totalnum = $dbh->query("select count(*) from mobile_capture_showcase where status='active'")->fetchColumn(); } else { $sql = sprintf("select * from mobile_capture_showcase where status='active' and os='%s' order by counter desc limit %d, %d", $os, $offset, IMAGENUM_PER_PAGE); $totalnum = $dbh->query(sprintf("select count(*) from mobile_capture_showcase where status='active' and os='%s'", $os))->fetchColumn(); } $items = array(); foreach ($dbh->query($sql) as $item) { array_push($items, $item); } $totalpage = ceil($totalnum / IMAGENUM_PER_PAGE); $dbh = null; // ランキング取得に必要なデータを返却 // array( // "items" => array( // array("id"=>"xx", "name"=>"xx", ...), // array("id"=>"xx", "name"=>"xx", ...), // ... // ), // "totalnum" => "xx", // "totalpage" => "xx" // ); $ret = array("items" => $items, "totalnum" => $totalnum, "totalpage" => $totalpage); return $ret; } ?>
参考サイト
パーフェクトJavaScript (PERFECT SERIES 4)
posted with amazlet at 13.02.07
井上 誠一郎 土江 拓郎 浜辺 将太
技術評論社
売り上げランキング: 60,832
技術評論社
売り上げランキング: 60,832
パーフェクトPHP (PERFECT SERIES 3)
posted with amazlet at 13.01.30
小川 雄大 柄沢 聡太郎 橋口 誠
技術評論社
売り上げランキング: 24,082
技術評論社
売り上げランキング: 24,082
関連エントリー