画像関連

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

 


 

はじめに

今回は PHP と MySQL を使って画像ファイルを保存・表示する方法を紹介します。

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

 
 
 

主な機能は

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

です。
 

PHP と MySQL で画像を保存する方法は「フォルダに画像をアップロードする」か「データベースに画像を直接保存する」のが一般的です。

書籍ではフォルダにアップロードするサンプルが多いですが、今回はデータベースに直接画像を保存していきます。

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

データベースには

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

を保存していきます。
 
 

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

Bootstrapはフレームワークといい、自分で CSS を書かなくてもボタンやフォーム、スマホ用のレイアウトを簡単に作成することができます。今回は Bootstrap を使って、JavaScript や jQuery のコードを書かずに Lightbox を作る方法も紹介します。
 

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

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

開発環境

MAMP / PHP version7.2.10
テキストエディタCoda2
ブラウザGoogle Chrome

 
 

メニュー(全5回)

第1回「HTMLの作成」
第2回「データベースの用意」
第3回「画像を保存する」
第4回「画像を表示する」
第5回「画像を削除する」
 
 
 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest
2 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
たけし
たけし
11 days ago

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

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

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

2
0
この記事にコメントするx