Ajax v praxi - Kontrola uživatelských jmen
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Ajax v praxi - Kontrola uživatelských jmenAjax v praxi - Kontrola uživatelských jmen

 

Ajax v praxi - Kontrola uživatelských jmen

Google       Google       24. 2. 2009       18 422×

V této části vám ukáži, jak dynamicky kontrolovat, zda-li není uživatelem vybraný nick již používán. To vše ještě před odesláním formuláře.

Reklama
Reklama

Vyřešit tento problém není nikterak obtížné. Tentokrát budeme opět pracovat se scriptovacím jazykem PHP a dokonce i MySQL. Začneme s databází, ať ji máme z krku. Vytvoříme databázi AJAX, do které vložíme tabulku uzivatele o dvou sloupcích - id a nick. A na závěr do tabulky vložíme pár testovacích hodnot.

CREATE DATABASE AJAX;
USE AJAX;
CREATE TABLE uzivatele (
  id mediumint unsigned not null auto_increment,
  nick varchar (50) not null,
  primary key (id)
);
INSERT INTO uzivatele (nick) VALUES ('Karlík');
INSERT INTO uzivatele (nick) VALUES ('Frantík');
INSERT INTO uzivatele (nick) VALUES ('Maruška');
INSERT INTO uzivatele (nick) VALUES ('Lojzík');
INSERT INTO uzivatele (nick) VALUES ('Baruška');

Databázi máme vytvořenou, tudíž přejdeme k HTML, protože je nutné vytvořit prostředí pro vkládání hodnot a zobrazování výsledků. Vystačíme si s jedním input typu text a div pro zobrazení výsledků. Inputu hned přiřadíme událost onChange, což nám zaručí, že se bude dostupnost nicku ověřovat při každé změně zadání. Dále nastavíme atribut name u inputu na stejnou hodnotu jako identifikátor u divu na výsledku, což nám zaručí větší univerzálnost scriptu (vysvětlím později). Dnes vám napíši kompletní html soubor i s odkazem na externím script, do kterého budeme následně psát AJAX.


  
    AJAX kontrola formuláře
    
    
    
  
  
    

Ale ještě než se na samotný AJAX vrhnu, vylepšíme trochu vzhled naší aplikace. V kódu výše jsem již zahrnul odkaz na externí CSS styl, takže se teď zaměříme na něj. Vytvoříme si 2 třídy pro zobrazení barev výsledků a trochu nastylujeme div, do kterého se budou výsledky zobrazovat. Ještě bych podotkl, že musíme hodnotu u atributu visibility nastavit na hidden, aby byl div defaultně skrytý.

div#nick {
  background: white;
  border:1px solid #888888;
  visibility: hidden;
  margin: 10px 0 0 0;
  text-align: center;
  font-family: Verdana, Arial;
  font-size: 0.8em;
  width: 155px
}

span.dobre {
  color: green;
}

span.spatne {
  color: red;
}

A konečně se dostáváme k nejzajímavější fázi - k AJAXovému scriptování. Nejdříve si samozřejmě musíme vytvořit XMLHttpRequestObject, což by pro vás, pokud jste četli i minulé díly, neměl být žádný problém - je to pořád totéž. Dále si vytvoříme pomocnou proměnnou idVysledku, kam budeme načítat atribut name z inputu, který nám udává hodnotu identifikátoru pro div s výsledkem - to proto, abychom mohli tentýž script použít ve více případech. Dále si vytvoříme funkci kontrola() s parametrem policko (v praxi bude parametr nést hodnotu this, protože budeme pracovat s aktuálním prvkem, což už jste si mohli povšimnou v přípravě HTML souboru). Tato funkce bude obsahovat vám již dobře známé metody onReadyStateChange, open() a send(). Metodou open() odešleme do PHP scriptu dvě hodnoty: první bude kontrolovat o jaký proces se jedná (využitelné na větších portálech s více AJAXovými procesy) a hodnotu policko.value, což je nick, který budeme kontrolovat. Metodě onReadyStateChange přiřadíme funkci zmenaHlaseni, která bude kontrolovat úspěch akce readyState (hodnotu 4) a vkládat do divu text, který obdrží z PHP scriptu. Celé to bude vypadat následovně.

