Prelaženje iz JS u PHP i nazad

pozdrav svima. ovo je moje prvo pitanje na forumu. :slight_smile:

trebao bih pročitati rezoluciju ekrana i IP adresu posjetioca i smjestiti ih u bazu.
mislim da nekako to mogu napraviti, ali mi je problem kako usmjeravati tok programa, s obzirom da treba prelaziti iz i u HTML/Javascript/PHP, a tu se ne snalazim baš najbolje.

recimo, pročitam rezoluciju u Javascriptu, pa vrijednost varijable šaljem u PHP:

<script>
	var resol = screen.width + 'x' + screen.height;
	window.location = "test.php?resolut=" + resol;
</script>	

u PHP-u preuzmem varijablu i uzmem još IP:

	$php_resolut = $_GET['resolut'];
        $php_ID = $_SERVER['REMOTE_ADDR'];

pa to nešto obrađujem unutar tog test.php fajla, i pišem u bazu (preskačem taj dio, nebitno, sve radi kako treba), i sad hoću nazad u .html fajl unutar kojeg mi se nalazi onaj JS s početka. kako da se vratim nazad? ili kako da organiziram fajlove da mogu prelaziti iz jednog u drugi bez dodatnih komplikacija?
hvala.

Ajax je ono što trebaš. S ajaxom salje request na server bez da relodas stranicu na client side. Vjerovatno koristiš jQuery, pa imaš unutar njega rješene ajax requestove.

Također, razmisli malo o tome gdje se vrti php gdje js… prouči to…jer se čini da ti fali taj dio da ti bude jasnija sira slika.

Preimenuj .html u .php i sve zajedno smjesti u isti fajl, problem rijesen.

Ako sam dobro shvatio, on želi iz javascripta odraditi nešto sa php-om, a ostati u javascriptu tamo gdje je bio… Nisam siguran kako će mu ovo pomoći?

meni fajlovi trenutno i jesu .php, greškom sam napisao da je .html.

ali ne bi mi smetalo i da se sve odradi u jednom fajlu. samo ne znam kako.

Kao sto @bozoou treba ti AJAX.Ne znam zasto bas u bazu moras spremiti jer se radi o jako malim podacima - mozda bolja opcija bi bila localStorage ?

Čak i da strpaš sav code u jedan file (Što je teoretski moguće) …neće se sav taj code procesuirati na istom računalu.

Moraš razumjeti razliku između code-a koji se procesurira na serveru i na korisnikovom računalu koji posjećuje neki web.

Znači HTML & Javascript(JS) se procesuiraju na računalu korisnika koji posjećuje web. A računalo koje generira taj HTML (i JS) je server i on to vrlo često radi pomoću PHP-a. (Mada ima drugih server_side jezika)

Na serveru ćeš trajno pohraniti neke podatke u svoju bazu podataka…jer tvoja baza se nalazi na serveru, a ne na nekom računalu sa kojega netko posjećuje web. Zato je potrebno iz JS-a potegnuti do servera da bi nešto tako odradio sa PHP-om. E sada, ako ti potegneš natrag do servera na način da reloadaš stranicu, onda sve tvoje varijable koje su bile definirane u JS-u će nestati. (Osim ako ih nisi pohranio u localStorage npr …ali i da jesi…ti jednostavno reloadanjem stranice restartaš JS koji se odvijao na korisnikovom računalu…što u ovakvom slučaju nikako ne želiš)

Opcija ti je znači potegnuti do servera, a da ne reloadaš korisniku stranicu koja mu se prikazuje pred očima. Da bi to napravio, trebaš kontaktirati server pomoću AJAX-a. AJAX će ti znači omogućiti da pošalješ set podataka prema serveru, da se na serveru trigira neka skripta koja će hendlati te podatke koje si poslao …i rezultat ti se ponovno vraća na client_side,…u tvoj JS, kao response tvoje AJAX konekcije.

