修正

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

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

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

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

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

また、実は

php
1 if(!empty($_POST["name"]) && !empty($_POST["data"])){
2  	$stmt = $dbh->prepare("insert into pictures (name,data) values(:name, :data)");
3  	$stmt->execute(
4  		array(
5  			":name"=>$_POST["name"],
6  			":data"=>$_POST["data"],
7  		)
8  	);
9  }

この部分を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 のデベロッパーツールのソースコードパネルにて)

php
1document.getElementById("get").addEventListener("click",function(){
2
3    var form2 = document.getElementById("form2");
4    var str = null;
5    str = "

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

最初に書いた質問

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

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

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

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

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

ソースコード

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5</head>
6<body>
7<canvas id="myCanvas" width="600" height="600"></canvas>
8<form id="form" action="canvas.php" method="post">
9  保存するデータ名を入力<br>
10  <input type="text" name="filename" value="">
11  <br>
12  <input type="submit" id="submit" value="データベースに保存">
13</form>
14<br>
15<form id="form2" action="canvas.php" method="post">
16  取得するデータ名を選択<br>
17	<input type="text" name="number" value ="">
18  <br>
19  <input type="submit" id="get" value="データベースから取得">
20</form>
21
22<?php
23//接続部分はPASSWORD等を含むため省略
24
25//$data = "";
26//$filename = "";
27
28if (isset($_POST["data"]) && isset($_POST["name"])) {
29  $data = $_POST["data"];
30  $filename = $_POST["name"];
31}
32  //処理
33
34  //レコードの挿入
35  if(!empty($_POST["name"]) && !empty($_POST["data"])){
36  	$stmt = $dbh->prepare("insert into pictures (name,data) values(:name, :data)");
37  	$stmt->execute(
38  		array(
39  			":name"=>$_POST["name"],
40  			":data"=>$_POST["data"],
41  		)
42  	);
43  }
44  //echo "done";
45
46//レコードの取得
47$sql = "select * from pictures where name = ?";     // sql文
48if(!empty($sql)){
49  $stm = $dbh->prepare($sql);        // ステートメント
50  $params = array($filename);
51  $stm->execute($params);
52  foreach ($stm->fetchAll(PDO::FETCH_ASSOC) as $picture) {
53    $data = $picture['data'];
54    echo $data;
55  }
56}
57// 件数を表示
58echo $dbh->query("select count(*) from users")->fetchColumn() . " records found";
59//切断
60$dbh = null;
61?>
62
63<script>
64   window.onload = function(){
65   draw();
66 }
67
68var  cell = new Array();
69for(var i = 0;i < 50; i++){
70  cell[i] = new Array();
71  for(var j = 0; j < 50; j++){
72    cell[i][j] = false;
73  }
74}
75
76function draw(){
77  var cvs = document.getElementById("myCanvas");
78  if(!cvs || !cvs.getContext) return false;
79  var ctx = cvs.getContext("2d");
80
81  ctx.strokeStyle = 'rgb(192,192,192)';
82  ctx.lineWidth = 0.5;
83  for(var i = 0; i < 50; i++){
84    for(var j = 0; j < 50; j++){
85
86      ctx.beginPath();
87      ctx.moveTo(10+10*i,10);
88      ctx.lineTo(10+10*i,500);
89      ctx.stroke();
90
91      ctx.beginPath();
92      ctx.moveTo(10,10+10*j);
93      ctx.lineTo(500,10+10*j);
94      ctx.stroke();
95    }
96  }
97  for(var i = 0; i < 49; i++){
98    for(var j = 0; j < 49; j++){
99      if(cell[i][j]){
100	ctx.fillStyle="rgb(0,0,0)";
101	ctx.beginPath();
102	ctx.moveTo(10+10*i,10+10*j);
103	ctx.lineTo(10+10*(i+1),10+10*j);
104	ctx.lineTo(10+10*(i+1),10+10*(j+1));
105	ctx.lineTo(10+10*i,10+10*(j+1));
106	ctx.closePath();
107	ctx.fill();
108	ctx.stroke();
109      }else{
110	ctx.fillStyle="rgb(255,255,255)";
111	ctx.beginPath();
112	ctx.moveTo(10+10*i,10+10*j);
113	ctx.lineTo(10+10*(i+1),10+10*j);
114	ctx.lineTo(10+10*(i+1),10+10*(j+1));
115	ctx.lineTo(10+10*i,10+10*(j+1));
116	ctx.closePath();
117	ctx.fill();
118	ctx.stroke();
119      }
120    }
121  }
122
123}
124
125document.addEventListener('mousedown',check_cell);
126
127function check_cell(e){
128  var x = Math.round(e.clientX);
129  var y = Math.round(e.clientY);
130
131  var console_obj = window.console;
132  console.log("(X,Y)=(%d,%d)",x,y);
133
134  for(var i = 0; i < 50; i++){
135    for(var j = 0; j < 50; j++){
136      if(x>=20+10*i && x<20+10*(i+1) && y>=20+10*j && y < 20+10*(j+1)){
137        if(cell[i][j]){
138	        cell[i][j] = false;
139	      }else{
140	        cell[i][j] = true;
141	      }
142      }
143    }
144  }
145  draw();
146}
147function bool_to_str(){
148  var str = "";
149  for(var i = 0; i < 50; i++){
150    for(var j = 0; j < 50; j++){
151      if(cell[i][j]){
152	str = str+"1";
153      }else{
154	str = str+"0";
155      }
156    }
157  }
158  return str;
159}
160
161function str_to_bool(str){
162  var yake = new Array();
163  var count = 0;
164  yake = str.split(" ");
165  for(var i = 0; i < 50; i++){
166    for(var j = 0; j < 50; j++){
167      if(yake[count] = "1"){
168        cell[i][j] = true;
169      }else{
170        cell[i][j] = false;
171      }
172      count++;
173    }
174  }
175}
176
177document.getElementById("submit").addEventListener("click",function(){
178    var data = bool_to_str();
179    var form = document.getElementById("form");
180    var input = document.createElement('input');
181    input.setAttribute('type', 'hidden');
182    input.setAttribute('name', 'data');
183    input.setAttribute('value' , data);
184    form.appendChild( input );
185
186    alert(data + "をPHPに送ります");
187  });
188
189document.getElementById("get").addEventListener("click",function(){
190
191    var form2 = document.getElementById("form2");
192    var str = null;
193    str = "<?php echo $data; ?>";
194    console.log(str);
195    var data = str_to_bool(str);
196    draw();
197  });
198</script>
199</body>
200</html>
201

退会済みユーザー

2016/08/07 03:30

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

kei344

2016/08/07 03:36

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

kei344

2016/08/07 05:34

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

Rino-T_C

2016/08/07 05:48

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

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

回答2件

ベストアンサー

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

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

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

投稿2016/08/07 10:12

kei344

総合スコア69407

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