やりたいこと：入力ページ(index_test.php)からアップロードしたファイルをサーバー側のphpファイル（exec.php）で計算して、その計算結果を別タブ(output_page.php)で表示させたい。

以下のような機能をもったアプリケーションを開発しようとしています。
１．htmlから入力ファイルをアップロードして、それに対する計算ボタンを押す。
２．サーバー側のphpファイルで入力ファイルに対する計算結果であるans.txtと計算結果をダイアグラムで図示したoutput.bmpをサーバー内に出力
３．出力されたファイルを別タブの計算結果に表示させる。

現状：　

index_test.php, exec.php, output_page.phpをXampp環境で動かして、以下の問題が起きる以外の場合は、結果が正しく表示することができる。

ディレクトリ情報

C:\xampp\htdocs\phpフォルダ直下にindex_test.php, exec.php, output_page.phpを設置
※exec.phpは、C:/xampp/htdocs/PycharmProjects/Web/cal.py"を実行している。

#困っていること：
１．入力が複雑な場合(?)、出力結果のphpファイルの表示が狂う。サーバー内に出力されたans.txtとoutput.bmpではなく、以前に表示した(?)ans.txtやoutput.bmpが表示されてしまうことがある。（優先度：高）
２．別ページへ遷移することしかできていない。できれば、別タブに新たに表示させたい。

#質問：
１．困っていること１に対する対応策をお教えいただけたら嬉しいです。
サーバー内で生成されたans.txtとoutput.bmpを正しく反映させたoutput_page.phpを表示させたいです。
現状でも、ほとんどの場合は表示できるのですが、おかしな表示をする場合があります。

２．別タブでoutput_page.phpを表示させる方法をお教えいただきたいです。ですが、とりあえずの急務としては、1の方が優先です。

以下にソースコードを添付します。

ソースコード

##index_test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<div hidden>
<FilesMatch ".html$">
  AddType application/x-httpd-php .html
</FilesMatch>
</div>

<html>
<head>
 <title>GUI</title>

 <style type="text/css">

  input.example1 { width: 45%; margin: 100 auto}
  input.example2 { width: 80%; margin: 0 auto}
  input.example3 { width: 250px; margin: 0 auto}
　input.example4 { width: 400px; margin: 0 auto}

  select { width: 250px; }
　
  textarea {
  width: 400px;
  height: 10em;
  }

 </style>

 <style>
        .display {
            display: none;
        }
 </style>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<meta http-equiv="CONTENT-TYPE" cont
ent="text/html; charset=utf-8" />
<title>Object Test</title>

</head>

<body>
<center>
<h1>計算器</h1>
</center>

<center>
<br>
<br>
<br>
<br>

<h1>ファイルをアップロード</h1>
<form name="load" action="upload.php" method="post" enctype="multipart/form-data" id="sendMessageForm" target="sendMessage">
<p><input type="file" name="file" id="selfile"></p>
 <textarea name="txt" rows="10" cols="80" readonly></textarea>
<p><input type="submit" value="選択したファイルをアップロード"></p> 

<iframe name="sendMessage" style="width:0px;height:0px;border:0px;"></iframe>

<script>
var obj1 = document.getElementById("selfile");

obj1.addEventListener("change",function(evt){

 var file = evt.target.files;

 var reader = new FileReader();

 reader.readAsText(file[0]);

 reader.onload = function(ev){

  document.load.txt.value = reader.result;
  }
},false);
</script>

</form>
</center>
<br>
<br>
<br>
<br>

<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
STEP2: ファイルに対する計算</h1>
<center>
<form method="POST" action="exec.php" >
  <p><input type="submit" value="実行" class="example3"></p>
</center>

<br>
<br>
<br>
<br>

</body>
</html>

##　exec.php

<?php
	$command="C:/Users/usr/AppData/Local/Programs/Python/Python37-32/python C:/xampp/htdocs/PycharmProjects/Web/cal.py";
	exec($command); 
	header('Location: http://localhost/php/output_page.php' ) ;
	exit;
?>

output_page.php

<!DOCTYPE html>
<html lang="ja">
<head>
<title>出力</title>
</head>


<body>

<h1>計算結果の表示</h1>

<center>  
<div class="centering_item">
    <OBJECT DATA="ans.txt"　TYPE="text/plain" WIDTH="100%" HEIGHT="100%"  alt="証明結果"></OBJECT>
</div>
</center>


<br>
<br>
<br>
<br>
<br>

<h1>計算結果のダイアグラムの表示</h1>
<center>
<p class="visualize">
<img src="output.bmp">
</p>
</center>

<style type="text/css">
.sample img {
    width: 70%;    /* 横幅を割合で指定 */
    height: auto;  /* 高さは自動指定 */
}
</style>

</body>
</html>

m.ts10806

2020/02/26 09:48

コードはマークダウンのcode機能を利用してご提示ください。

kyoya0819

2020/02/27 00:30

title要素が複数ありますし、brを連続で使うのはよろしくないです。

13K

2020/02/27 00:34

ありがとございます．連続brを外しておきます．

退会済みユーザー

2020/03/02 13:49

（そもそものhtmlコードや、phpの出力する）htmlのデバッグは、W3C Markup Validation Service https://validator.w3.org/ を駆使するといいよ。htmlコードに放置した.htaccessに書くネタとかかっこ悪いゾ。

退会済みユーザー

2020/03/02 13:49

jQuery使ってるなら、せっかくなのでセレクターやイベントを駆使したほうがシンプルに記述できるゾ。

行動規範の内容に同意します

回答1件

ベストアンサー

まだ回答を求めてますかね、ただのお節介で、なにもデバッグしていませんが、気になったところを少し。

ans.txtやoutput.bmpの扱いがとってもweb向きじゃないやり方をしてますよね。
10人アクセスしたら誰のアクションの結果なのかわからないのは、とても困ります。

PHP: session_create_id - Manual
PHP: session_start - Manual
を駆使してセッション固有IDを使ってみるとか、
あるいは
PHP: openssl_random_pseudo_bytes - Manual
でランダムなバイト文字列を取得して応用するとかすれば、
ひとまず出力ファイルのダブリは防げそうな気がします。
Pythonに固有IDを引き渡して、
出力ファイル名につけてもらう形ではどうでしょうか。

そして、その固有IDをoutput_page.php?id=～みたいな形にできれば、
他人の結果や前回の結果を読むことは防げそうな気がします。

html
1<form method="POST" action="exec.php" target="output">

などとしたら、常に固定のウィンドウ（結果的にタブ）に対してexec.phpを実行して、
そこからoutput_page.php?id=～にリダイレクトするような流れですかね。
（あれ？ formを閉じてないようですね。閉じてね。）

投稿2020/03/02 14:08

退会済みユーザー

総合スコア0

13K

2020/03/02 14:18

やるべきことの大筋をお教えいただき、ありがとうございます！この流れに沿って実装してみたいと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

phpでファイルを出力して、それらを別タブのhtmlで表示したい。

やりたいこと：入力ページ(index_test.php)からアップロードしたファイルをサーバー側のphpファイル（exec.php）で計算して、その計算結果を別タブ(output_page.php)で表示させたい。

現状：

ディレクトリ情報

ソースコード

output_page.php

関連した質問