traži:  
 php.com.hr > članci

PHP & Javascript (GUI)
 
15.09.2008.


Javascript je danas postao nezaobilazan dio svake ozbiljnije web aplikacije. Kako najlakše upotrijebiti i iskoristiti divote javascripta u svojoj php aplikaciji pogledajte na primjeru.

Prednosti javascripta su svima jasne: brže i preglednije web sučelje, osvježavanje podataka bez refresha cijele stranice (ajax), mogućnost "live" pretraživanja podataka integriranim ajax pretraživačem i sl.

Predstavljamo vam idealan framework za rad sa ajax-om i javascriptom općenito: jQuery.

jQuery je javascript framework koji funkcionira na principu tzv. "evenata i elemenata". Njegova integracija u php aplikaciju je vrlo jednostavna i kada jednom ovladate njime (naravno, ako već niste), zasigurno ćete ga zavoljeti.

Kako započeti?
Idealno mjesto za početak svakako je stranica www.jquery.com, koja je i službena stranica zajednice na kojoj možete pronaći bezbroj tutorijala, primjera koda i najvažnije od svega: pregršt besplatnih plugin-ova koje možete ugraditi u svoje web aplikacije brzo i jednostavno.

Na sljedećem primjeru pokazati ćemo vam kako jQuery funkcionira sa pluginom kalendara, ukoliko poželite postaviti mali javascript kalendar na polje sa datumom:

U header html dokumenta prvo je potrebno uključiti jquery framework:

<script type="text/javascript" src="jquery.js"></script>



Potom je, naravno, potrebno uključiti i plugin koji ste preuzeli:

<script type="text/javascript" src="date_picker.js"></script>


U formi u kojoj se nalazi polje za datum na koju želimo primijeniti plugin postavljamo id ili naziv css klase. U ovom slučaju postavljamo klasu "date_input" na polje sa datumom:

<input name="date" class="date_input" type="text">



Nakon toga pozivamo plugin i primjenjujemo ga na polje:

$(function() { $(".date_input").date_input(); });


I skoro smo završili sa integracijom kalendara. Osim što je još potrebno gore navedenoj funkciji reći kada da se izvrši. To ćemo učiniti jQuery ready eventom unutar kojeg ćemo smjestiti gore navedeni dio koda:

$(document).ready(function(){
   $(function() { $(".date_input").date_input(); });

});



Primjer kako kalendar sada izgleda možete pogledati ovdje.

Sljedeći puta ćemo prezentirati korištenja ajax-a i php-a sa jquery-om.  


članci
 © 2004 - 2008 php.com.hr