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

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

ただいまの
回答率

89.54%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,976

takub

score 9

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

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

try
{

//データベースの接続設定のため省略


if($rec==false)
{
    echo 'メールアドレスかパスワードが間違っています。<br />';
    echo '<a href="member_login.html"> 戻る</a>';
}
else
{
    session_start();
    $_SESSION['member_login']=1;
    $_SESSION['member_code']=$rec['code'];
    $_SESSION['member_name']=$rec['name'];
    header('Location:shop_list.php');
    exit();
}

}
catch(Exception $e)
{
    echo 'ただいま障害により大変ご迷惑をお掛けしております。';
    exit();
}

?>

↓ ↓ ↓
(試したこと)

<!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>
        <?php

        try
        {
        //データベース接続部分のため省略

        if($rec==false)
        {
            echo '<p>メールアドレスかパスワードが間違っています。<br /></p>';
            echo '<p><a href="member_login.html"> 戻る</a></p>';
        }
        else
        {
            session_start();
            $_SESSION['member_login']=1;
            $_SESSION['member_code']=$rec['code'];
            $_SESSION['member_name']=$rec['name'];
            header('Location:shop_list.php');
            exit();
        }

        }
        catch(Exception $e)
        {
            echo 'ただいま障害により大変ご迷惑をお掛けしております。';
            exit();
        }

        ?>

            </body>
</html>

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

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

 補足

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • takub

    2018/08/28 11:19

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

    キャンセル

  • yukihisa

    2018/08/28 11:23

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

    キャンセル

  • takub

    2018/08/28 11:33

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

    キャンセル

回答 3

checkベストアンサー

+2

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

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

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;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/28 11:18

    ご丁寧にありがとうございます!
    ご指摘頂いたとおり、html・cssの知識が不足した状態で質問してしまいました。。
    申し訳ございません。

    まず、htmlファイルでページを作ることから初めてみます!
    そこから処理を実行していくプロセスを考えていきます!

    ご丁寧にありがとうございました!

    キャンセル

  • 2018/08/28 11:22

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

    完成まで、少し苦労されることもあるかと思いますが、基礎学習も含め頑張ってください。

    キャンセル

  • 2018/08/28 11:33

    暖かくお言葉本当にありがとうございます!!
    すごく励みになりました。。

    基礎からちゃんと勉強していきたいと思います!

    キャンセル

+2

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

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

<style>
p{
 color:red;
}
</style>
<?php
echo "<p>test</p>";
<?php
echo "
<style>
p{
 color:red;
}
</style>
<p>test</p>";

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/28 13:03

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

    キャンセル

  • 2018/08/28 13:57

    http://www.ric.co.jp/book/contents/book_926.html
    上記のサイトです。失礼しました。

    キャンセル

  • 2018/08/28 14:04

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

    キャンセル

0

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/28 14:25

    ご意見・アドバイスありがとうございます。
    下記の本で練習用に作った簡易サイトの見栄えをちょっと良くしたいという気持ちだけなので公開は考えておりません。
    http://www.ric.co.jp/book/contents/book_926.html

    セキュリティ面でも問題があることなども承知しておりますが、アドバイスありがとうございます。

    キャンセル

  • 2018/08/28 14:31

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

    キャンセル

  • 2018/08/28 14:33

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

    キャンセル

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

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる