phpで外部ファイルに書き込み・読み込み

Question

ゲームのランキングをサーバー上に保存する方法についてです。

現在、ゲームを開発していて、ゲームのランキングをjavascriptで作成しています。
以前、質問した際にゲームのランキングを維持するにはサーバーに保存する必要があり、
サーバーに保存する方法にはPHPを活用する方法があると学びました。
そこからPHPについて学び、
次のPHPで外部ファイルの書き込みを行えることがわかりました。

<?php
  if (isset($_POST['message']) && $_POST['message'] != "") {
    $f = fopen("message.txt", "a");
    fwrite($f, htmlspecialchars($_POST['message']) . "\n");
    fclose($f);
  }
?>

<form action="append.php" method="post">
<p>メッセージ: <input name="message" size="60"></p>
</form>

<pre>
<?php readfile("message.txt"); ?>
</pre>

上記は、フォーム入力した内容がmessage.txtに書き込まれ、それをフォームの下部に表示するというものですが、これを活用して、私のHTMLに組み込んでみました。

<script>
  var r=[
    [
      document.write("<?php");
      document.write("if (isset($_POST['message']) && $_POST['message'] != '') {");
      document.write('$f = fopen("message.txt", "a");');
      document.write('fwrite($f, htmlspecialchars($_POST["message"]) . "\n");');
      document.write("fclose($f);");
      document.write('}');
      document.write("?>");
      document.write('<form action="append.php" method="post">');
      document.write('<p>メッセージ: <input name="message" size="60"></p>');
      document.write('</form>');
      document.write('<pre>');
      document.write('<?php readfile("message.txt"); ?>');
      document.write('</pre>*/');
      ,
      document.write("<?php");
      document.write("if (isset($_POST['message']) && $_POST['message'] != '') {");
      document.write('$f = fopen("message.txt", "a");');
      document.write('fwrite($f, htmlspecialchars($_POST["message"]) . "\n");');
      document.write("fclose($f);");
      document.write('}');
      document.write("?>");
      document.write('<form action="append.php" method="post">');
      document.write('<p>メッセージ: <input name="message" size="60"></p>');
      document.write('</form>');
      document.write('<pre>');
      document.write('<?php readfile("message.txt"); ?>');
      document.write('</pre>*/');
    ],
    ['59:59.96','xyz'],
    ['59:59.97','ijk'],
    ['59:59.98','aaa'],
    ['59:59.99','zzz'],
  ];
  var qs=[
    'q1',
  ];
  const viewRank=()=>{
    document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
  };
  window.addEventListener('DOMContentLoaded',()=>{
    viewRank();
    document.querySelector('#start').addEventListener('click',e=>{
      const t1=e.target;
      const t2=document.querySelector('#a');
      t1.disabled=true;
      t2.disabled=false;
      const name=prompt("お名前を入力してください。");
      if(name=="") name="UnKnown";
      (async()=>{
        const s=new Date().getTime();
        for(var i=0;i<qs.length;i++){
          const qStr=qs[i];
          document.querySelector('#q span').textContent=qStr;
          t2.value="";
          t2.focus();
          await new Promise(resolve=>{
            const timerId=setInterval(()=>{
              if(t2.value==qStr){
                clearInterval(timerId);
                resolve();
              }
            },10);
          });
        }
        const e=new Date().getTime();
        const diff=e-s;
        const str=(10000+diff/1000).toString();
        const time=str.substr(1,2)+":"+
              str.substr(3,5);
        r.push([time,name]);
        r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
        viewRank();
        t1.disabled=false;
        t2.disabled=true;
      })();
    });
  });
</script>
<input type="button" value="ゲーム開始！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<br>
<br>
<br>
<table border="1">
  <tr>
    <td>
      <div id="rank">現在のランキングトップ５<br>
        <center><span></span></center>
      </div>
    </td>
  </tr>
</table>

想定する挙動

不明な点：自動的に出力されたものを代入する方法

ここまで作ったのですが、さらに不明点が発生しました。
私の場合、代入する値はフォームによるものではなく、時間計測によって自動的に出力されるものと名前です。これをどのようにして代入させるかがわかりませんでした。

ここまで来たので、少々複雑なものになってしまっても構わないと思います。
ご協力お願いします。

Comments

[退会済みユーザー]

先の質問をまず解決する努力をしましょう： https://teratail.com/questions/218705

Answer 1

素晴らしいコードですね（ある意味）
そもそも、PHPの知識がないのに書かないでください。
HTML,CSS,JavaScript（一部除く）ならまだしもPHPは他のファイルにも致命的な損害を与える可能性があるので最初からどこかで学んでから御利用ください。

Answer 2

htmlを表示するwebブラウザ上でphpのコードを出力しても実行できません。

phpのコードはwebサーバー上でのみ動作し、
処理結果として出力するhtmlをwebブラウザが受け取って表示します。

受け取ったhtmlの中に、javascriptのコードが含まれていれば、
きっかけをもらってjavascriptのコードが動作しますが、
その動作はwebブラウザ内での動作であって、
webサーバーにデータ送信しないといけなくて、
GET/POSTによるフォーム送信を行って表示中のページを再生成するか、
Ajaxという方法を用いてページを残したままデータ送信だけ行うこともできます。

っていうような話を先の質問の回答で何人かからもらっているのに、
そこでわからないことを放置したまま
同じような質問を重ねて投稿しているということは、
回答するのも馬鹿らしくなりますよね。
回答する側の手間暇、時間、意味なかったんですね。

質問者さんに足りない情報をここですべて伝えるのは骨が折れるので、
わかっていること、わかっていないことの整理から始めてください。
コードを書くのはもっとあとでもいいです。
このさきどういう方針でどう組み立てていくのか、
設計のところからアドバイスをもらわないといけません。

Answer 3

document.write("<?php");

なにか大きな勘違いをしているのでは？
PHPはご利用のhttpサービスのサーバー側の設定が必要です

Comments

[yoorwm]

いや、すごいソースを見た、という感想ですが・・・
「想定する挙動」のような図を書けるのですから、とりあえず、サーバーサイドでの処理と、クライアントサイドでの処理を分けて書いてみると考えがまとまるのではないでしょうか？

[m.ts10806]

https://teratail.com/questions/218807
↑ここで解決済みにしてるのにまさかそのままやりきろうとするとは思わなかった。

[m.ts10806]

あとたぶんAjax使ってとか色んなヒントを各所で出してたりしたはずなんですが、これは困った。