質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1762閲覧

MySQLに保存した画像タグをモーダルウィンドウに出力したい

noe

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/02/05 05:38

現在、PHPを用いて顧客管理システムを開発しています。
csvアップロードからデータベースへ保存した顧客データ(名前,住所,性別...etc)を以下の様に繰り返しでhtmlを生成し、出力しています。

$list_queryにはSELECT * FROM usersによって呼び出された顧客情報が入っています。

foreach ($list_query as $user) { $html .= '<tr>'; $html .= '<td>'; $html .= '<label class="switch">'; $html .= '<input type="checkbox" name="user[]" value="' . $user['user_name'] . '" class="switch__input">'; $html .= '<div class="switch__toggle">'; $html .= '<div class="switch__handle"></div>'; $html .= '</div>'; $html .= '</label>'; $html .= '</td>';

この後に、Bootstrapによるモーダルウィンドウを実装しようとしており

$html .= ' <div class="modal fade" id="' . $user['user_name'] . '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">' . $user['user_name'] . '</h4> </div> <div class="modal-body"> <div class="container-fluid bd-example-row"> <div class="row"> <div class="col-md-6">'. $user['profile_picture'].'</div> <div class="col-md-6">profile</div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">戻る</button> </div> </div> </div> </div> ';

コードの中の<div class="col-md-6">'. $user['profile_picture'].'</div>という部分で、テーブルに保存している画像タグ<img class="image" src="hoge.jpg" alt="" />を出力したいのですが、モーダルウィンドウを開くと$user['profile_picture']の部分のみhtmlが出力されていない(何もない)という問題が起きています。

モーダル以外の場所でテーブル情報をvar_dump()すると画像自体は正しく入っていることが分かるのですが、モーダル内での出力がどうしてもできません。

画像を保存する方法やhtml出力のやり方がそもそもおかしいなどありましたら同時にお願いいたします。

技術仕様

  • Vagrant 1.8.6
  • CentOS 6.8
  • PHP 5.6.28
  • Bootstrap4
  • MySQL 14.14

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

$html .= 'の手前で、var_dump($user['profile_picture'])とでもして、まず中身が入っているか確認して下さい。

投稿2017/02/05 05:43

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

noe

2017/02/05 10:03

ご回答ありがとうございます。 var_dumpによって中身を確認したところ、画像の出力を確認できました。 モーダルウィンドウ内に限って出力されない状態となっております。
退会済みユーザー

退会済みユーザー

2017/02/05 10:22

では、エラーを出力する設定に変更して下さい。 $html.=' の前で $user['profile_picture'] に値があれば、普通は $html で採用されると思いますが、採用されていないということであれば、エラーが出ているのではないかと思います。
noe

2017/02/05 10:41

検証の結果、モーダルウィンドウを呼び出すidの部分に問題があることが発覚したため、解決致しました。 貴重なお時間をいただきありがとうございました。
退会済みユーザー

退会済みユーザー

2017/02/05 10:47

ん?「出力として、$html 内に $user['profile_picture'] が含まれない」と読んでいたのですが、そうではなく、「$html に出力はあったが、モーダル内で画像が表示されなかった」ということでしょうか?
noe

2017/02/05 10:55

$html は出力できていましたが、 $user['profile_picture'] の中身が空であるダミーデータのモーダルウィンドウを表示してしまっていたということになります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問