HTML 5 locale opslag in database

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tim vdv

Tim vdv

15/10/2011 16:56:52
Quote Anchor link
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):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
function klik1() {
mysql_query("INSERT INTO facebook (id) VALUES (' Hier moet de variable ')");
}


Javascript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
}


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
 
PHP hulp

PHP hulp

28/03/2024 23:44:53
 
Jelmer -

Jelmer -

15/10/2011 18:11:46
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);


Aan de server-kant zou je hem dan als ruwe post-data moeten ontvangen, en als het goed is kan dat uitlezen met
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?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)

edit: hoe xmlhttprequest werkt staat goed beschreven om MDN
Gewijzigd op 15/10/2011 18:14:05 door Jelmer -
 
Tim vdv

Tim vdv

15/10/2011 19:55:39
Quote Anchor link
Ik heb nu deze code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
}


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.
 
Jelmer -

Jelmer -

15/10/2011 20:15:02
Quote Anchor link
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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
if (request.readyState == 4) and (request.status == 200)

moest natuurlijk
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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 -
 
Tim vdv

Tim vdv

15/10/2011 20:37:38
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
}



PHP:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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')");
}
 
Jelmer -

Jelmer -

15/10/2011 23:55:05
Quote Anchor link
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.
 
Tim vdv

Tim vdv

16/10/2011 00:31:17
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/10/2011 08:22:18
Quote Anchor link
Als ik het goed begrijp is dat een image die in de database moet. is dat ID veld van het type blob?
 
Jelmer -

Jelmer -

16/10/2011 10:00:14
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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.
 
Tim vdv

Tim vdv

16/10/2011 12:18:03
Quote Anchor link
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.

Bij de laatste test kreeg ik nog wat errors.

Code zover:

Html
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="post" onClick="slaop();"><span>Verstuur</span></div>


Javascript
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
}


PHP
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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";
}

?>



Sorry dat ik misschien een beetje dom overkom maar ik waardeer jullie hulp heel erg!
Ik moet nu weg. Vanavond ga ik weer verder.
 
Jacco Brandt

Jacco Brandt

16/10/2011 12:25:00
Quote Anchor link
Probeer er eens een BLOB-type van te maken in je database, die is hiervoor gemaakt.
 
Tim vdv

Tim vdv

16/10/2011 12:31:06
Quote Anchor link
Heb het toch maar even in een BLOB veranderd alleen niks bij de waardes gezet. Is dat een probleem?
 
Jacco Brandt

Jacco Brandt

16/10/2011 12:34:56
Quote Anchor link
Nee, dat is zoals het hoort.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.