spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Michal Macejko 26.12.2012
Hodnoť článok:
3 0

Live vyhľadávanie (AJAX,MySQL)

V dnešnom článku by som vám rád priblížil, ako vytvárať interaktívne webové aplikácie. Laicky povedané, „ako meniť obsah web stránky bez potreby kompletného načítania.“ Túto krátku vyúku budem demonštrovať na príklade live vyhľadávania z MySQL databázy.

Niečo málo na úvod


AJAX najčastejšie využívame pre asynchrónnu komunikáciu webového prehliadača so serverom. Táto komunikácia prebieha na pozadí prehliadača, takže koncový užívateľ si ju vôbec neuvedomuje. Výslednú dynamickú zmenu obsahu webovej stránky nám zabezpečuje technológia DOM.

Čo k tomu potrebujeme?


- základy HTML,CSS

- DOM (dynamické zobrazovanie údajov)

- XMLHttpRequest (technológia pre asynchrónnu výmenu údajov na pozadí..)

- Javascript
- základy MySQL



Začíname

1.

Jednoduchý HTML formulár + jeden div na zobrazovanie vysledkov

Vytvoríme si formulár s jedným vstupným input, ktorému pridáme volanie funkcií na určité udalosti. Ako prvú môžete vidieť udalosť onkeyup (to nastáva, keď uživateľ po napísaní uvolní klávesu), ktorá nám volá funkciu vyhladaj(). 


<form>
<input type="text" id="inputHladaj" onkeyup=vyhladaj()"></input>
</form>
<div class="vysledky">

2.

Vytvorenie objektu XMLHttpRequest


- tento objekt ako som už spomínal, nám bude zabezpečovať výmenu údajov medzi prehliadačom a serverom

- pre prehliadač Internet Explorer musíme tento objekt špeciálne implementovať ako objekt ActiveX

// inicializujeme si globalnu premmenu s nazvom XHttp (pre pouzitie premennej vo vsetkych funkciach)


var xHttp;

