Kedvenc PHP framework-ünk használata közben elgondolkodhatunk, hogyan is lenne a legcélszerűbb haladó megoldásokat beleépíteni az alkalmazásunkba. Ebben próbálok segíteni ezzel a kis tutoriálommal.
Példánkhoz hasonló megoldást alkalmaztam Codeigniter nélkül a Foglalt-e a felhasználónév AJAX technika cikkemben.
Lássuk a példát
A feladatunk egyszerű lesz. A regisztrálás során ki kell szűrnünk azokat a felhasználókat, amelyek már be vannak regisztrálva email címükkel a weboldalunkra. Ezt úgy fogjuk megtenni, hogy az űrlap beküldése nélkül jelezzük nekik, hogy már regisztrálva van-e a megadott email címük.
Logika a kód mögött
- Először ugyebár egy FORM-ra lesz szükségünk, amiben JS-el megnézzük milyen értéke van egy bizonyos mezőnek.
- Majd jQuery használatával elküldjük az adatokat a controller-ünknek ami egy modell function-jével meg is állapítja, hogy van-e ilyen az adatbázisban.
- A TRUE vagy FALSE értéket pedig JSON adatként küldjük vissza JS-ünkbe.
A Form és a JS
Formunknál egyetlen követelmény, hogy a vizsgált mezőnek adjunk egy ID-t. Aztán megnézzük a beírt értéket, hogy szabványos email cím-e. Ha igen, akkor küldjük tovább a controller-nek.
$("#email").focusout(function() {
// focusout()-ot használtam, így akkor zajlik le az ellenörzés,
// ha már elkattintott a felhasználó a mezőből
var checkString_email = $("#email").val();
// hozzáadunk egy kis regex filtert
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
var data = 'email='+ checkString_email;
// ha a checkString_email érvényes email
if(filter.test(checkString_email)) {
// akkor ajax hívás
$.ajax({
type: "POST",
url: "controllerünk_elérési_útja",
data: data,
dataType: 'json',
// ezt csak akkor fontos megadni ha
// JSON-ként akarjuk kezelni az adataink
success: function(result) {
if(result.email_exists == true) {
$('#emailExistsFail').hide();
$('#emailExistsOk').show();
} else {
$('#emailExistsOk').hide();
$('#emailExistsFail').show();
}
}
});
// a következő else-vel biztosra megyünk,
// hogy csak az igazi adatokra helyesel
} else {
$('#emailExistsOk').hide();
$('#emailExistsFail').show();
}
return false;
});Én gyakran használok két divet, amiket elrejtek és megjelenítek az eredménytől függően. De persze bármilyen más stílusmódosítást végrehajthatunk jQuery segítségével.
A Controller
Érdemes külön controllert létrehozni az AJAX műveleteink számára, így egy helyen tudhatjuk ezeket. És az ebben lévő function-ünk kb így néz majd ki:
function email_availability() {
$this->load->model("membership_model");
// meghívjuk a modellünk, és a benne lévő eszköz segítségével
// megnézzük van-e ilyen ilyen email cím az adatbázisunkban
$query = $this->membership_model->email_exists( $this->input->post("email") );
if ($query['exists'] == TRUE){
// ha igen akkor egy igaz értéket küldünk vissza,
// de a tömbünket a json_encode() segítségével előkezeljük
echo json_encode(array('email_exists' => FALSE));
} else {
echo json_encode(array('email_exists' => TRUE));
}
}
A Modell
A modellünkben pedig egy kis rövid eszközzel ellenőrizzük, hogy van-e ilyen email az adatbázisban.
function email_exists($email) {
$this->db->where('email', $email);
$query = $this->db->get('user');
// a biztonság kedvéért mindig a CI rendszerén
// keresztül érjük el az adatbázisunk
if($query->num_rows > 0) {
// ha több mint 0 sor lett a lekérdezésünk eredménye,
// akkor van már ilyen email cím az adatbázisban
// ezért visszaküldünk egy igaz értéket
$data['exists'] = TRUE;
return $data;
} else {
$data['exists'] = FALSE;
return $data;
}
}
Debugging
Ha elrontottunk valamit, akkor se essünk kétségbe. Például Chrome-ban a Ctrl+Shift+i billentyűkombinációval előhívott fejlesztői eszközöknél keressük meg a Network fület. Itt nyomon tudjuk követni a szerver felé irányuló AJAX lekérdezéseket.
A JSON adatokkal egyrészt könnyű dolgozni, mert jól integrálhatóak a JS kódjainkba, másrészt pedig többdimenziós asszociatív tömbökhöz vagy akár az objektumokhoz hasonlóan, szépen strukturált adatszerkezeteket lehet létrehozni viszonylag kis adatmérettel.
