はじめに
PhpとJavascriptを使って、SQLITEデータベースに画像（ここでは写真画像を想定）を保存する
方法について、備忘録として書きましたのでご紹介します。
当サイトは、すでに公開の「phpとjavascriptを使ってSQLiteで画像DBを作る」サイトに 画像操作の機能を追加したものです。追加機能は以下の二つです。
1．登録する画像ファイルを選択すると同時に画像を表示する
2．画像の傾きを修正する
なお、当サイトはphp初心者様向きで、掲載したコードは簡便なサンプル的なものです（上級者様は読み飛ばして下さい）。
ところで画像をデータベースで扱うには画像そのものを直接保存する、あるいは画像ファイル名のみ を保存するなど様々な手法があります。が、要は、アプリケーション開発の目的やユーザー利用の仕 方あるいは周辺のシステム構成の事情等を勘案すればよいかとも思います。
さて手法はともかく、当サイトではSQLiteデータベースにアップロード画像を直に保存する方法を取 ることにしてみました。
ただし、メモリサイズが大きい画像をSQLiteに保存するには容量の制限も考慮する必要があります。 詳しい解説については他のサイトで多く扱っていますのでそちらを参考にしてみてください。
「SQLite」は軽量なオープンソースのデータベースです。設定も比較的簡単でSQL文を書き込むだけ で自動的にデータベースを作成してくれます。これは楽チン！。
このSQLiteに画像を保存する！？え－．． 、まあ作ってみると思いのほか軽快に動いてくれるものです。
最後に、プログラムのSQLiteデータベースの記述部分については、他のデータベースシステム（例え ばMysqlデータベースに変更する）に組み換えやすく作成しましたので試みて下さい。
当サイトは、すでに公開の「phpとjavascriptを使ってSQLiteで画像DBを作る」サイトに 画像操作の機能を追加したものです。追加機能は以下の二つです。
1．登録する画像ファイルを選択すると同時に画像を表示する
2．画像の傾きを修正する
なお、当サイトはphp初心者様向きで、掲載したコードは簡便なサンプル的なものです（上級者様は読み飛ばして下さい）。
ところで画像をデータベースで扱うには画像そのものを直接保存する、あるいは画像ファイル名のみ を保存するなど様々な手法があります。が、要は、アプリケーション開発の目的やユーザー利用の仕 方あるいは周辺のシステム構成の事情等を勘案すればよいかとも思います。
さて手法はともかく、当サイトではSQLiteデータベースにアップロード画像を直に保存する方法を取 ることにしてみました。
ただし、メモリサイズが大きい画像をSQLiteに保存するには容量の制限も考慮する必要があります。 詳しい解説については他のサイトで多く扱っていますのでそちらを参考にしてみてください。
「SQLite」は軽量なオープンソースのデータベースです。設定も比較的簡単でSQL文を書き込むだけ で自動的にデータベースを作成してくれます。これは楽チン！。
このSQLiteに画像を保存する！？え－．． 、まあ作ってみると思いのほか軽快に動いてくれるものです。
最後に、プログラムのSQLiteデータベースの記述部分については、他のデータベースシステム（例え ばMysqlデータベースに変更する）に組み換えやすく作成しましたので試みて下さい。
準備
1．XAMPP
ウェブアプリケーションの開発環境をローカルに簡単に構築でき、実行に必要なPHPなどの主要フ リーソフトウェアをパッケージとしてまとめた「XAMPP」フリーアプリケーションを利用します。
■本家サイト
「XAMPP」
「XAMPP」の説明は省略します。
■本稿で扱う「XAMPP」のバージョン
XAMPP for Windows 7.2.9
PHP Version 7.2.9
2．SQLiteデータベース
バージョンが5.3以降のPHPが組み込まれている「XAMPP」であれば、SQLiteは標準で搭載されています。
－－＞ php_sqlite3.dll (xampp/php/ext/)
SQLiteを利用するには、設定が有効の状態か「php.ini」ファイルをエディタで開いて、以下の記述 のうちどちらか先頭のセミコロン（；）が削除されているか確認してください。
デフォルトでは利用が有効の状態になっているはずです。
php.ini（xampp/php/）
ウェブアプリケーションの開発環境をローカルに簡単に構築でき、実行に必要なPHPなどの主要フ リーソフトウェアをパッケージとしてまとめた「XAMPP」フリーアプリケーションを利用します。
■本家サイト
「XAMPP」
「XAMPP」の説明は省略します。
■本稿で扱う「XAMPP」のバージョン
XAMPP for Windows 7.2.9
PHP Version 7.2.9
2．SQLiteデータベース
バージョンが5.3以降のPHPが組み込まれている「XAMPP」であれば、SQLiteは標準で搭載されています。
－－＞ php_sqlite3.dll (xampp/php/ext/)
SQLiteを利用するには、設定が有効の状態か「php.ini」ファイルをエディタで開いて、以下の記述 のうちどちらか先頭のセミコロン（；）が削除されているか確認してください。
デフォルトでは利用が有効の状態になっているはずです。
php.ini（xampp/php/）
---- ---- extension=pdo_sqlite ;extension=php_pdo_sqlite.dll ----
編集をした場合は必ずコントロールパネルなどから、「Apache」ウェブサーバーを再起動します。
－－＞コントロールパネル(xampp/xampp-control.exe）
3．プログラム作成にテキストエディターを用意する
エディターならなんでもかまいませんが（メモ帳でも）、フリーソフトウェアーで高速・高機能な 「Notepad++」がお勧めです。
「Notepad++」
4．データ表示に「DataTable」を利用する
「DataTable」はデータの検索やページング表示等をそなえた高機能なJQueryプラグインです。
ライセンスはＭＩＴになっていますが、利用にあたってはサイト内の規約等をよく確認して下さい。
「DataTables」
－－＞コントロールパネル(xampp/xampp-control.exe）
3．プログラム作成にテキストエディターを用意する
エディターならなんでもかまいませんが（メモ帳でも）、フリーソフトウェアーで高速・高機能な 「Notepad++」がお勧めです。
「Notepad++」
4．データ表示に「DataTable」を利用する
「DataTable」はデータの検索やページング表示等をそなえた高機能なJQueryプラグインです。
ライセンスはＭＩＴになっていますが、利用にあたってはサイト内の規約等をよく確認して下さい。
「DataTables」
「DataTable」の利用方法
１．CDN経由でダウンロード
HTMLに以下のようにコードを記述します。
HTMLに以下のようにコードを記述します。
<head> <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 type="text/javascript" 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> </head>
２．JS
一ページ当たりのレコード数を指定するプルダウンメニューの表示と、ページ保存の可否を設定する スクリプトです。
HTMLのbody終了タグの直前あたりに書き込んで下さい。
id名はtableのidと同一にすることを忘れないで下さい。
一ページ当たりのレコード数を指定するプルダウンメニューの表示と、ページ保存の可否を設定する スクリプトです。
HTMLのbody終了タグの直前あたりに書き込んで下さい。
id名はtableのidと同一にすることを忘れないで下さい。
<script type="text/javascript">
window.onload = function() {
var table = $('#example').DataTable({
// メニュー
"lengthMenu":[[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
// ページを保存
"stateSave":true
});
}
</script>
３．HTML
tableタグの基本的な記述例です。
CSSはclass名を変更して自分好みにしてもかまいません。
tableのid名は2項のJSと同名にします。
参考：「DataTables」
example.html
tableタグの基本的な記述例です。
CSSはclass名を変更して自分好みにしてもかまいません。
tableのid名は2項のJSと同名にします。
参考：「DataTables」
example.html
<table id="example" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
ディレクトリ構成
ここで作成するフォルダーとファイル名は、以下のようにします。
xampp
次頁からは各種ファイルのプログラムコードを作成します。
Search
