javascript,php,MySQL間の変数のやり取りがうまく行きません...

解決済

回答 2

投稿 編集

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

Rino-T

score 64

修正

パスワード等個人情報が含まれる接続部分以外は全部のせました。
また、回答してくださった方修正箇所を書き直しました。
最初初心者マークをつけることを忘れていましたがjavascript,php,MySQL初心者です。

今現在のソースに書き換えました。

varchar(2499)は
50*50のマス目データを文字列"000001111010..."のように受け取るのでそのような形にしてあります。

kei344さんの助言を参考に書かせていただきますと、

formタグのところの、データベース保存のところを押すと、MySQLのデータベースにデータ名とデータを送信ししようとしたのですが、うまく送信できていないのか、データベースの方を確認しても、空のまま。

また、実は

if(!empty($_POST["name"]) && !empty($_POST["data"])){
      $stmt = $dbh->prepare("insert into pictures (name,data) values(:name, :data)");
      $stmt->execute(
          array(
              ":name"=>$_POST["name"],
              ":data"=>$_POST["data"],
          )
      );
  }


この部分をif文で囲っていない時は更新のたびにデータベースに保存されるという問題があったものの、保存はできていました。その時、データ名を指定してデータを取得しようとしたものの描画に反映されませんでした。

取得ボタンを押した後、変数の値を見てみると
document.getElementById("get").addEventListener("click",function(){...
のところ(一番下のあたり)の変数strの値が""と空の文字列でした。

現在のエラー

Notice: Undefined variable: filename in /var/www/html/x6314061/canvas.php on line 55 3 records found

canvas.php:155 Uncaught SyntaxError: Invalid or unexpected token

 追加

修正していくと時々
(google chrome のデベロッパーツールのソースコードパネルにて)

document.getElementById("get").addEventListener("click",function(){

    var form2 = document.getElementById("form2");
    var str = null;
    str = "


の、最後のようになってエラーを吐くことがあります(今吐いてます)。

最初に書いた質問

文字列を
javascript -> php -> MySQL
の流れでデータベースに保存し、その逆
MySQL -> php -> javascript
でデータを取り出したいのですがうまくいきません。

データベースは
name varchar(255)
data varchar(2499)
の2種で構成されており、nameを参照してdataを取り出したいです。

現状データベースへの送信も受信もうまくいってません。

↓が現在のコードです。関係ないと思われるところも入っていますが一応書いておきました。

よろしくおねがいします。

 ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<form id="form" action="canvas.php" method="post">
  保存するデータ名を入力<br>
  <input type="text" name="filename" value="">
  <br>
  <input type="submit" id="submit" value="データベースに保存">
</form>
<br>
<form id="form2" action="canvas.php" method="post">
  取得するデータ名を選択<br>
    <input type="text" name="number" value ="">
  <br>
  <input type="submit" id="get" value="データベースから取得">
</form>

<?php
//接続部分はPASSWORD等を含むため省略

//$data = "";
//$filename = "";

if (isset($_POST["data"]) && isset($_POST["name"])) {
  $data = $_POST["data"];
  $filename = $_POST["name"];
}
  //処理

  //レコードの挿入
  if(!empty($_POST["name"]) && !empty($_POST["data"])){
      $stmt = $dbh->prepare("insert into pictures (name,data) values(:name, :data)");
      $stmt->execute(
          array(
              ":name"=>$_POST["name"],
              ":data"=>$_POST["data"],
          )
      );
  }
  //echo "done";

//レコードの取得
$sql = "select * from pictures where name = ?";     // sql文
if(!empty($sql)){
  $stm = $dbh->prepare($sql);        // ステートメント
  $params = array($filename);
  $stm->execute($params);
  foreach ($stm->fetchAll(PDO::FETCH_ASSOC) as $picture) {
    $data = $picture['data'];
    echo $data;
  }
}
// 件数を表示
echo $dbh->query("select count(*) from users")->fetchColumn() . " records found";
//切断
$dbh = null;
?>

<script>
   window.onload = function(){
   draw();
 }

var  cell = new Array();
for(var i = 0;i < 50; i++){
  cell[i] = new Array();
  for(var j = 0; j < 50; j++){
    cell[i][j] = false;
  }
}

function draw(){
  var cvs = document.getElementById("myCanvas");
  if(!cvs || !cvs.getContext) return false;
  var ctx = cvs.getContext("2d");

  ctx.strokeStyle = 'rgb(192,192,192)';
  ctx.lineWidth = 0.5;
  for(var i = 0; i < 50; i++){
    for(var j = 0; j < 50; j++){

      ctx.beginPath();
      ctx.moveTo(10+10*i,10);
      ctx.lineTo(10+10*i,500);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(10,10+10*j);
      ctx.lineTo(500,10+10*j);
      ctx.stroke();
    }
  }
  for(var i = 0; i < 49; i++){
    for(var j = 0; j < 49; j++){
      if(cell[i][j]){
    ctx.fillStyle="rgb(0,0,0)";
    ctx.beginPath();
    ctx.moveTo(10+10*i,10+10*j);
    ctx.lineTo(10+10*(i+1),10+10*j);
    ctx.lineTo(10+10*(i+1),10+10*(j+1));
    ctx.lineTo(10+10*i,10+10*(j+1));
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
      }else{
    ctx.fillStyle="rgb(255,255,255)";
    ctx.beginPath();
    ctx.moveTo(10+10*i,10+10*j);
    ctx.lineTo(10+10*(i+1),10+10*j);
    ctx.lineTo(10+10*(i+1),10+10*(j+1));
    ctx.lineTo(10+10*i,10+10*(j+1));
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
      }
    }
  }

}

document.addEventListener('mousedown',check_cell);

function check_cell(e){
  var x = Math.round(e.clientX);
  var y = Math.round(e.clientY);

  var console_obj = window.console;
  console.log("(X,Y)=(%d,%d)",x,y);

  for(var i = 0; i < 50; i++){
    for(var j = 0; j < 50; j++){
      if(x>=20+10*i && x<20+10*(i+1) && y>=20+10*j && y < 20+10*(j+1)){
        if(cell[i][j]){
            cell[i][j] = false;
          }else{
            cell[i][j] = true;
          }
      }
    }
  }
  draw();
}
function bool_to_str(){
  var str = "";
  for(var i = 0; i < 50; i++){
    for(var j = 0; j < 50; j++){
      if(cell[i][j]){
    str = str+"1";
      }else{
    str = str+"0";
      }
    }
  }
  return str;
}

function str_to_bool(str){
  var yake = new Array();
  var count = 0;
  yake = str.split(" ");
  for(var i = 0; i < 50; i++){
    for(var j = 0; j < 50; j++){
      if(yake[count] = "1"){
        cell[i][j] = true;
      }else{
        cell[i][j] = false;
      }
      count++;
    }
  }
}

document.getElementById("submit").addEventListener("click",function(){
    var data = bool_to_str();
    var form = document.getElementById("form");
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', 'data');
    input.setAttribute('value' , data);
    form.appendChild( input );

    alert(data + "をPHPに送ります");
  });

document.getElementById("get").addEventListener("click",function(){

    var form2 = document.getElementById("form2");
    var str = null;
    str = "<?php echo $data; ?>";
    console.log(str);
    var data = str_to_bool(str);
    draw();
  });
</script>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • te2ji

    2016/08/07 12:30

    切り分けた箇所に関して、記載して下さい。エラーメッセージ等も合わせて。あと、data varchar(2499) は正確ですか?

    キャンセル

  • kei344

    2016/08/07 12:36

    「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。

    キャンセル

  • kei344

    2016/08/07 14:34

    $_POST["name"] と $_POST["filename"] がありますが、違いは何でしょう。別な箇所で同じ用途に使われていませんか?

    キャンセル

  • Rino-T

    2016/08/07 14:48

    ご指摘ありがとうございます。おっしゃられた通り、同じ用途で使われてました。気づかぬうちにごっちゃになって使ってしまっていたようです。修正してみたいと思います。

    キャンセル

回答 2

checkベストアンサー

+1

直接の回答ではありませんが、

  1. テキストエリアにある文字列データからcanvasを表示
  2. canvasデータを文字列にしてテキストエリアに表示
  3. データベースの内容を表示(テキストのままで)
  4. PHPからデータベースに追加/編集/削除(POST通信せずに追加する文字列をコードにべた書きで)
  5. HTMLからテキストデータをPHPにPOSTで送り、それをPHPでHTMLにして表示
  6. PHPからデータをJavaScriptで使える形で表示

このあたりを少しずつ検証していかれたほうが良いと思います。どこまでが動いていてどこまで動いていないのかを切り分けてみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

$sql = "select * from pictures where name = ?";     // sql文
if(!empty($sql)){
  $stm = $dbh->prepare($sql);        // ステートメント
  $params = array($filename);
  $stm->execute($params);
  foreach ($stm->fetchAll(PDO::FETCH_ASSOC) as $picture) {
    $data = $picture['data'];
    echo $data;
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/07 13:45

    回答の通りに、書いてね。

    $params , $param の間違いありますよ。

    キャンセル

  • 2016/08/07 13:56

    ご指摘ありがとうございます。修正させていただきます。

    キャンセル

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

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

同じタグがついた質問を見る