全データ表示
データベースに保存されている全データは、先に説明した「DataTable」を使ってここに表示します。
さらにページからは直接画面に画像表示が行えるように、画像ポップアップや拡大表示などの機能 をそなえた「lightbox2」アプリケーションを、CDN経由から利用することにします。
使い方の基本型は以下のコードのように記述します。
HTML
さらにページからは直接画面に画像表示が行えるように、画像ポップアップや拡大表示などの機能 をそなえた「lightbox2」アプリケーションを、CDN経由から利用することにします。
使い方の基本型は以下のコードのように記述します。
HTML
<a href="image.jpg" data-lightbox="mygroupname" data-title="myimagetitle">表示</a>
<?php
/**
*全データ表示
*/
// データベースに接続
require_once("imageDB.php"); // 一回のみ読み込み
$pdo = executeQuery();
// 全データ取得
$stmt = null;
$row = '';
$rowVar = '';
$sql = 'SELECT * FROM image_table'; // ステートメント
try {
$stmt = $pdo->query($sql);
// レコードを取得して変数に代入
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ // カラムで検索
$rowVar .= '<tr>';
$rowVar .= '<td>'.$row['id'].'</td><td>'.$row['imgName'].'</td><td><textarea cols="30" rows="2" readonly>'.$row['imgComment'].'</textarea></td><td>'.$row['created_at'].'</td><td>'.$row['updated_at'].'</td>';
$rowVar .= '<td><a href=\'show.php?id='.$row['id'].'\' data-lightbox="mygroup" data-title="'.$row['imgName'].'">表示</a></td>';
$rowVar .= '<td><a href="update.php?id='.$row['id'].'">更新</a></td>';
$rowVar .= '<td><a href=\'delete.php?id='.$row['id']."&imgname=".$row['imgName'].'\' onclick=\'return recdelChk('.$row['id'].')\'>削除</a></td>';
$rowVar .= '</tr>';
}
} catch (PDOException $e) {
echo $e->getMessage();
}
$pdo = null;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像データベース：全データの表示</title>
<!--// CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.js"></script>
<style type="text/css">
table#example th {
border-top:0.4rem solid #091df7;
border-bottom:0.1rem solid #091df7;
}
table#example tfoot th {
font-weight:bold;
border-top:0.1rem solid #091df7;
border-bottom:0.2rem solid #091df7;
}
</style>
</head>
<body style="padding:20px;">
<h4 id="pageTop">全データ</h4><br />
<div>
<table id="example" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>番号</th>
<th>画像名</th>
<th style="width:250px;">コメント</th>
<th>登録日時</th>
<th>更新日時</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Name</th>
<th>Comment</th>
<th>Regi day</th>
<th>Update day</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</tfoot>
<tbody>
<?= $rowVar ?> <!--//全ﾃﾞｰﾀ表示-->
</tbody>
</table>
</div>
<br />
<a href="inpimage.php">登録</a><br />
<a href="index.html">トップページ</a>
<script>
<!--
// datatableメニュー
window.onload = function(){
var table = $('#example').DataTable({
"lengthMenu":[[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"stateSave":true // ページを保存
});
}
// lightbox2オプション
lightbox.option({
'fitImagesInViewport':true, // 画像を画面内のサイズに収める
'maxWidth':600,
'maxHeight':600,
'positionFromTop':70, // 表示位置
'resizeDuration':800, // 画像表示所要時間
'wrapAround':true // 表示を繰り返す
})
// 削除確認ダイアログ
function recdelChk (id) {
var id;
var flag = confirm("[番号="+id+"]番のデータを削除してもよろしいですか？\n\n削除したくない場合は[キャンセル]ボタンを押して下さ．");
return flag; // flagがTRUEなら送信、FALSEなら送信しない
}
//-->
</script>
</body>
</html>
画像表示
全データ表示ページの「表示」操作により、画像を「lightbox2」アプリケーションを使って表示。
show.php
show.php
<?php
/**
*画像表示
*/
// データベースに接続
require_once 'imageDB.php';
$pdo = executeQuery();
// 表示画像のid番号をGETメソットで受け取る
$image_id = (int)$_GET['id'];
// 指定の画像を取得
$sql = 'SELECT * FROM image_table WHERE id = :id'; // ステートメント
$stmt = null;
try {
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':id', $image_id, PDO::PARAM_INT);
$stmt->execute();
$image = $stmt->fetch();
$image_type = $image['imgType'];
$imageshow = $image['imgContent'];
} catch (PDOException $e) {
echo $e->getMessage();
}
$pdo = null;
// 表示
header('Content-type: '.$image_type);
echo $imageshow;
exit;
?>
更新フォーム
全データ表示ページの「更新」操作により、更新するレコードをフォームに表示。
update.php
update.php
<?php
/**
*更新フォーム
*/
// セッション開始
session_start();
// データベースに接続
require_once("imageDB.php");
$pdo = executeQuery();
// 更新のidをGETメソットで取得
if(isset($_GET['id'])){
$personid = $_GET['id'];
// 更新データの取得
$sql = 'SELECT * FROM image_table WHERE id = '.$personid; // ステートメント
try {
$stmt = $pdo->query($sql);
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) { // カラムで検索
$personid = $row['id'];
$_SESSION['upimgname'] = $row['imgName'];
$_SESSION['uptypename'] = $row['imgType'];
$_SESSION['upimgcontent'] = $row['imgContent'];
$comment = $row['imgComment'];
$created = $row['created_at'];
$updated = $row['updated_at'];
}
} catch (PDOException $e) {
echo $e->getMessage();
}
$pdo = null;
} else {
return;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像データベース：更新フォーム</title>
<script src="js/rotate.js"></script>
<script src="js/imgupdate.js"></script>
</head>
<body>
<h2>更新</h2>
<h3 id="reaction"> </h3>
<ul style="position:relative;left:-40px;display:flex;list-style:none;">
<li>
<form name="update_form" id="update_form">
<table>
<tr><td>番号:</td><td><input type="text" name="id" value="<?= $personid ?>" readonly style="background:#eaeaea;"></td></tr>
<tr><td>画像名:</td><td><input type="text" name="imgname" value="<?= $_SESSION['upimgname'] ?>" readonly style="background:#eaeaea;"></td></tr>
<tr valign="top"><td>コメント:</td><td><textarea name='comment' cols="16" rows="8"><?= $comment ?></textarea></td></tr>
<tr><td>登録日時:</td><td><input type='text' value='<?= $created ?>' readonly style="background:#eaeaea;"></td></tr>
<tr><td>更新日時:</td><td><input type='text' value='<?= $updated ?>' readonly style="background:#eaeaea;"></td></tr>
</table>
</form>
<br />
<a href="" onclick="javascript:updateform('update_form'); return false;" style="color:#000;">更新</a>
<br /><br /><br />
<a href="show_All.php">全データ表示</a><br />
<a href="inpimage.php">登録</a><br />
<a href="index.html">トップページ</a>
</li>
<li> </li>
<!--// 更新画像表示-->
<li>
<span>回転：</span>
<span><input type="button" name='l_angle' value="左へ90度回転" onclick="imgrotate('update_form','l_rotate')" title="画像を左へ90度回転します。"></span>
<span><input type="button" name='r_angle' value="右へ90度回転" onclick="imgrotate('update_form','r_rotate')" title="画像を右へ90度回転します。"></span>
<br />
<!--// 最初はrequire関数で、以後は非同期通信経由で表示．-->
<div id="uprotateimageshow" style="margin-top:7px;"><?php require("rotate.php"); ?></div>
</li>
</ul>
</body>
</html>
Search
