Virusscanner tips?
HTML 5 locale opslag in database
Het idee van deze "webbapp?" is dat je iets kan tekenen in een HTML5 canvas en dat dat opgeslagen word zodat je een heel rijtje tekeningen krijgt van verschillende mensen. Ik heb deze app gemaakt in de facebook taal zodat ik het hopelijk ergens in mijn profiel kan krijgen.
Het probleem is dat dit moet gebeuren met AJAX omdat ik een Javascript variable wil kopieren naar een PHP variable om die in de mySQL query te verwerken. Jammer genoeg ben ik een beginner in PHP en heb geen idee hoe dit moet. Ik heb op internet gezocht en heb gezien dat je hiervoor bijvoorbeed Mootools of Jquery nodig hebt. Dit is verder geen probleem.
Een stukje code om het duidelijker te maken:
PHP (hij is geconnect met de database):
Code (php)
1
2
3
2
3
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES (' Hier moet de variable ')");
}
mysql_query("INSERT INTO facebook (id) VALUES (' Hier moet de variable ')");
}
Javascript:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
}
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
}
de var DataURL wil ik in de database hebben want die genereerd het plaatje
Link naar de site
Bedankt alvast!
Gewijzigd op 15/10/2011 19:56:29 door Tim vdv
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var request = new XMLHttpRequest();
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4 and request.status == 200)
alert("jeej!");
}
request.send(dataURL);
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4 and request.status == 200)
alert("jeej!");
}
request.send(dataURL);
Aan de server-kant zou je hem dan als ruwe post-data moeten ontvangen, en als het goed is kan dat uitlezen met
Let wel op dat wanneer dit script op een andere host wordt aangeboden dan save.php, je met de cross-domain policy te maken krijgt (lees: mag niet, tenzij de server een aantal speciale headers stuurt, voorbeeld, maar dat werkt sowieso niet in oudere browsers)
edit: hoe xmlhttprequest werkt staat goed beschreven om MDN
Gewijzigd op 15/10/2011 18:14:05 door Jelmer -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var request = new XMLHttpRequest();
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4) and (request.status == 200)
alert("jeej!");
}
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
request.send(dataURL);
}
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4) and (request.status == 200)
alert("jeej!");
}
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
request.send(dataURL);
}
Volgensmij verzend die ze wel ik heb een nieuw bestandje aangemaakt die save.php heet maar elke keer als ik nu iets verzend komt er een '0' bij in de database dus waarschijnlijk post die eerder dan dat DataURL binnen is ofzo.
(ik heb even gekeken, en volgens mij wordt het wel verstuurd)
Het zou dus kunnen zijn dat PHP moeilijk doet. Wat je nog kan proberen is om een content-type te pakken die PHP niet eens probeert te parsen, bijv. text/plain.
Code (php)
1
request.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
Je kan ook eens proberen of de data in $HTTP_RAW_POST_DATA zit in plaats van php://input, al zouden die gelijk aan elkaar moeten zijn volgens mij...
edit:
Code (php)
1
if (request.readyState == 4) and (request.status == 200)
moest natuurlijk
Code (php)
1
if (request.readyState == 4 && request.status == 200)
zijn. Ik zat nog met coffeescript in m'n hoofd toen ik 'and' gebruikte.
Gewijzigd op 15/10/2011 20:16:40 door Jelmer -
en request.setRequestHeader heeft volgensmij ook niks veranderd (database geeft nogsteeds een 0 aan).
Ik ga even die xmlhttprequest uitleg lezen.
Hier is de code hoe die nu is:
Javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var request = new XMLHttpRequest();
request.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
alert("jeej!");
}
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
request.send(dataURL);
}
request.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
alert("jeej!");
}
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
request.send(dataURL);
}
PHP:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$dataURL = file_get_contents('php://input');
if ($action == 'klik') {
klik1();
}
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES ('$dataURL')");
}
if ($action == 'klik') {
klik1();
}
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES ('$dataURL')");
}
Het resultaat van file_get_contents('php://input'); zou gelijk moeten zijn aan de inhoud van $HTTP_RAW_POST_DATA, die laatste verwijst niet naar een bestand. M.a.w. $dataURL = $HTTP_RAW_POST_DATA. Maar is die variabele uitgeschakeld.
Nog iets om op te passen, ik zie dat je je variabele direct in je query gebruikt. Let even op SQL injectie daar.
De PHP staat wel in de save.php ja. Bedankt voor de $_GET tip. Ik ben echt nog een beginner in PHP dus ik ken de regeltjes nog niet zo goed.
Op dit moment focus ik me nog niet zo erg op SQL injeciton. Heb er voorlopig .mysql_real_escape_string voor gezet maar weet eigenlijk niet of dat wel gaat helpen (Heb een echo achter de query gezet dus hij doet het nog wel).
Ik heb nogsteeds het gevoel dat die eerst die query doet en daarna pas die daraURL stuurt. Hier is een stukje uit de HTML dat is ook behoorlijk rommelig misschien heb je daar wat aan:
Code (php)
1
<a href="index.php?action=klik"><div class="post" onClick="slaop();"><span>Verstuur</span></div></a>
Zou die eerst "action=klik" doen of onClick="slaop();" want dat is best belangrijk in dit geval
Gewijzigd op 16/10/2011 00:34:06 door Tim vdv
Tim vdv op 16/10/2011 00:31:17:
Zou die eerst "action=klik" doen of onClick="slaop();" want dat is best belangrijk in dit geval
De link mag je helemaal weglaten. XMLHttpRequest roept de server al aan, je hoeft niet ook nog naar een nieuwe pagina te gaan. Maar let wel op dat xmlhttprequest verwijst naar save.php, en niet naar save.php?action=klik
Quote:
Op dit moment focus ik me nog niet zo erg op SQL injeciton. Heb er voorlopig .mysql_real_escape_string voor gezet maar weet eigenlijk niet of dat wel gaat helpen (Heb een echo achter de query gezet dus hij doet het nog wel).
Code (php)
1
mysql_query("INSERT INTO facebook (id) VALUES ('" . mysql_real_escape_string($dataURL) . "')");
Ger van Steenderen op 16/10/2011 08:22:18:
Als ik het goed begrijp is dat een image die in de database moet. is dat ID veld van het type blob?
Goeie! Hoe ziet de tabel facebook eruit, welke kolommen heeft hij en welk type hebben de kolommen? Als je de $dataURL in een veld van het type INT probeert op te slaan is 0 niet een heel vreemd resultaat.
Hij stond inderdaad op een int (echt heel stom van me). Heb er nu een varchar(7000) van gemaakt. Dit lijkt me ruim genoeg voor de string die ik moet opslaan.
Bij de laatste test kreeg ik nog wat errors.
Code zover:
Html
Code (php)
1
<div class="post" onClick="slaop();"><span>Verstuur</span></div>
Javascript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//SLAPOPALSIMG
var request = new XMLHttpRequest();
request.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
alert("jeej!");
}
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
request.send(dataURL);
}
var request = new XMLHttpRequest();
request.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
request.open('POST', 'save.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
alert("jeej!");
}
function slaop() {
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
context.clearRect(0, 0, canvas.width, canvas.height);
request.send(dataURL);
}
PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//$action = $_GET['action'];
$dataURL = file_get_contents('php://input');
//if ($action == 'klik') {
klik1();
//}
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES ('" . mysql_real_escape_string($dataURL) . "')");
echo"het werkt";
}
?>
$dataURL = file_get_contents('php://input');
//if ($action == 'klik') {
klik1();
//}
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES ('" . mysql_real_escape_string($dataURL) . "')");
echo"het werkt";
}
?>
Sorry dat ik misschien een beetje dom overkom maar ik waardeer jullie hulp heel erg!
Ik moet nu weg. Vanavond ga ik weer verder.