画像関連

【PHP・MySQL】データベースに画像を保存・表示する方法

Sara

このシリーズでは PHP と MySQL を使って画像ファイルを保存・表示する方法を紹介します。

開発するアプリ

デモ動画

まずはデモ動画をご覧ください。

開発環境
MAMP / PHP version7.2.10, 7.4.21
テキストエディタCoda2
ブラウザChrome

主な機能

主な機能は

  • 画像をデータベースに保存
  • 画像をデータベースから取得して表示
  • Lightboxで画像を拡大表示
  • 画像の削除

です。

形式チェック・サイズチェック・画像を複数保存する方法を追加しました。(2022年8月)

画像の保存方法

PHP と MySQL で画像を保存する方法は

  1. フォルダに画像をアップロードする
  2. データベースに直接保存する

のどちらかが一般的です。

書籍など一般的に「①フォルダにアップロードする方法」を扱っていることが多いですが、今回は「②データベースに直接画像を保存する方法」を紹介します。

データベースに直接保存すると、画像の表示にひと手間かかるのが欠点ですが、名前の重複を考慮する必要がなく、削除も簡単になります。

データベースには

  • 画像
  • 画像の名前
  • 画像のタイプ(png, jpeg など)
  • 画像のサイズ
  • 画像の登録日

を保存していきます。

レイアウト

レイアウトには Bootstrap と Font Awesome を使用します。

Bootstrapはフレームワークといい、自分で CSS を書かなくてもボタンやフォーム、スマホ用のレイアウトを簡単に作成することができます。

今回は Bootstrap を使ってJavaScript や jQuery のコードを書かずに、画像を拡大表示するLightboxを作る方法も紹介します。 

画像の削除リンクには Font Awesome という無料のアイコンを使います。

1500個もの無料のアイコンを簡単に使うことができるので、ウェブアプリ開発には欠かせません。使ったことがない方はぜひ知っておくと便利だと思います。

全ての手順を紹介していますので、PHP初心者の方もぜひ挑戦してみてください! 

もくじ(全8回)

第1回「HTMLの作成」
第2回「データベースの用意」
第3回「画像を保存する」
第4回「画像を表示する」
第5回「画像を削除する」
第6回「形式チェック」
第7回「ファイルサイズのチェック」
補足「複数の画像を保存する」

PHP・MySQL
カレンダー開発講座

カレンダーを開発しながら

  • MySQLにデータを保存・編集・削除・検索する方法
  • タブレット・スマートフォンに対応させる方法
  • Datetimepicker の使い方
  • CSV ファイルを使った祝日の表示

など幅広く学ぶことができる講座です。

何か開発してみたい方、より実用的なコードを学びたい方にオススメです。

guest
11 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
たけし
たけし
1 year ago

お世話になります。
PHP・MySQLでつくるカレンダー開発講座を受講させていただいてます。とてもわかりやすく学習でき大変ありがたいです。

並行してPHP と MySQL を使って画像ファイルを保存・表示する方法の内容も
取り組みました。おかげで画像表示と削除が出来ました。

その中で1点質問なのですが もし画像のimage_nameを変更しようとした場合についてです。
My sqlのimage_nameの中で例えば「tigger.jpg」を「タイガー」に変更すれば
ブラウザにタイガーと名前が表示できます。
ただ tigger.jpgの後にある(1930,32KB)といったデータ表示をブラウザでは表示させたくない場合の処理がよくわかりませんでした。
お手数ですがご教授いただけるとありがたいです。よろしくお願いします。

たけし
たけし
1 year ago
Reply to  Sara

Saraさま

お世話になっております。
返信を失念していて遅くなり申し訳ございません。

ご丁寧な回答ありがとうございます。
解決できました!


ひろき
ひろき
1 year ago

コメント失礼致します。
情報工学の勉強を大学で習い始めた者です。

最初に一覧で画像が出てきた際のリスト状態で画像が縦に羅列されているかと思いますが、縦スクロールから横スクロールにして変更することは可能でしょうか。
主なイメージとしては、横長の掲示板みたいにすることです!
また可能であれば、どこを修正したら横並びになりますでしょうか。

Last edited 1 year ago by ひろき
ひろき
ひろき
1 year ago
Reply to  Sara

大変興味深い記事がたくさんあり、このサイトで勉強したいと考えております!購読も考えております!

横スクロール可能になりました!
ありがとうございます!

続けて質問なのですが、保存ボタンなどがある縦線で区切られた右側の領域を修正する箇所はどこになりますでしょうか。

自分なりに考えて、保存ボタンなどを別のphpファイルに作り、list.phpには横スクロールで画像のみにしてみたいと考えております!
これは可能でしょうか。

ひろき
ひろき
1 year ago
Reply to  Sara

お返事ありがとうございます。

保存などのボタンは消せたのですが、保存等などを仕切っていた縦線が消えないのですが、その場合はどのようにしたらよろしいでしょうか。

また別ファイルで保存ファイル作ること可能でした!ありがとうございます!

ひろき
ひろき
1 year ago
Reply to  Sara

先程の質問に加えて質問なのですが、
横スクロールが永遠に続くのですが、これを途中で改行して下段に同じように画像を表示するということは可能でしょうか。

ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
11
0
この記事にコメントするx
記事URLをコピーしました