「全データ」を表示
全データは前述で説明しました「DataTeble」に表示します。ページ内には直接画像の表示が行えるように、画像ポップアップや拡大表示などの機能
をそなえた「lightbox2」アプリケーションを、CDN経由から利用することにします。
画像を表示する基本型は以下のコードのように記述します。
HTML
画像を表示する基本型は以下のコードのように記述します。
HTML
<a href="image.jpg" data-lightbox="mygroupname" data-title="myimagetitle">表示</a>
<?php
/**
* 全データ表示
*/
// データベースに接続
require_once('imageDB.php');
$pdo = executeQuery();
$stmt = null;
$row = '';
$rowVar = '';
// DBから全データ取得－SELECTステートメント
$sql = 'SELECT * FROM image_table';
try {
// エラー処理モード設定
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$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'].'\' onclick=\'return recdelChk('.$row['id'].')\'>削除</a></td>';
$rowVar .= '</tr>';
}
} catch (PDOException $e) {
print 'DBエラー'. $e->getMessage();
}
$pdo = null;
?>
<!--// HTML-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像データベース：全データを表示</title>
<!-- // lightbox2/datatable－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>
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;background:#edf5ff">
<h1 id="pageTop">全データ</h1><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="insert.php">登録</a><br />
<a href="index.php">トップページ</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':800,
'maxHeight':800,
'positionFromTop':70, // 表示位置
'resizeDuration':800, // 画像表示所要時間
'wrapAround':true // 表示を繰り返す
})
// 削除確認ダイアログ
function recdelChk (id) {
var id;
var flag = confirm("[番号="+id+"]番のデータを削除してもよろしいですか？\n\n削除したくない場合は[キャンセル]ボタンを押して下さ");
// flagがTRUEなら送信、FALSEなら送信しない
return flag;
}
//-->
</script>
</body>
</html>
画像表示
「全データ」ページの「表示」（リンク）から、「lightbox2」を使って同ページに画像を表示。
show.php
show.php
<?php
/**
* 画像表示
*/
// データベースに接続
require_once('imageDB.php');
$pdo = executeQuery();
// 画像のid番号をGETメソットで受信
if(isset($_GET['id'])) {
$image_id = $_GET['id'];
// レコードを取得－SELECTステートメント
$sql = 'SELECT * FROM image_table WHERE id = :id';
$row = ''; $stmt = null;
try {
// エラー処理モード設定
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':id', $image_id, PDO::PARAM_INT);
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC); // レコード一行取得
$image_type = $row['imgType'];
$imageshow = $row['imgContent'];
} catch (PDOException $e) {
print 'DBエラー'. $e->getMessage();
}
} else {
return;
}
$pdo = null;
// 表示
header('Content-type: '.$image_type);
print $imageshow;
exit;
?>
削除処理
「全データ」ページの「削除」（リンク）からレコードの削除を実行。
削除処理後は全データを再表示。
delete.php
削除処理後は全データを再表示。
delete.php
<?php
/**
* 削除処理
*/
// データベースに接続
require_once('imageDB.php');
$pdo = executeQuery();
// 削除するid番号をGETメソットで受信
if(isset($_GET['id'])){
$personid = $_GET['id'];
}
// レコード削除－DELETEステートメント
$sql = 'DELETE FROM image_table WHERE id=:id';
try {
// エラー処理モード設定
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
// トランザクションの開始
$pdo->beginTransaction();
$stmt= $pdo->prepare($sql);
$stmt->bindParam( ':id',$personid,PDO::PARAM_INT);
$stmt->execute();
$pdo->commit();
} catch (PDOException $e) {
$pdo->rollback(); // エラーなら実行しない
print "削除に失敗しました。" . $e->getMessage();
}
$pdo = null;
// 全データ再表示
require_once("show_All.php");
?>
Search