var AJAXForms;
var idVysledku;
try { 
  AJAXForms = new XMLHttpRequest(); 
} 
catch (e) { 
  try { 
    AJAXForms = new ActiveXObject("Msxml2.XMLHTTP"); 
  } 
  catch (e) { 
    try { 
      AJAXForms = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (e) { 
      alert("Váš prohlížeč nepodporuje AJAX!"); 
      return false; 
    } 
  } 
}

function kontrola(policko) {
  AJAXForms.onreadystatechange = zmenaHlaseni;
  AJAXForms.open("GET", "kontrola.php?proces=ajax&pole=" + policko.name + "&hodnota=" + policko.value, true);
  idVysledku = policko.name;
  AJAXForms.send(null);
}

function zmenaHlaseni() {
  if (AJAXForms.readyState == 4) { 
    var vysledek = document.getElementById(idVysledku);
    vysledek.innerHTML = AJAXForms.responseText;
    vysledek.style.visibility = "visible"; 
  }
}

Teď už zbývá pouze nachystat soubor kontrola.php. Pro ty z vás, kteří PHP důvěrně znají, to bude opravdová banalita. Začneme podmínkou, která zkontroluje, o který proces jde (v našem případě se jmenuje ajax) a napíšeme si připojení k databázi (funkce mysql_connect() a mysql_select_db()). Následuje velmi jednoduchý dotaz, kde použijeme druhou hodnotu obdrženou od AJAX skriptu a budeme dotaz zpracovávat. Zajímá nás shoda či neshoda s nějakým záznamem v databázi. To se dá lehce zjistit kontrolou funkce mysql_num_rows(). Pokud ponese hodnotu 0, je nick k dispozici, pokud hodnotu 1, tak není. Pomocí podmínky to zjistíme a do spanu odešleme výsledek, který se následně zobrazí uživateli.


  $zprava";

  die();
  
?>

A to je, prosím, závěr. Pokud byste chtěli návod na nějaký další konkrétní problém, napište mi PM zde na portálu nebo na e-mail.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Tomáš BobekAutor je designérem stránek (2D grafika), ovládá jazyky HTML, CSS, PHP, JavaScript a zajímá se o programování v Javě.Krom programujte.com se podílí na projektech maths.cz (jako redaktor a grafik), ceskewebstudio.cz (jako designér) a webber.cz (jako JavaScript scriptař). Ostatní volný čas rád tráví s přáteli nebo sportuje (tenis, nohejbal, hokejbal, závodně fotbal).
Web     Twitter     Facebook    

Nové články

Reklama
Reklama
Obrázek ke článku Blockchain & Bitcoin konference

Blockchain & Bitcoin konference

V pátek 19. 5. 2017 se v pražském konferenčním centru Andel’s konala Blockchain & Bitcoin konference. Řada odborníků a podnikatelů v oboru blockchainu a kryptoměn představila možnosti budoucího směřování tohoto oboru. Speakeři většinou rusky mluvící provenience prezentovali řešení svých firem založená na technologii blockchainu.

Obrázek ke článku Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Bezpečnostní tým Cisco Talos odhalil celkem 4 kampaně dosud neobjeveného malwaru, který dostal jméno KONNI. Ten se dokázal úspěšně maskovat od roku 2014. Zpočátku se malware zaměřoval pouze na krádeže citlivých dat. Za 3 roky se ale několikrát vyvinul, přičemž jeho současná verze umožňuje útočníkovi z infikovaného počítače nejenom krást data, ale i mapovat stisky na klávesnici, pořizovat screenshoty obrazovky či v zařízení spustit libovolný kód. Pro odvedení pozornosti oběti zasílali útočníci v příloze také obrázek, zprávu a výhružkách severokorejského režimu či kontakty na členy mezinárodních organizací.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý