[php+javascript] MariaDB(Mysql)で画像DBを作成(1/6)

はじめに

前回はSQLiteを利用した画像DBを扱いましたが、今回はMariaDB(Mysql)データベースに画像（ここでは写真画像を想定）を保存する簡易な方法について、備忘録として書きましたのでご紹介します。なお、当サイトはphp初心者向（上級者様は読み飛ばしてください）です。

ところで画像をデータベースで扱うには画像そのものを直接保存する、あるいは画像ファイルパスのみを保存するなど様々な手法があります。が、要は、アプリケーション開発の目的やユーザー利用の仕方あるいは周辺のシステム構成の事情等を勘案すればよいかとも思います。

さて手法はともかく、当サイトではデータベースにアップロード画像を直に保存する方法を試みることにしました。

準備

1．XAMPP
ウェブアプリケーションの開発環境をローカルに簡単に構築でき、実行に必要なPHPなどの主要フリーソフトウェアをパッケージとしてまとめた「XAMPP」フリーアプリケーションを利用します。

■本家サイト
　「XAMPP」
　「XAMPP」の説明は省略します。

■本稿で扱う「XAMPP」のバージョン
　XAMPP for Windows 7.2.9
　PHP Version 7.2.9

2．MariaDB(Mysql)データベース
データベースとテーブルは「XAMPP」に標準搭載されている「phpMyAdmin」に作成しますがここでは手作業での制作ではなく、全てをプログラムの中で生成することにします。

■データベース名　－＞　imageDB
■テーブル名　　　－＞　image_table
■テーブルの構造

		    			
				
				名前 データ型 照合順序 属性 NULL デフォルト値 その他
				
				
				id int(11) いいえ なし AUTO_INCREMENT
				imgName varchar(256) utf8_general_ci いいえ なし 
				imgType varchar(64) utf8_general_ci いいえ なし 
				imgContent mediumblob いいえ なし 
				imgComment varchar(256) utf8_general_ci はい NULL 
				created_at datetime いいえ 
				updated_at datetime いいえ

名前	データ型	照合順序	NULL	デフォルト値	その他
id	int(11)		いいえ	なし	AUTO_INCREMENT
imgName	varchar(256)	utf8_general_ci	いいえ	なし
imgType	varchar(64)	utf8_general_ci	いいえ	なし
imgContent	mediumblob		いいえ	なし
imgComment	varchar(256)	utf8_general_ci	はい	NULL
created_at	datetime		いいえ
updated_at	datetime		いいえ

■「phpMyAdmin」を操作してデータベースとテーブルを作成する手順
　－＞コントロールパネルなどから、「Apache」と「MySQL」をスタート。
　　－コントロールパネル(xampp/xampp-control.exe）－
　－＞ブラウザを立ち上げ、アドレスバーに以下のようにアドレスを入力。
　　　http://localhost/
　－＞メニューからphpMyAdminを選択。
　　－開いた画面の中で、データベースとテーブルを作成します。－
　※「phpMyAdmin」の説明は省略します。

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

4．データ表示に「DataTable」を利用する
「DataTable」はデータの検索やページング表示等をそなえた高機能なJQueryプラグインです。ライセンスは「MIT」になっていますが利用にあたってはサイト内の規約等をよく確認して下さい。
「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-MariaDB-SampleApp
           js
             insert.js
             inrotate.js
             update.js
             uprotate.js							              
         index.php
         imageDB.php
         dbmaking.php
         createDB.php
         createTable.php
         insert.php
         inimagerotate.php
         rotateimageshow.php
         insert2.php
         show_All.php
         show.php
         delete.php
         update.php
         upimagerotate.php
         uprotateimageshow.php
         update2.php

次頁からは各種ファイルのプログラムコードを作成します。