【PHP・MySQL】データベースに画像を保存・表示する方法
Sara
このシリーズでは PHP と MySQL を使って画像ファイルを保存・表示する方法を紹介します。
開発するアプリ
デモ動画
まずはデモ動画をご覧ください。
| MAMP / PHP version | 7.2.10, 7.4.21 |
| テキストエディタ | Coda2 |
| ブラウザ | Chrome |
主な機能
主な機能は
- 画像をデータベースに保存
- 画像をデータベースから取得して表示
- Lightboxで画像を拡大表示
- 画像の削除
です。
画像の保存方法
PHP と MySQL で画像を保存する方法は
- フォルダに画像をアップロードする
- データベースに直接保存する
のどちらかが一般的です。
書籍など一般的に「①フォルダにアップロードする方法」を扱っていることが多いですが、今回は「②データベースに直接画像を保存する方法」を紹介します。
データベースに直接保存すると、画像の表示にひと手間かかるのが欠点ですが、名前の重複を考慮する必要がなく、削除も簡単になります。
データベースには
- 画像
- 画像の名前
- 画像のタイプ（png, jpeg など）
- 画像のサイズ
- 画像の登録日
を保存していきます。
レイアウト
レイアウトには Bootstrap と Font Awesome を使用します。
Bootstrapはフレームワークといい、自分で CSS を書かなくてもボタンやフォーム、スマホ用のレイアウトを簡単に作成することができます。
今回は Bootstrap を使ってJavaScript や jQuery のコードを書かずに、画像を拡大表示するLightboxを作る方法も紹介します。
画像の削除リンクには Font Awesome という無料のアイコンを使います。
1500個もの無料のアイコンを簡単に使うことができるので、ウェブアプリ開発には欠かせません。使ったことがない方はぜひ知っておくと便利だと思います。
全ての手順を紹介していますので、PHP初心者の方もぜひ挑戦してみてください！
もくじ（全８回）
第１回「HTMLの作成」
第２回「データベースの用意」
第３回「画像を保存する」
第４回「画像を表示する」
第５回「画像を削除する」
第６回「形式チェック」
第７回「ファイルサイズのチェック」
補足「複数の画像を保存する」
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
お世話になります。
PHP・MySQLでつくるカレンダー開発講座を受講させていただいてます。とてもわかりやすく学習でき大変ありがたいです。
並行してPHP と MySQL を使って画像ファイルを保存・表示する方法の内容も
取り組みました。おかげで画像表示と削除が出来ました。
その中で1点質問なのですが もし画像のimage_nameを変更しようとした場合についてです。
My sqlのimage_nameの中で例えば「tigger.jpg」を「タイガー」に変更すれば
ブラウザにタイガーと名前が表示できます。
ただ tigger.jpgの後にある(1930,32KB)といったデータ表示をブラウザでは表示させたくない場合の処理がよくわかりませんでした。
お手数ですがご教授いただけるとありがたいです。よろしくお願いします。
講座へのご参加ありがとうございます
わかりやすいとお聞きしてとても嬉しいです！
画像名の変更はデータベースを直接変更することもできますが、データベースを直接編集するというのは危険なのであまりお勧めできません。
できればカレンダー講座の予定のように編集機能を付けるのが良いと思います。
画像サイズを表示したくない場合は
<h5><?= $images[$i]['image_name']; ?> (<?= number_format($images[$i]['image_size']/1000, 2); ?> KB)</h5>
を
<h5><?= $images[$i]['image_name']; ?></h5>
とすれば出力されなくなりますのでお試しください。
Saraさま
お世話になっております。
返信を失念していて遅くなり申し訳ございません。
ご丁寧な回答ありがとうございます。
解決できました！
ご報告ありがとうございます。
解決できたようで良かったです！
コメント失礼致します。
情報工学の勉強を大学で習い始めた者です。
最初に一覧で画像が出てきた際のリスト状態で画像が縦に羅列されているかと思いますが、縦スクロールから横スクロールにして変更することは可能でしょうか。
主なイメージとしては、横長の掲示板みたいにすることです！
また可能であれば、どこを修正したら横並びになりますでしょうか。
当サイトを見つけて頂きありがとうございます！
45行目あたりの
<ul class="list-unstyled">
を
<ul class="list-unstyled list-group list-group-horizontal">
にしてみてください。
保存ボタンの位置など修正は必要になりますが、横スクロールになると思います。
大変興味深い記事がたくさんあり、このサイトで勉強したいと考えております！購読も考えております！
横スクロール可能になりました！
ありがとうございます！
続けて質問なのですが、保存ボタンなどがある縦線で区切られた右側の領域を修正する箇所はどこになりますでしょうか。
自分なりに考えて、保存ボタンなどを別のphpファイルに作り、list.phpには横スクロールで画像のみにしてみたいと考えております！
これは可能でしょうか。
返信にお時間が掛かってしまい申し訳ありません。
右側の領域は<form>~</form>で囲んでいる部分です。
保存ページを別にすることは可能です。
例えばadd.phpというファイルを作成して、HTML部分に保存ボタンなどのフォームを用意、PHP部分に画像の保存処理を書きます。
レイアウトの修正は必要ですが、list.phpのコードをまるごとadd.phpにコピペして
を削除してしまえばOKです！
お返事ありがとうございます。
保存などのボタンは消せたのですが、保存等などを仕切っていた縦線が消えないのですが、その場合はどのようにしたらよろしいでしょうか。
また別ファイルで保存ファイル作ること可能でした！ありがとうございます！
先程の質問に加えて質問なのですが、
横スクロールが永遠に続くのですが、これを途中で改行して下段に同じように画像を表示するということは可能でしょうか。
・縦線について
縦線を消すには45行目あたりの
<div class="col-md-8 border-right">
のborder-rightを外してください。
・改行について
現在のコードでは以下のようにHTMLを作成しています。
<ul class="list-unstyled list-group list-group-horizontal">
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
</ul>
これを例えば１列に３つの画像を表示する場合は、PHPのforループを使って
<ul class="list-unstyled list-group list-group-horizontal">
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
</ul>
<ul class="list-unstyled list-group list-group-horizontal">
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
<li class="media"><!– ここに画像・画像名・削除リンクのHTMLが入ります。 –></li>
</ul>
のように出力されるように書き換えてみてください！