Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: HTML5 + Javascript muuttuja tietokantaan

Sivun loppuun

WKoA [17.02.2012 18:29:45]

#

Hei,

Simppeli kysymys, johon toivotaan simppeliä vastausta =)
Eli miten olisi järkevin tallentaa pelin pistemäärä HTML5/Javascript pelistä tietokantaan? Oletetaan vaikkapa että pistemäärä on pelissä ihan perus var muuttujassa. Kaikki toimivat ehdotukset otetaan kiljuen vastaan! =D

Macro [17.02.2012 18:45:02]

#

AJAX. Simppelimpää vastausta tuskin voi antaa :)

Kutsu PHP-sivua, joka tallentaa sille välitetyn muuttujan tietokantaan.

WKoA [17.02.2012 18:49:12]

#

Olisiko tuohon heittää jotain simppeliä esimerkkiä? =P

XYZ [17.02.2012 18:51:07]

#

Simppeli vastaus: PHP:llä.

Ajaxilla pisteet PHP/cgi-scriptille joka tallentaa pisteet kantaan.
Ongelmana on, että pelaaja voi lähettää sinne mitä sattuu. Javascriptillä kryptauksesta ei ole hyötyä, hidastaa ehkä.

WKoA [17.02.2012 20:09:50]

#

Otetaan vastaan jotain esimerkki koodeja kun ei keksi mitään järkeviä hakusanoja, joka simppelisti esittäisi asian =P

makumaku [17.02.2012 20:18:21]

#

WKoA kirjoitti:

ei keksi mitään järkeviä hakusanoja, joka simppelisti esittäisi asian

Kokeile "Simple Ajax Example" :)

XYZ [17.02.2012 20:56:02]

#

Poistettu vaikeakäyttöinen koodi

Macro [17.02.2012 22:37:51]

#

Ehkä kumminkin jQueryn käyttö olisi muutaman kerran helpompi käyttää kuin tuo XYZ:n koodi.

http://api.jquery.com/jQuery.ajax/

tsuriga [17.02.2012 23:48:18]

#

Ja tässä tapauksessa jQuery.post.

(ellei sitten ollut puhe HTML5 Web Databasesta ;)

WKoA [18.02.2012 10:59:17]

#

Eli kun tarkastellaan vaikkapa peliä: http://www.canvasrider.com
Niin miten tuo peli tallentaa ajat tietokantaan?

Ja tietysti mittää nappuloitten painamisia. Jonkin simppeli esimerkki olisi hyvä, sillä tällä päällä ei monimutkaisia esimerkkejä kaivata =)

makumaku [18.02.2012 11:43:55]

#

Mielestäni tsurigan ja Macron antamissa linkeissä esimerkit ovat hyvin yksinkertaisia. Myöskään XYZ:n esimerkki ei tainnut olla kovin monimutkainen, vaikka ei käyttänytkään mitään valmista js-kirjastoa.
Oletko siis kokeillut näitä esimerkkejä? Ja jos olet niin mitä asiaa et niissä ymmärtänyt tai saanut toimimaan?
Ja jos et vaivautunut edes kokeilemaan, niin silloinhan nämä neuvot ovat aika turhia.

WKoA [19.02.2012 14:15:38]

#

No laitetaan jotain palautetta jos jollekkin muulle tulee samankailtaista ongelmaa, niin vastaus löytyy helposti alta.

Toimitan tuon javascript muuttujan siirron siis keksien avulla.

document.cookie = "points=500";

"" -merkkien sisään laitetaan luonnollisesti vain se haluttu muuttuja.

PS. Tuohon tuskin löytyy ainakaan yksinkertaisempaa hommaa, siten ettei sivua tarvitse päivitellä/ohjailla eteenpäin (joka on siis pelikääytössä epäkäytännöllisin mahdollinen vaihtoehto).

Metabolix [19.02.2012 14:18:45]

#

En ymmärrä, mihin tämä keksi oli olevinaan ratkaisu. GET- ja POST-muuttujia saa AJAX-pyyntöhin (ja muihinkin) aivan yhtä helposti, ja ne ovat kaikin puolin parempi tapa muuttuvan tiedon välittämiseen.

WKoA [19.02.2012 14:27:57]

#

No tietysti parasta olisi, että tieto saataisiin javascript pelistä tietokantaan suoraa, ilman sivun uudelleenpäivittämistä (saatika uudelleenohjauksia), mutta kunnes toimiva koodi tähän löytyy, niin tuo ajaa asiansa.

Ja eikös nuo GET ja POST vaadi myös sivun päivittämistä?

Ja käsittääkseni PHP suoritetaan ennen Javascriptiä, niin ei taida olla mitään järkeviä keinoja saada tietoa Javascriptiltä tietokantaan, ilman, että pelaaja lataa sivun uudestaan. Ja kun keinoa ei ole, niin sama laittaa kekseillä, jos vaihtoehtona on tolkuton koodihässäkkä.

Macro [19.02.2012 14:32:25]

#

Ajaxin idea on juuri se, että voidaan kutsua esimerkiksi jotain PHP-sivua ilman sivun päivittämistä. Ohjelmasi voisi siis keskustella PHP:n kanssa, mutta sen ei tarvitsisi itse päivittyä.

