phpとjavascriptを使ってSQLiteで画像DBを作る(1/5)

はじめに

今回は、phpとjavascriptを使ってSQLiteデータベースに画像（ここでは写真画像を想定）を保存する方法について、備忘録として書きましたのでご紹介します。
なお、当サイトは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/）

       ----
       ----				 
       extension=pdo_sqlite
       ;extension=php_pdo_sqlite.dll
       ----

編集をした場合は必ずコントロールパネルなどから、「Apache」ウェブサーバーを再起動します。
－－＞コントロールパネル(xampp/xampp-control.exe）

3．プログラム作成にテキストエディターを用意する
エディターならなんでもかまいませんが（メモ帳でも）、フリーソフトウェアーで高速・高機能な「Notepad++」がお勧めです。
「Notepad++」

4．データ表示に「DataTable」を利用する
「DataTable」はデータの検索やページング表示等をそなえた高機能なJQueryプラグインです。
ライセンスはＭＩＴになっていますが、利用にあたってはサイト内の規約等をよく確認して下さい。
「DataTables」

「DataTable」の利用方法

１．CDN経由でダウンロード
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と同一にすることを忘れないで下さい。

			<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 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
  |
  ■htdocs
    |
    ■image-Sqlite-SampleApp
      |
      ■js
        └ imginsert.js
        └ imgupdate.js
        └ rotate.js								              
      index.html
      inpimage.php
      insert.php
      imageDB.php
      rotate.php
      show.php
      show_All.php
      update.php
      update2.php
      upimageshow.php
      delete.php

次頁からは各種ファイルを作成します。