JavaScriptの条件分岐で、PHPを使ってDBの値を更新したいです。

Question

質問内容

JavaScriptで条件分岐をして、PHPでDBの値を更新したいです。

仕様

押すたびに、登録、解除が順に変化するボタンがあります。
登録ボタンを押したら、DB内の値を1に更新する。
解除ボタンを押したら、DB内の値を0に更新する。

問題

JavaScriptにPHPを埋め込んでも、全部が実行されている？ようで、条件分岐の最後の条件のPHPが実行された状態になる。どうすれば条件に一致したときだけPHPが実行されるようにあるか教えていただきたいです。<?phpでは実行できないのでしょうか？

ソースコード

一部分を下に示します。

function test() {
　　var result = window.confirm('実行しますか？');
　　if (result) {
      if (value == false) {
          value = true;
          elm.textContent = "解除";
        　<?php 
　　　　　　　$db->query("UPDATE test SET flag = 0　WHERE id = 1); 
          ?>
      } else {
          value = false;
          elm.textContent = "登録";
          <?php
            $db->query("UPDATE test SET flag = 1 WHERE id = 1); 
          ?>
      }
    }
}

Answer 1

PHPはサーバで動き、JavaScriptはブラウザで動きます。PHPはサーバでHTMLを生成し、ブラウザが受け取り、その中にJavaScriptがあれば実行する、という順番になります。

JavaScriptを使わずにFormとボタンで処理を組んでみてからJavaScriptに挑戦するほうがよいです。

Comments

[K21]

JavaScriptとPHPは分担してやっているので、Formとボタンの処理について提案してみます！

Answer 2

ページ遷移を伴わない処理には、通常 ajax と呼ばれる JavaScript の処理を利用します。

Comments

[K21]

回答ありがとうございます！ajaxで調べてみます！

Answer 3

最初はPHPの具体的な使い方をうまくイメージするのが難しいですもんね。
いろいろ勘違いがあると思うので、ひとつずつ説明してみますね。
私もPHPの学習がおわったばかりで説明に不足があるかもしれないので、鵜呑みにせず、イメージだけ読み取ってください。笑

---

まず、一般的な、HTMLのためにPHPを使うときの流れを思い出してください。

1. ユーザーからリクエストが届く
2. サーバーでPHPファイルが実行され、出力されたHTML形式のデータをレスポンスとしてユーザーに返す。
3. ユーザーのブラウザでは、サーバーから返ってきたPHPファイルをHTMLと認識する。

＝プログラミング的な処理が無い、静的なHTMLとしてブラウザに表示する。

これを今回のパターンに当てはめてみると、

1. ユーザーからリクエストが届く
2. サーバーでPHPの処理が実行され、出力されたJSファイルをレスポンスとしてユーザーに返す。
3. ユーザーのブラウザは、サーバーから返ってきたPHP実行済みのJSファイルを読み込んで、処理を実行していく。

このように、ユーザーのブラウザがJSの処理を実行する前に、
すでにPHPの処理が全て実行されています。
ですので、通常JSファイルにPHPの処理は書かないでしょうし、
書くとしても内容はechoなどを使う、JSファイルの内容を出力するための処理であるべきでしょう。

---

では、ユーザー側のJSの処理に従ってPHPを実行したいときにはどうするのかというと、一般的には、

1. 実行したい機能ごとにPHPファイルを作成する。
2. JSのメソッドを使って、作成したPHPにアクセスする（＝リクエストを送る）。
3. サーバー側でPHPの処理が実行されたあと、出力される内容がレスポンスとしてJSに返ってくる。

このような流れになります。
レスポンスとして特にデータを必要としないなら、
何もechoしないで、実行したい処理だけ書けばいいという話です。

JSからサーバーにリクエストを送る（＝PHPにアクセスする）ために使う機能のことを、
Ajaxと呼びます。
Ajaxを行うための仕組みとして、最初にXMLHttpRequestというAPIが誕生し、
XMLHttpRequestを、もっと簡単に記述するためのFetchAPIというAPIや、
Axiosと呼ばれるライブラリが誕生しています。
奥が深い知識ですが、必要なので学んでみてください。

Comments

[K21]

すごく詳しく教えていただきありがとうございます！太字にしてくださっているキーワードを調べてみます！