はじめに

[改良恐竜登録ツール(PHP+MYSQL版)]
(https://qiita.com/knowledge87sun/items/aea1c603cab586b7bcf5)
でも恐竜登録ツールを作成した。
しかし、何かが足りない。
恐竜登録と言えば、画像！！！

前回の記事で、DBに保存した画像の表示方法をまとめた。

今回は今までの内容を結集した恐竜画像登録&画像表示プログラムを作成してみた。

1.プログラム概要

機能１．登録済み恐竜画像を表示

例）7のリンクをクリックすると、インドミナスレックスの画像を表示。

機能２．恐竜の画像登録

（1）カテゴリーを確定後、登録したい恐竜(ティラノサウルス)を選択。
登録恐竜一覧には、画像登録済みの恐竜が表示されている。

（2）ファイル選択ダイアログで、登録したい画像を選択して確定ボタンを押す。
(tirano_mini.jpg(選択した画像)が表示される。）

(3)登録が完了すると、登録済みの恐竜一覧にリンクが表示される。

(4)リンクをクリックすると登録された画像が表示される。

2.実際のコード

(1)画像格納用のテーブル(tbl_dinoimg)の作成
id:恐竜のID
ext:画像ファイルのmimeタイプ
img:画像ファイルをバイナリデータにしたもの


create table tbl_dinoimg (
 id integer,
 img mediumblob,
 ext varchar(10),
 primary key(id)
);

common_dino2_image.php

<?php 

  function NewPdo($dbname)
  {
    $dsn = 'mysql:dbname='.$dbname.';host=localhost:3308;charset=utf8mb4';
    $user = 'root';
    $password = 'root123';
    $dbh = new PDO($dsn, $user, $password);
    return $dbh;
  
  }

  function Checkdino($db0,$qry0,$val1,$type1)
  {
    $result3=$db0->prepare($qry0);
    //パラメータをセット
    $result3->bindparam(1,$val1);
    $result3->bindparam(2,$type1);
    $result3->execute();
    //検索結果を配列に格納する
    $select_data=$result3->fetch();
    return $select_data;
  }
  //クエリ実行して得られる全データ(パラメータ)
  function get_SelectTypeData($db0,$query0,$val1)
  {
    $result_a=$db0->prepare($query0);
    $result_a->bindparam(1,$val1);
    $result_a->execute();
    return $result_a;
  }
  //クエリ実行して得られる全データ
  function get_AllData($db0,$query0)
  {
    $result_a=$db0->prepare($query0);
    $result_a->execute();
    return $result_a;
  }
  //$str1:検索対象文字列,$str_mark:探したい文字: 戻り値、探したい文字より前にある文字列
  function get_BeforeMarkString($str1,$str_mark)
  {
    $idx0=strpos($str1, $str_mark);
    $retstr=substr($str1,0,$idx0);
    return $retstr;
  }

  //$str1:検索対象文字列,$str_mark:探したい文字、探したい文字より後にある文字列
  function get_AfterMarkString($str1,$str_mark)
  {
    $idx0=strpos($str1, $str_mark);
    $retstr=substr($str1,$idx0+1);
    return $retstr;
  }
 ?>

start_dino_image.php


<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>恐竜画像登録</title>
<body>
<h1>恐竜画像登録!!</h1>

<?php 

  require "common_dino2_image.php";
  //画像フォーム部分
  $dbname='db_dino';
  $dbh=NewPdo($dbname);
  
  $query_type0 = "SELECT DISTINCT type0 from tbl_dino";
 ?>

  <!-- tbl_dinoに登録されている恐竜カテゴリーと一覧を表示する部分 -->
  <form action="start_dino_image.php" method="post">
カテゴリー:
  <?php $result_a=get_AllData($dbh,$query_type0); 
  $cate0=isset($_POST['dtype01'])?htmlspecialchars($_POST['dtype01']):null;

   ?> 
  <select name="dtype01" style="width: 100px">
    <?php while($select_data=$result_a->fetch(PDO::FETCH_ASSOC)){
      //$cate0が$select_data['type0']と等しい場合
      if($cate0 == $select_data['type0']){ 
        echo "<option selected>".$select_data['type0']."</option>";
      //$cate0が$select_data['type0']と等しくない場合
      }else{
        echo "<option>".$select_data['type0']."</option>";
      }
    }  
    ?>
  </select>
  <input type="submit" name = "btn2" value="確定">
  </form>

<?php 

  $dbname='db_dino';
  $dbh=NewPdo($dbname);
  $query_select_type0 = "SELECT dname0 from tbl_dino where type0 = ?";
  $result3=get_SelectTypeData($dbh,$query_select_type0,$cate0);

 ?>
  <form action="start_dino_image.php" enctype="multipart/form-data" method="post">
対象恐竜：
  <select name="dname" style="width: 280px">
    <?php $dino0=isset($_POST['dname'])?htmlspecialchars($_POST['dname']):null; ?>
    <?php while($select_data=$result3->fetch(PDO::FETCH_ASSOC)){
      echo "<option>".$select_data['dname0']."</option>";
    }
    ?>
  </select><br>
  <label>画像/動画アップロード</label>
  <input type="file" name="upfile">
  <input type="hidden" name="btn3" value="<?=$cate0?>">
  <input type="submit" value="確定">
  </form>


<?php 

  //ファイルアップロードがあったとき
  try{
    $dbname='db_dino';
    $dbh=NewPdo($dbname);
    //$pdo = new PDO("mysql:host=127.0.0.1;dbname=mediatest;charset=utf8", $user, $pass);
    if (isset($_FILES['upfile']['error']) && is_int($_FILES['upfile']['error']) && $_FILES['upfile']['name'] !== ""){
    //エラーチェック
      switch ($_FILES['upfile']['error']) {
        case UPLOAD_ERR_OK: // OK
          break;
        case UPLOAD_ERR_NO_FILE:   // 未選択
          throw new RuntimeException('ファイルが選択されていません', 400);
        case UPLOAD_ERR_INI_SIZE:  // php.ini定義の最大サイズ超過
          throw new RuntimeException('ファイルサイズが大きすぎます', 400);
        default:
          throw new RuntimeException('その他のエラーが発生しました', 500);
      }
      
  
      //拡張子を見る
      $tmp = pathinfo($_FILES['upfile']['name']);
      $extension = $tmp["extension"];
      if($extension === "jpg" || $extension === "jpeg" || $extension === "JPG" || $extension === "JPEG"){
        $ext1 = "image/jpeg";
      }
      elseif($extension === "png" || $extension === "PNG"){
        $ext1 = "image/png";
      }
      else{
        echo "非対応ファイルです．<br/>";
        echo ("<a href=\"start_dino_image.php\">戻る</a><br/>");
        exit(1);
      }
      //カテゴリーと恐竜名からidを探す
      $sql_select="SELECT * FROM tbl_dino WHERE dname0=? and type0=?";
      $dname1=isset($_POST['dname'])?htmlspecialchars($_POST['dname']):null;
      $type1=isset($_POST['btn3'])?htmlspecialchars($_POST['btn3']):null;
      $select_data1=Checkdino($dbh,$sql_select,$dname1,$type1);
      $dino_id=$select_data1['id'];

      //画像・動画をバイナリデータにする．
      $raw_data = file_get_contents($_FILES['upfile']['tmp_name']);
    
    }
    $dbname='db_dino';
    $dbh=NewPdo($dbname);
    
    $sql_del = "DELETE FROM tbl_dinoimg WHERE id=?";
    //画像・動画をDBから削除
    $result1=$dbh->prepare($sql_del);
    //パラメータをセット
    $result1->bindparam(1,$dino_id);
    $result1->execute();

    //画像・動画をDBに格納．
    $sql_ist = "INSERT INTO tbl_dinoimg(id, img, ext) VALUES (?,?,?)";
    $result1=$dbh->prepare($sql_ist);
    //パラメータをセット
    $result1->bindparam(1,$dino_id,PDO::PARAM_INT);
    $result1->bindparam(2,$raw_data,PDO::PARAM_LOB);
    $result1->bindparam(3,$ext1,PDO::PARAM_STR);
    $result1->execute();
    echo $dino_id."<br>";
  }

  catch(PDOException $e){
    echo("<p>500 Inertnal Server Error</p>");
    exit($e->getMessage());
  }

 ?>


<?php  
  //tbl_dinoimgに登録されている恐竜idと名前を表示する。
  $sql_idall="SELECT T1.id,T1.dname0,T1.type0 FROM tbl_dino T1";
  $sql_idall = $sql_idall." INNER JOIN tbl_dinoimg T2 ON T1.id=T2.id ORDER BY T2.id";

  $dbname='db_dino';
  $dbh=NewPdo($dbname);

  $result1=get_AllData($dbh,$sql_idall);
  echo "<br><h4>登録恐竜一覧</h4><br>";
  while ($row = $result1 -> fetch(PDO::FETCH_ASSOC)){
    $id=$row['id'];
 ?> 
  <!-- idと恐竜名とカテゴリー名 -->
    <a href="dino_display_image.php?id=<?=$id?>"><?=$id?></a>:<?= $row['dname0'] ?>(<?= $row['type0'] ?>)
<?php 
    echo ("\n"."<br/>");
  }
  $dbh=null;
  
 ?>

</body>
</html>

実はこの格納した画像を表示する事が超大変だった。
(前回の記事の部分)
よくある下記のコードでは、画面に表示されるのはどこまでも深い
黒一色の画面だったのだ。


header("Content-Type: image/jpeg");
echo ($row['img']);

そのうちにbase64というキーワードを見つけることになる。
１．DBから画像バイナリデータを取得
２．base64でエンコード
３.２を画像のmimeタイプで表示
という手順があることが分かった

dino_display_image.php

<?php 
  if(isset($_GET['id']) && $_GET['id'] !== ""){
    $id = $_GET['id'];
  }
  else{
    header("Location: start_dino_image.php");
  }
  try {
    require "common_dino2_image.php";
    $dbname='db_dino';
    $dbh = NewPdo($dbname);
    $sql_select = "SELECT ext,img FROM tbl_dinoimg WHERE id = ?";
    $result1=$dbh->prepare($sql_select);
    //パラメータをセット
    $result1->bindparam(1,$id,PDO::PARAM_INT);
    $result1->execute();
    $row = $result1 -> fetch(PDO::FETCH_ASSOC);
    //取得した画像バイナリデータをbase64で変換。
    $img = base64_encode($row['img']); 
 ?>
	<!-- エンコードした情報をimgタグに表示 -->
    <img src="data:<?php echo $row['ext'] ?>;base64,<?php echo $img; ?>"><br>
    <a href="start_dino_image.php">戻る</a>

<?php 


  }
  catch (PDOException $e) {
    echo("<p>500 Inertnal Server Error</p>");
    exit($e->getMessage());
  }
 ?>

参考URL

PHPでbase64の使い方を知ろう！サンプルコードで速攻理解

今後に向けて

PHPでは一応恐竜シリーズの区切りがついた。
他のプログラミング言語でも、このシリーズにトライしたいと考えている。