Metabolix [19.02.2012 14:34:06]

#

Nyt selität taas jotain ihan ihmeitä. Mahdoitko oikeasti edes katsoa annettuja linkkejä? Lisää sivulle jQuery-kirjasto, niin voit lähettää pisteet vaikka näin helposti:

jQuery.post("tallennus.php", {"pisteet": 123});

Ilman jQuerya voit tehdä "näkymättömän" sivunlatauksen myös vaikkapa iframella. POST-pyyntöä varten pitää tehdä lomake, jonka target on jokin iframe.

WKoA [19.02.2012 14:37:05]

#

No idean ymmärsin, mutta syytä toimimattomuuteen en. Osoitteessa: http://api.jquery.com/jQuery.post/ olevaa koodia en saanut lukuisista taistelluista tunneista huolimatta toimimaan. Onko vika sitten Jqueryssä, selaimessa vaiko käyttäjässä, niin sitä en tiedä, mutta sen tiedän, että homma ei pelittänyt. =) Joten pitänee käyttää perinteisempiä vaihtoehtoja... toimimaton systeemi kun on turhaa.

EDIT: Voiko tuo systeemi asiasta kolmanteen olla riippuvainen selaimesta?

Macro [19.02.2012 14:40:31]

#

Voi olla riippuvainen selaimestakin, jos käytät jotain IE 5:n tasoista selainta. Tuskin käytät.

Mitä virheitä saat? Linkkasitko jQueryn sivustollesi?

WKoA [19.02.2012 14:52:16]

#

Eli siis javascript suorittaa funktion X pelissä, mikäli pelaaja saa uuden ennätyksen. Ennätys katsotaan localStorage.setItem metodilla ja samassa kohtaa ruudulle tulostetaan teksti, että em. ehtolause, joka sisältää siis localStorage.setItem koodin on suoritettu.

Ja jQuery on myös luonnollisesti linkattu.

php tiedosto, jonne pisteet pitäisi lähettää sisältää siis normi php GET funktion, sekä if lauseen, joka tallentaa pisteet tietokantaan, jos pisteitä on yli 1.

Javascript saitti ei anna mitään virheilmoitusta, eikä peli edes jumi (joka osoittaisi, että scripti olisi shaizea), mutta tulostaa tekstin joka on if silmukan sisällä, jossa on myös tuo jQuery.post lähetys. Eli ainakin kohta suoritetaan jossain välissä.

Ongelma onkin siis siinä, etten pysty seuraamaan lähettääkö tuo jQuery todella tuon javascript muuttujan tuonne .php sivulle, jossa se pitäisi tallentaa pisteet kantaan.

Tiedossa on että pisteet sisältävä javascript muuttuja sisältää kyllä arvon joka on reippaasti yli 1 ja tiedossa on myös, että tuo tietokannan tallennusskripta toimii. Eli ongelma on ilmeisesti joko jQuery koodissa itsessään tai selaimessa.

EDIT: Selaimina on ollut Chrome 12.0.742.100 ja uusin Rockmelt

Macro [19.02.2012 15:20:44]

#

Ei se vika ole noissa kummassakaan, unohdit sen yhden seikan siinä tuolin ja näytön välissä.

jQueryn sivulla on näytetty myös, että miten saat paluuarvon tulostettua käyttäjälle. Laita siis PHP-skriptisi tulostamaan sen saamat arvot ja katso mitä saat Ajaxilla vastaukseksi.

Suora poiminta jQueryn sivulta:

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});

Koodi lähettää pyynnön sivulle test.html kansiossa ajax ja sijoittaa paluuarvon (eli mitä se test.html sisältää) elementtiin, jossa class="result".

Joten voisit laittaa PHP-sivulle jotain tälläistä

var_dump($_POST);

ja Javascriptin puolelle tuon ylemmän koodin (jos et halua tulostaa vastausta mihinkään elementtiin, korvaa tuo rivi -> alert(data)), muutat tietenkin elementin ja tiedoston nimen.

qeijo [19.02.2012 15:30:31]

#

Yritätkö kenties postata toiseen domainiin?

Metabolix [19.02.2012 15:58:36]

#

WKoA kirjoitti:

Ongelma onkin siis siinä, etten pysty seuraamaan lähettääkö tuo jQuery todella tuon javascript muuttujan tuonne .php sivulle, jossa se pitäisi tallentaa pisteet kantaan.

Mikä sen estää? Chromiumissa on erinomainen kehitystyökalu, josta näkyy täsmälleen, mitä pyyntöjä on lähetetty. Samainen vehje näyttää myös virheilmoitukset hyvin täsmällisesti. Tällaisten perusvälineiden tutkimisen pitäisi olla nettiohjelmoinnissa nykyään helloworldista seuraava askel, ihan turha niitä virheitä ja vikoja on arvailemalla metsästää.

tsuriga [19.02.2012 16:31:01]

#

Huom! $.post lähettää POST-kyselyn, kuten tässä pitääkin, kun kyse on kyselystä, joka muuttaa tietoja serverillä, mutta puhut GETistä php-tiedostossa.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta