オリジナル画像を表示
「登録」ページに、アップロード画像及び「画像回転」操作の画像を表示。
rotateimageshow.php
rotateimageshow.php
<?php
/**
* オリジナル画像表示
*/
// セッション開始
session_start();
header('content-type:' .$_SESSION['image_type']);
print $_SESSION['imagecontent'];
exit;
?>
登録処理
「登録」ページから非同期通信経由でデータを受け取り、登録を実行。
insert2.php
insert2.php
<?php
/**
* 登録の実行
*/
// セッション開始
session_start();
// データベースに接続
require_once('imageDB.php'); // 読込み一回
$pdo = executeQuery();
$result = '';
if(empty($_FILES['inp_imagename']['name']) || !isset($_SESSION['file_name'])) {
print $result = '画像データ入力は必須です！。';
return;
} else {
$imagecomment = htmlspecialchars($_POST['comment'], ENT_QUOTES); // コメント
// 登録－INSERTステートメント
$sql = 'INSERT INTO image_table (imgName, imgType, imgContent, imgComment)
VALUES(:imgName, :imgType, :imgContent, :imgComment)';
try {
// エラー処理モード設定
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
// トランザクションの開始
$pdo->beginTransaction();
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':imgName', $_SESSION['file_name'], PDO::PARAM_STR);
$stmt->bindValue(':imgType', $_SESSION['image_type'], PDO::PARAM_STR); // image/jpeg[,png,gif]
$stmt->bindValue(':imgContent', $_SESSION['imagecontent'], PDO::PARAM_STR); // セッション変数から登録
$stmt->bindValue(':imgComment', $imagecomment, PDO::PARAM_STR);
$stmt->execute();
$pdo->commit();
print $result = '<span style="color:#0000FF;font-weight:bold;">画像［'.$_SESSION['file_name'].'］を登録しました。</span>';
} catch(PDOException $e) {
$pdo->rollback(); // エラーなら何もせず戻す
print '登録に失敗しました! '.$e->getMessage();
}
}
$pdo = null;
?>
「全データ」を表示
全データは前述で説明しました「DataTeble」に表示します。
ページ内には直接画像の表示が行えるように、画像ポップアップや拡大表示などの機能 をそなえた「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 = '';
// 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;
?>
Search