Da te odmah spasim nekih bugova, kada ćeš slati AJAX request, moraš biti svjestan da response nije trenutan kao što si naviknuo u ostatku Javascripta i hendlanja sa varijablama. Naime, nakon što pošalješ AJAX request, proći će nekih cca 300ms dok se vrati response…a za to vrijeme javascript code piči dalje nakon linije gdje si poslao ajax request. No znat ćeš što s time…samo da vizualiziraš što se dešava…

Možeš ići i sa localStorage pohranom, što je za tvoj slučaj vrlo vjerovatno ok rješenje …ali svakako nemoj preskočiti pogledati kako se koristi AJAX, jer nije niš teško…“obična funkcijica” gdje definiraš ulazne parametre …a nema ti razvoja weba bez AJAX-a :wink:

@belmin
localStorage nisam nikad ni koristio, pogledaću šta sve nudi ta opcija.
a ovo što sam mislio trpati u bazu planirao sam kasnije koristiti za statistiku. bilo bi toga još osim IP-a i rezolucije.

@bozoou
hvala na iscrpnom odgovoru. klijentsku i serversku stranu generalno razumijem, pa mi je tvoje objašnjenje jako korisno. AJAX ću svakako pogledati, predugo to odlažem… :slight_smile:

Evo, da ti skratim malo put:

$.ajax({
    type: "POST",
    url: url,  //adresa skripte koju trigiraš na serveru
    data: send, //object koji salješ
    dataType:'json',  //ovo ti automatski pretvara tvoj send objekt u JSON tip podatka
    complete:function(data)
	    {
	    //na ovaj način hendlaš response, jer velim...on kasni kojih stotinja milisekundi, pa je zato ugrađena callback funkcija koja se tirigra kada stigne response
	    var responseText=data.responseText; //reponseText je i dalje JSON !!
	    },
	success:function(response)
		{
		//ovo je također callback ..a ovdje ti je automaski resopnse parsiran iz JSON-a natrag u object
		//ovaj call back se trigira nakon uspješnog requesta, dok se gornji "complete" se uvijek trigira. Očito ajax request može puknuti iz određenih razloga, pa na "complete" možeš dobiti error status..
		}
	});

…ovo što je gore, ti je već dovoljno za puno stvari. No taj jQueryev ajax sigurno nudi još korisnih stvari koje možeš definirati za pojedini request…tako da ne škodi baciti pogled čega još ima.

localStorage ti je isto vrlo korisna stvar, a ne može biti jednostavnije. To je zapis neke varijable u memoriju browsera. Znači te varijable ti se neće izgubiti između reloadanja stranice…a imaš punih 5MB prostora, na nekim browserima čak i 10MB.

A sve što ti treba za pohranu je: localStorage.my_test=‘pero’;
A za dohvaćanje var x=localStorage.my_test;

Simple as that!
Jedino što moraš biti svjestan da neki stariji browseri ne podržavaju localStorage…ali to je sada već zaista daleka prošlost, gotovo nema više takvih u igri.

Ili ces po dokumentaciji vidjeti metode koje su zakacene na localStorage, a to su setItem, getItem, removeItem, svaka od njih ima dva ulazna parametra a to su key/value.

localStorage('myTest', 'pero')

Gore navedeni nacin je takodjer potpuno ispravan, ali imas i ovaj sa nativnim metodama koje sa nalaze na Storage, odnosno localStorage object-u unutar window-a - ovo je vise neki syntax sugar.

Ako browser ne podrzava localStorage, te stvari mozes zapisati u cookies, imas more primjera posvuda :slight_smile:

a koliko dugo podaci ostaju u localStorage?

Dok korisnik ne ocisti cookies.

Prilikom page loada ti checkiras da li postoje oderedjeni key-evi u localStoragu, ako ne postoje zadas ih, u slucaju da postoje ne uradis nista :slight_smile:

