前回の続き。アップロード時に指定したキーワード(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
関連エントリー