function vytvorObjekt {


var xmlHttp; // pomocna premmenna pre vytvorenie objektu


//kontrolujeme prehliadac ci to nieje IE 

if(window.ActiveXObject) { // IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}


else if (window.XMLHttpRequest) { // Firefox, Opera, Safari..
xmlHttp = new XMLHttpRequest();
}
else { alert(Vas prehliadac nieje kompatibilny.); }

return xmlHttp;
}

3.

Vytvorenie funkcie vyhladaj() (volaná na onkeyup)

function vyhladaj () {

	// pomocou DOM zachytavame slovo ktore zadal uzivatel 

	var hladaneSlovo = document.getElementById('inputHladaj').value;

// ziskavame referenciu na uzol (DOM) respektive zadavame ID elementu kde //budeme zapisovat

var divKamZapisujeme = document.getElementById('vysledky');

	// kontrolujeme ci nieje nahodou prazdnu input

	// ak je prazdny tak do div nic nevpiseme respektive zmazeme ak tam
//nieco je zapisane a ukoncime function pomocou die()

	if(hladaneSlovo=='') { divKamZapisujeme.innerHTML = ''; die(); }

    // vytvarame si URL adresu odkial budeme nacitavat obsah, k URL prikladame uzivatelom napisane slovo

	var adresa = "vyhladavanie.php?slovo="+hladaneSlovo;

	// vytvarame si objekt a priradzujeme ho premennej xHttp

	xHttp = vytvorObjekt();

// nastavujeme si parametre volania (GET - sposob prenosu, adresa = cesta k dokumentu, true = asynchronny typ prenosu)

// prenos GET vacsinou pouzivame ak chceme od servera prijat nejake udaje, prenos POST pouzivame ak serveru len posielame udaje
	xHttp.open("GET", adresa, true);

	// funkcia pre obsluhu zmenu stavu

xHttp.onreadystatechange = function () {

   // stav 4 znamena OK a mozeme pokracovat

   if(xHttp.readyState == 4 && xHttp.status == 200) {

// do div zapisujeme udaje z nacitanej stranky
		divKamZapisujeme.innerHTML = xHttp.responseText;

	}

	}

// nevsimame si to.. send pouzivame ak chceme namiesto funkciet GET pouzivat funckiu POST

	xHttp.send(null);

}

4.

Dokument vyhladavanie.php

- aby som poukázal na funkčnosť kódu, vytváram dokument vyhladavanie.php s nasledovným obsahom

<?php 
$slovo = $_GET['slovo'];
echo $slovo;
 ?>

- pre neskúsenejších bližšie opíšem čo robím a ako to celé funguje
- v ajaxovej funkcii vyhladaj() načítavam dokument vyhladavanie.php
- pomocou metódy GET, respektíve pomocou URL adresy predávam uživateľom zadané slovo do dokumentu vyhladavanie.php, kde ho následne priradím premennej $slovo a jednoducho vypíšem na obrazovku

- teraz ked napíšete niečo do input tak sa to ihneď dynamicky zobrazí v div vysledky

No ale kedže nám nejde o dynamické zobrazovanie napísane slova tak pokračujeme. V dalšej časti článku predpokladám aspoň minimálne vedomosti o MySQL databázach.

V databázach si vytvoríme 3 stlpcovú tabuľku:

CREATE TABLE products
(
id int auto_increment,
productName varchar(30),
image varchar(90),
PRIMARY KEY(id)
)

Tabuľku products naplníme údajmi:

INSERT INTO products
(productName,image)
VALUES
('fruit - apple','http://blog.acorn-is.com/wp-content/uploads/apple-full2.jpg'),
('fruit - banana','http://www.harfasport.cz/userfiles/img/Zpravodaj/Clanek-01-1/banan.jpg'),
('fruit - pear','http://havran.blog.sk/images/2/e/2e5754986a9e486b01cfd8d8b664a5bf')

Máme vytvorenú skúšobnú tabuľku a môťme začat pracovať na PHP kóde. (vyhladavanie.php)

$hostitel = "localhost";
$uziv_jmeno = "root";
$heslo = "root";
$DB = "nazovDB";

// spajame sa s databazou MySQl
$spojenie = mysql_connect($hostitel, $uziv_jmeno, $heslo);
// vyberame konkretnu databazu
$databaza = mysql_select_db($DB);

	// osetrujeme neuspech pripojenia, respektive vyber DB
	if(!$spojenie or !$databaza) { echo "Nepodarilo sa nadviazat spojenie"; die(); }

// z URL vyberame slovo ktore zadal uzivatel
$slovo = $_GET['slovo'];

// jednoduchy SELECT z databazy kde vyberame podla zadaneho slova
//  '%$slovo%' - znamena ze pred hladanym slovom mozu byt nejake znaky a takisto aj za slovom
// napr. hladamenu vyrazu "na" vyhovuje vyraz banana
$sql=mysql_query("SELECT * FROM products WHERE productName LIKE '%$slovo%'");

// zratame kolko mame vysledkov
$najdenychVysledkov = mysql_num_rows($sql);
// ak ich je 0 tak zobrazime tuto informaciu do tabulky
if($najdenychVysledkov == 0) { $zobrazenaSprava = "<tr class=\"uvod\"><td> Nic sa neneslo </td></tr>";}
// ak ich nieje 0, znamena ze je ich 1 a viac, zobrazime tuto informaciu do tabulky
if($najdenychVysledkov != 0) {  $zobrazenaSprava = "<tr class=\"uvod\"><td>Pocet vysledkov:</td><td>".$najdenychVysledkov."</td></tr>"; }

// vysledok z sql dotazu zachytavamae do pola $zaznam
while($zaznam=mysql_fetch_array($sql)) {

	// prechadzame pole $zaznam a vytvarame riadky tabulky
	// 1 riadok obsahuje obrazok a nazov najdeneho produktu
	// obrazok vutvarame tak ze dynamicky priradzujeme url cestu (src) k obrazku
	// pomoocou css styly vytvarame vlastnosti pre riadky a stplce, taktiez obrazkom priradzujeme pevnu sirku, dlzka sa prisposobi
	$tabulka = $tabulka."<tr class=\"vyhladane\"><td><img src=\"".$zaznam['image']."\">></td><td>".$zaznam['productName']."</td></tr>";

}
 ?>

<table>
<tr class="uvod"><td>Vyhladane slovo:</td><td><?php echo $slovo; ?> </td></tr>

<?php echo $tabulka; // zapisujeme tabulku  ?> 
<?php echo $zobrazenaSprava; // zobrazujeme spravu ?> 

</table>

Do hlavičky vyhladavanie.php môžme skúšobne pridať style
(v reálnom chode, by sme style vytvárali v oddelenom samostatnom dokumente, ale nato sú iné články)

table { text-align:center; }

img { width:60px; padding:5px; }

.uvod { background:rgba(72,72,72,0.5); color:rgba(255,255,255,0.8); height:40px; font-size:small; }

.vyhladane { background:rgba(72,72,72,0.1); color:rgba(72,72,72,0.9); }

.vyhladane:hover {  background:rgba(72,72,72,0.2);}

td { width:150px; }

Bualáá. Vyhľadávanie je na svete.

Ešte zopár kozmetických úprav.

1.Chceme aby sa defaultne v input zobrazovalo nieco ako “Search..”. Ďalej z toho vyplýva, že musíme vytvoriť novú udalosť onfocus (keď myšou uživateľ klikne do input) kde budeme kontrolovať obsah input, pokiaľ sa tam bude nachádzať naša defaultna hodnota (Search..), tak input vyprázdnime. Ak sa tam bude nachádzat nejaké slovo, ktoré zadal uživateľ, jednoducho zavoláme funkciu vyhladaj().

2. Na udalosť onblur (keď uživatel klikne mimo input) jednoducho schováme výsledky, respektíve vložíme “nič”. Ak nastane situácia že uživateľ niečo napísal, následne klikol mimo a zase sa späť vracia do nášho input, voláme udalosťou onfocus funkciu zistujemeStav() v ktorej zisťujeme, že input.value už nieje naša defaultna hodnota, takže voláme funkciu vyhladaj(), kde opätovne zobrazíme výsledky vyhľadávania.

Upravíme HTML formulár:

- pridáme nové udalosti a funkcie

<h2>Zadaj slovo pre vyhladavanie</h2>

<form>

<input type="text" id="inputHladaj" value="Search.." onkeyup="vyhladaj()" onfocus="zistujemeStav()" onblur="skry()" />

</form>

Pridáme funkcie:

function zistujemeStav(){

	// vyhladavame element podla ID, priradzujeme premennej

var obsahInput = document.getElementById('inputHladaj');

	// mozu nastat 2 moznosti..

// 1.moznost - value = search - takze vymazame slovo search a ponechame //prazdne policko

	// 2.moznost - uzivatel uz zadal nejake slovo a vracia sa spat - zobrazime
//vysledky hladania daneho slova

	// osetrujeme moznost 1.

// ak je splnena podmienka, pomocou DOM vyprazdnime INPUT
// obsahInput.value obsahuje text napisany input
	if(obsahInput.value == 'Search..') { obsahInput.value = ''; }

	// ostetrime moznost 2.

	// ak je splnena podmienka, volame funkciu vyhldaja()

else if (obsahInput.value != 'Search..')  { vyhladaj(); }
}

function skry() { 

// uzivatel klikol mimo a my skryjeme vysledky vyhladavania, respektive vlozime "nic"

// dalo by sa pomocou DOM nastavit css style visible na hidden alebo display na none.. ale potom by trebalo prepracovat semantiku opatovneho zobrazovania div
document.getElementById('vysledky').innerHTML='';
}

Nakoniec krátka ukažka aplikácie.

Dúfam, že Vám tento článok aspoň z časti vysvetlil ako funguje technológia AJAX. Kód nieje dokonalý, ale k celkovému pochopeniu dynamického načítania okien bohato stačí.

Budem veľmi rád každému feedback-u

Michal Macejko Michal Macejko

povolanie: syn, požierač kníh, programátor internetov

čakám na tu správnu myšlienku


Contact me


Hodnoť článok:
3 0

7 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 We@st 2.1.2013 08:15:58
a SQL injection na svete
0 0 Michal Macejko 28.12.2012 12:05:44
@Ucitel ďakujem za kritiku. Pravdu povediac ani ma nenapadlo v tomto príklade to nejak zabezpečiť proti SQL injection, ale na druhej strane ani som nevedel, že to ide takto ako píšeš. Naštudujem a nabudúce to už bude o niečo lepšie :)
2 1 Ucitel 28.12.2012 03:21:51
Ten server-side kod je dost tragedia, mysql_ funkcie su dlhodobo nevyvijane (v dalsej verzii php budu deprected), spravne je pouzit mysqli_ alebo PDO.
Co je horsie je ta exemplarna sqli diera, vstupne data musis escapovat pomocou mysqli_real_escape_string (ziadne strip_tags a htmlescapechars) alebo este lepsie pouzit prepared statements.
Okrem toho ak pouzivas LIKE musis escapovat aj znaky % a _, inak si pouzivatel zadanim takeho znaku bude vediet vypisat celu databazu.