a da li korištenje localStorage potpada pod obavezu, kao što je slučaj sa cookies, da se mora obavijestiti korisnika da se to koristi i smješta na njegov disk?

I naravno svjestan si da “screen.width” ne vraća točne podatke, Chrome, FF, IE ne računaju isto, tako recimo u Chromeu imaš 18px širine vertikalnog scrola, nije puno ali kod bitnih prelazaka rezolucija (768/1024…) imaš velike probleme, zato recimo Bootstrap koristi 991/992px što je ajmo reć neko polu rješenje.

PS
Imam vlastiti mini hack koji radi u piksel u svim browserima/devicevima, koristi JS i CSS kombinaciju.

u CSSu samo defiiraj klasu:

i onda u JS-u lako provjeriš stanje elementa i točno znaš di si:

Ovo je jedini način da pouzdano odrediš @media querije u JS-u, eto

@ubergosu
hvala ti. za ovo što trenutno koristim precizna rezolucija nije bitna.
ali svakako ću sačuvati i tvoj code.

[quote=“bozoou, post:10, topic:35031”]
localStorage ti je isto vrlo korisna stvar, a ne može biti jednostavnije. To je zapis neke varijable u memoriju browsera. Znači te varijable ti se neće izgubiti između reloadanja stranice…a imaš punih 5MB prostora, na nekim browserima čak i 10MB.

A sve što ti treba za pohranu je: localStorage.my_test=‘pero’;
A za dohvaćanje var x=localStorage.my_test;[/quote]
pokušao sam nešto sa localStorage, izgleda da ne radi onako kako mi je trebalo.
prvo sam htio da iskoristim neke varijable koje se u PHP-u čitaju iz MySQL baze:

<?php
     $sirina = $row["sirina"];
     $visina = $row["visina"];
?>
<script>
     var localStorage.sirinaLika = '<?php echo $sirina; ?>';
     var localStorage.visinaLika = '<?php echo $visina; ?>';
</script>

a onda pokušao dohvatiti u drugom fajlu (može li uopšte u drugom??), ovaj put je .js fajl:

var x = localStorage.sirinaLika;
var y = localStorage.visinaLika;
alert("Sirina je:     " + x + "    Visina je:     " + y);

međutim, tretira ga kao “undefined”.
da li sam nešto pogrešno uradio ili localStorage podaci nisu baš toliko globalni koliko sam mislio? :slight_smile:

Čini se da ne koristiš nikakav debuger, jer bi ti ovo izbacilo grešku: (topli savjet, koristi debuger pa ćeš odmah vidjeti ako ti JS negdje vrisne)

var localStorage.sirinaLika ='nesto'

O čemu je riječ…JS još nezna da ti je localStogare objekt, a ti dodjeljuješ vrijednost atributu objekta!
Trebao bi zadati:

var localStorage={sirinaLika:'nesto'}

E sad, na gornji način zbog “var”, ti bi stvorio svoj objekt localStorage koji se eto pukim slučajem zove jednako kao localStorage o kojem ovdje pričamo. Znači, napravi isto ono svoje, bez zadavanja “var” , znači samo:

localStorage.sirinaLika = '<?php echo $sirina; ?>';

Pošto u ovom slučaju ne kreiraš novu varijablu localStorage, onda JS već zna o kojem se to objektu radi …i neće se buniti ako dodjeliš vrijednost nekom atributu toga objekta.

(može li uopšte u drugom??)

Može, glavno je da isti browser čita taj file kao onaj koji je nekada prethodno pohranio vrijednost u localStorage.

@bozoou
hvala ti na ovim detaljima. mnogo si mi pomogao!

hvala i ostatku ekipe: @belmin, @ubergosu, @Veritos
očekivao sam kratak odgvor, a dobio vrlo korisne tutorijale. :slight_smile:
svako dobro vam želim.

javiću se ponekad, jer moje neznanje je neiscrpno… :wink:

1 Like

Sretno dalje :wink: