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

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

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

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

Bootstrap

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

Q&A

解決済

3回答

7410閲覧

Bootstrapを使って、既存のphpファイルを装飾したいです。

takub

総合スコア15

PHP

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

Bootstrap

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

0グッド

0クリップ

投稿2018/08/28 01:03

前提・実現したいこと(概要)

Bootstrapを使って、既存のphpファイルを装飾したいです。

phpで簡易のECサイトを作成したのですが、装飾部分をかっこよくしたいと思っております。
Bootstrapのexampleを流用して、装飾をしたいのですが、上手くいかず、調べても不明なため
質問させていただきたく思います。

具体的な問題点
・ログインフォームの入力チェック画面に装飾ができない。

###状況
・PHPで簡易ECサイトを構築しました。
・ただ、CSSなどで全く装飾をしていないため、Bootstrapを用いて装飾をしたい。
・login.html→login-check.php→ec_top.php という画面遷移をしています。

お聞きしたいこと

・既存のPHPファイルを装飾のため、htmlファイルに変換し、Bootstrapなどを使って装飾し、元にあったphp部分を埋め込んで「装飾された状態で既存のプログラムを実行したい。」

現状の画面です。
イメージ説明

実現したいデザインです。
イメージ説明
https://getbootstrap.com/docs/4.1/examples/navbar-bottom/

試したこと

1.上記のファイルがphpファイルなのでhtmlファイルに変更
2.Bootstrap読み込みのため、コードを追加
3.現状のphp部分を読み込ませる。
※現状、phpファイルをhtmlファイルを変換したところでエラーが出てしまっているため、
Bootstrapでの装飾まで至っていません。

※この後、Bootstrapのエグザンプルのソースをコピペしようとしていました。
下記のサイトです。
https://getbootstrap.com/docs/4.1/examples/navbar-bottom/

ソースコード

(現状)

php

