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

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Ajax v praxi - Kontrola uživatelských jmen

Google       Google       24. 2. 2009       20 997×

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

Obrázek ke článku Otevřené bankovnictví usnadní život nejen jednotlivcům, ale i firmám.

Otevřené bankovnictví usnadní život nejen jednotlivcům, ale i firmám.

Většina lidí by ráda obsluhovala své bankovní účty z jednoho místa. Díky evropské směrnici o platebních službách PSD2 by se brzy mohlo jednat o realitu. Některé tuzemské banky již služby takzvaného otevřeného bankovnictví umožňují, nejpozději od září by měly svá API rozhraní zpřístupnit vývojářům třetích stran. To otevírá prostor pro fintech firmy a start-upy, ale třeba i vývojáře ERP a fakturačních systémů, kteří by díky propojení svých produktů s bankami významně ulehčili klientům při správě financí.

Reklama
Reklama
Obrázek ke článku Velké srovnání TOP e-shopových řešení!

Velké srovnání TOP e-shopových řešení!

Předmět případové studie je ​středně velký e-shop​ s počtem produktů do 5 000, který chce expandovat na slovenský trh a potřebuje ​druhou jazykovou mutaci v eurech ​na vlastní doméně.

Výběr vhodného systému závisí na mnoha aspektech a měl by být pečlivě zvážen na základě potřeb a konkrétních požadavků plánovaného nebo migrovaného e-shopu.

Obrázek ke článku Master Data Management a jak nám pomůže

Master Data Management a jak nám pomůže

Master Data (česky také kmenová data) jsou data sdílená napříč různými systémy, nemění se příliš často a netransakční. Jedná se o informace o obchodních partnerech, produktech, vlastních pracovnících. Objednávky, faktury, účetní zápisy do této oblasti nespadají.

Obrázek ke článku Startup DoDo zajistí městskou logistiku pro RunCzech

Startup DoDo zajistí městskou logistiku pro RunCzech

Startup DoDo se stává důležitým partnerem RunCzecha na významných běžeckých závodech včetně 25. ročníku Volkswagen Maratonu Praha se bude starat o logistické zázemí. Lídr v oblasti městské logistiky bude mimo jiné zásobovat občerstvovací stanice a pomůže rovněž se zajištěním televizních přenosů ze závodů.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý