Door
Tim vdv
op 15-10-2011 16:56
gewijzigd op 15-10-2011 19:56
3.692 views
Hey iedereen,
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):
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES (' Hier moet de variable ')");
}
Javascript:
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);
}
de var DataURL wil ik in de database hebben want die genereerd het plaatje
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);
Aan de server-kant zou je hem dan als ruwe post-data moeten ontvangen, en als het goed is kan dat uitlezen met
<?php
$dataURL = file_get_contents('php://input');
?>
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)
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);
}
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.
In Firebug of Chrome's WebInspector kan je als het goed zien welke data er verstuurd wordt.
(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.
Jammer genoeg geen nut gehad, $HTTP_RAW_POST_DATA gaf een error dat het geen directory was
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:
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:
$dataURL = file_get_contents('php://input');
if ($action == 'klik') {
klik1();
}
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES ('$dataURL')");
}
Aah, staat die PHP code wel in save.php? XMLHttpRequest doet een aanroep op de achtergrond naar dat bestand. Hij geeft ook geen $_GET parameters mee, dus $action zal niet 'klik' zijn. (Let je wel op je superglobals? $_GET['action'] en niet $action als je dat action-deel in de url bedoelt)
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.
Ik heb de variable $dataURL verandert naar $HTTP_RAW_POST_DATA in de query zelf maar dat hielp ook niet (Als je dat bedoelte tenminste).
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:
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
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).
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.
Heb de link weg gelaten maar nu doet die de query gelijk al.. En dat is niet de bedoeling want dan stuurt die sowieso een 0 lijkt me. Bedankt voor de code!
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.