1<?php 2 3try 4{ 5 6//データベースの接続設定のため省略 7 8 9if($rec==false) 10{ 11 echo 'メールアドレスかパスワードが間違っています。<br />'; 12 echo '<a href="member_login.html"> 戻る</a>'; 13} 14else 15{ 16 session_start(); 17 $_SESSION['member_login']=1; 18 $_SESSION['member_code']=$rec['code']; 19 $_SESSION['member_name']=$rec['name']; 20 header('Location:shop_list.php'); 21 exit(); 22} 23 24} 25catch(Exception $e) 26{ 27 echo 'ただいま障害により大変ご迷惑をお掛けしております。'; 28 exit(); 29} 30 31?> 32 33

↓ ↓ ↓
(試したこと)

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Bootstrap Sample</title> 8 <!-- BootstrapのCSS読み込み --> 9 <link href="css/bootstrap.min.css" rel="stylesheet"> 10 <!-- jQuery読み込み --> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 12 <!-- BootstrapのJS読み込み --> 13 <script src="js/bootstrap.min.js"></script> 14 </head> 15 16 <body> 17 <?php 18 19 try 20 { 21 //データベース接続部分のため省略 22 23 if($rec==false) 24 { 25 echo '<p>メールアドレスかパスワードが間違っています。<br /></p>'; 26 echo '<p><a href="member_login.html"> 戻る</a></p>'; 27 } 28 else 29 { 30 session_start(); 31 $_SESSION['member_login']=1; 32 $_SESSION['member_code']=$rec['code']; 33 $_SESSION['member_name']=$rec['name']; 34 header('Location:shop_list.php'); 35 exit(); 36 } 37 38 } 39 catch(Exception $e) 40 { 41 echo 'ただいま障害により大変ご迷惑をお掛けしております。'; 42 exit(); 43 } 44 45 ?> 46 47 </body> 48</html> 49

お聞きしたいことのまとめ

・既存のphpファイルがまったく装飾されていないため、Bootstrapを使って装飾したい。
・ただ、phpファイルをhtmlファイルに変換し、元にあったphp部分を埋め込む方法が検討がつかない。
・上記どうすれば実現できるかアドバイスを賜りたく思います。

補足

・商品一覧画面もphpファイル(list.php)で作られているため、今回教えていただけましたら、
そこに応用したい。

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

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

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

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

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

yukihisa

2018/08/28 01:13 編集

まず、phpの基本を理解していないようです。phpはHTML構文の中に記述し、拡張子をphpにすることで実装します。「php 入門」等で検索し、確認してください。あと、細かいけど検討がつかない⇒見当がつかないですね。
takub

2018/08/28 01:47

お忙しい中、ご回答頂きましてありがとうございます。誤字すみません。検索し、確認させていただきます!
yukihisa

2018/08/28 01:56

まぁ、そもそも今回のレベルなら簡単なcssだけで実装できるのでここからわざわざbootstrapを使う必要性があまり感じられないです。
takub

2018/08/28 02:19

ありがとうございます。他のページで使う予定なので、その練習の意味も込めて質問させていただきました。
yukihisa

2018/08/28 02:23

なるほど。まずはhtmlで作成してみるとのことで、がんばってください!
takub

2018/08/28 02:33

ありがとうございます!!
guest

回答3

0

PHPはあくまで何かしらサーバー上で処理をして例えばechoなどで文字列を出力しているだけで、それがHTMLであってブラウザから参照するからHTMLとして解釈されます。
「PHPを装飾する」というのは次元が違う話です。
「PHPで出力したHTMLに対して装飾する」という考え方に切り替えてください。
.htmlでは特別な設定を行わない限りPHPは動きません。特別な設定を行わないのであれば**.phpを.htmlに変更する必要はありません。**

簡単に例示しますと、下記は画面で確認した結果は全く同じです。

php

1<style> 2p{ 3 color:red; 4} 5</style> 6<?php 7echo "<p>test</p>";

php

1<?php 2echo " 3<style> 4p{ 5 color:red; 6} 7</style> 8<p>test</p>";

投稿2018/08/28 01:12

m.ts10806

総合スコア80765

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

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

takub

2018/08/28 01:47

お忙しいところ、ご回答いただきまして誠にありがとうございます。 ----- 「PHPを装飾する」というのは次元が違う話です。 「PHPで出力したHTMLに対して装飾する」という考え方に切り替えてください。 .htmlでは特別な設定を行わない限りPHPは動きません。 ------ →とてもわかりやすいアドバイス誠にありがとうございます! また、基礎的なことがわかっていなかったようで申し訳ございません。 phpで出力したhtmlを就職するといった方向で考えてみます!
m.ts10806

2018/08/28 01:49 編集

細かいですが「装飾」です。 「修飾」にしてもちょっと意味が違ってくるような
takub

2018/08/28 02:18

誤字失礼いたしました。。 ご指摘ありがとうございます。
m.ts10806

2018/08/28 02:20

一番考慮してもらいたいのはPHPとHTMLの位置関係です。 私の回答の1行目がそれを表現しています。 装飾はあくまでブラウザから確認できるHTMLに対してするもので、 PHP側は装飾が可能となるようなHTMLの出力に注力すれば良いだけです。
takub

2018/08/28 02:32

装飾はHTMLに対してするもの/PHPはその出力に注力 →何度もありがとうございます!PHPのHTMLの違いをもっと勉強します! 下記の本とおりにECサイトもどきを作って、それをBootstrapを使って簡単に装飾しようとしていましたが、もっと勉強してからの方が良さそうだと気が付きました。 https://goo.gl/c95PJ8
m.ts10806

2018/08/28 04:03

短縮URLは何があるか分からないのでアクセスしようと思えません。 こういったQAサイトでは正式のURLを貼ってください。
m.ts10806

2018/08/28 05:04

既にアドバイスもらっているようですが、まずは静的htmlで組んで(「モック」と呼ばれるものです)そこから各種データをどのようにphpから取得して出力するか考えた方が良さそうですね。 デザイン先行でいくか、処理先行でいくかによって逆になりますが、デザイン先行であればモックが先です。 同時にしてしまうと不要な手間が増えて進捗が滞ってしまいますので、必ずどちらか決めて、やりきってから次にうつってください
guest

0

ベストアンサー

HTMLファイル上でPHP処理を行うことはできません。まずはPHP→HTMLにファイルを戻しましょう。

構文はあっているかと思いますが、CSSフォルダ内にBootStrapのファイルは配置されていますか?
もとの構文の中で、HTML記述箇所は

PHP

1echo <<< HTML_END; 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Bootstrap Sample</title> 9 <!-- BootstrapのCSS読み込み --> 10 <link href="css/bootstrap.min.css" rel="stylesheet"> 11 <!-- jQuery読み込み --> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 13 <!-- BootstrapのJS読み込み --> 14 <script src="js/bootstrap.min.js"></script> 15 </head> 16 17 <body> 18HTML_END;

といった感じで直接出力してあげましょう。サーバー側でHTMLを構築してあげるイメージでWEBを設計します。

投稿2018/08/28 01:09

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

takub

2018/08/28 01:43

お忙しいところ、ご回答いただきまして誠にありがとうございます。 基礎が分かっておらず、申し訳ございません。お手数をおかけいたします。 ・html上ではphpは(特別な処理がなければ)動かない →ご教授いただきましてありがとうございます!理解いたしました。 ・Bootstrapファイルは配置されていますか? →ご確認ありがとうございます。こちらは配置されております! ・解決の方針 htmlファイルに変換してしまったのはphpファイルに戻し、 現状の部分のphp部分で出力している部分を装飾する方向で考えてみます。 ・確認事項 度々、申し訳ございません。1点確認させていただきたく存じます。 ☆変更前 if($rec==false) { echo '<p>メールアドレスかパスワードが間違っています。<br /></p>'; } ↓ ↓ ☆変更後 if($rec==false) { echo <<< HTML_END; <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> </head> <body> HTML_END; } 上記のイメージでお間違いないでしょうか? お手数をおかけいたしますが、確認させていただきたく存じます。
退会済みユーザー

退会済みユーザー

2018/08/28 02:08 編集

私が書いたのは、一例でPHPファイルにHTML構文を記述していく方法ですね・・・ わかりにくくてごめんなさい。 レイアウトなどを考えるにあたって、まずは処理など関係なく全てが表示された状態で、HTMLファイルでホームページを書いてみてはいかがでしょうか。モックアップとよび、私もよくやる方法です。 普通にブラウザで表示して確認できるのと、PHP側の処理とごっちゃにならなくていいですよ! そこに表示する、しない判定するプロセスを考えて埋めていきましょう。 共通部分は常時表示で、切り替えるところは表示を変えるようなイメージとなります。 なんとなくの雑感ですが、HTMLでページを作ることの知識が不足していると思われます。
takub

2018/08/28 02:18

ご丁寧にありがとうございます! ご指摘頂いたとおり、html・cssの知識が不足した状態で質問してしまいました。。 申し訳ございません。 まず、htmlファイルでページを作ることから初めてみます! そこから処理を実行していくプロセスを考えていきます! ご丁寧にありがとうございました!
退会済みユーザー

退会済みユーザー

2018/08/28 02:22

知識不足はどなたにもあるのかと・・・私もまだまだなところありますし。 逆に不足しているから質問されてるのでは? 私もまだまだ修行中のような身でコメントしておりますが、素直に認められること、また、アドバイスを素直に受け止める姿勢は素晴らしいと思います。 完成まで、少し苦労されることもあるかと思いますが、基礎学習も含め頑張ってください。
takub

2018/08/28 02:33

暖かくお言葉本当にありがとうございます!! すごく励みになりました。。 基礎からちゃんと勉強していきたいと思います!
guest

0

そもそも EC サイトを公開できるレベルにないので、学習し直してください。お金/個人情報の取扱は訴訟リスクを抱えます

他の方もコメントしていますが、まず表示したい内容を html で正しく記述してください。
Bootstrap の問題がそちらでも発生するようであれば、切り出して質問してください。
で、その html 内の、表示内容で変数化したい箇所を、変数として置き換えます。
あとは、その変数をロジックとして組み込めばよいです。

以下、この提示されたスクリプトに関して

php として動作させる必要があるのは理解されたと思います。
php として動作させた場合、header の取扱に問題があります(header関数の出力前にほかを出力させることは推奨されていません)
ロジックとビューが分離できていないので、分離することで、自然と対応できると思います。

また、生パスワードを保存していませんか?if($rec==false)とあるので、多分 where でパスワード比較している気がします。
セキュリティ面も考慮すると、なんらかのフレームワークを使用することをオススメします。

投稿2018/08/28 05:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

takub

2018/08/28 05:25

ご意見・アドバイスありがとうございます。 下記の本で練習用に作った簡易サイトの見栄えをちょっと良くしたいという気持ちだけなので公開は考えておりません。 http://www.ric.co.jp/book/contents/book_926.html セキュリティ面でも問題があることなども承知しておりますが、アドバイスありがとうございます。
退会済みユーザー

退会済みユーザー

2018/08/28 05:31

またあの本か^^; 副読本読まない限り学習用途に向いていないので、必ず副読本を読むようにしてください。
takub

2018/08/28 05:33

承知いたしました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問