Warning: Undefined array key "is_rate_editable" in /home/xs576504/codeforfun.jp/public_html/wp-content/plugins/wpdiscuz/class.WpdiscuzCore.php on line 1303
画像関連

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

Sara

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

開発するアプリ

デモ動画

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

開発環境
MAMP / PHP version8.2.0(7.x でも動作確認済)
phpMyAdmin5.2.0(4.x でも動作確認済)

主な機能

主な機能は

  • 画像をデータベースに保存
  • 画像をデータベースから取得して表示
  • 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回「ファイルサイズのチェック」
補足「複数の画像を保存する」

Subscribe
Notify of
guest
11 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
たけし
たけし
3 years ago

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

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

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

たけし
たけし
3 years ago
Reply to  Sara

Saraさま

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

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


ひろき
ひろき
2 years ago

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

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

Last edited 2 years ago by ひろき
ひろき
ひろき
2 years ago
Reply to  Sara

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

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

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

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

ひろき
ひろき
2 years ago
Reply to  Sara

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

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

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

ひろき
ひろき
2 years ago
Reply to  Sara

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

ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

11
0
この記事にコメントするx
記事URLをコピーしました