Okrem toho mas v celom clanku kopec nepresnosti a chyb (chybajuce uvodzovky, v javaskripte neexistuje funkcia die, etc..), nabuduce si to po sebe aspon raz precitaj.
0 0 Michal Macejko 27.12.2012 21:28:50
Ďakujem za tipy na vylepšenia..

Live vyhľadávanie som použil len ako príklad na ktorom som mohol jednoducho vysvetliť ako funguje AJAX, respektíve dynamické načítavanie a zobrazovanie. V reálnom projekte by som to samozrejme postavil na jQuery.. ale podľa mňa je dobré vedieť čo všetko za tým stojí a nielen písať riadky do blbovzdorného jQuery.
2 0 sokoliar 27.12.2012 20:55:58
Niesom žiadny javascript expert, ale aký ma toto význam riešiť takto "zložito" a nie cez jquery??
1 0 Moďerný Občan 27.12.2012 17:34:32
Vacsina browserov uz podporuje placeholder pre inputy. A pre tie browsery, ktore placeholder nepodporuju si vies napisat globalny handler (preferujem pri hociakom projekte jQuery bezohladu na velkost projektu). Hlavne pri vacsich projektoch je to lepsie, ako volat nejake funkcie pri focus a blur eventoch pre kazdy input zvlast.

Inak z mojho pohladu je lepsie, ked vyhladavanie na backedne vrati JSON a ja si na frontende "ofarbim" data ako potrebujem.

Ale inak v pohode clanok.
3 1 Milan Dvorský 27.12.2012 13:07:53
rozhodne by som do vyhladavacieho skriptu osetril superglobalnu premennu, hlavne v spojitosti s LIKE prepinacom ... napr.:
$hladame = htmlspecialchars(strip_tags($_GET['hladanyvyraz']));

takto si to aspon kusok osetrime pred SQL injection ...
Zajtra.sk > Programovanie > JS/jQuery > Live vyhľadávanie (AJAX,MySQL)


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama