Достапност на корисничко име со jQuery и PHP

username proverka

Сигурно при регистрација на многу сајтови имате забележано можност за проверка на достапност на корисничкото име без страната да биде повторно вчитувана.

Во овој туторијал ќе објасниме како ваквата проверка може да се реализира користејќи JavaScript (со jQuery библиотеката) и PHP.

Пример | Симни ги фајловите

Во базата креираме табела во која ќе се зачувуваат корисниците:

create table korisnici (
	id int not null auto_increment,
	korisnickoIme varchar(20),
	primary key (id),
	unique id (id)
)

Во index.html ја поставуваме формата преку која ќе се испраќа барањето и ги вчитуваме JavaScript фајловите.

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

<form id="proverka" action="">
	<label for="korisnickoIme">Корисничко име:</label>
	<input type="text" name="korisnickoIme" id="korisnickoIme" />
	<input type="submit" name="ispratiBaranje" id="ispratiBaranje" value="Провери" />
        <!-- параграф во кој ќе се прикажува резултатот од испратеното барање -->
	<p id="status"></p>
</form>

proverka.js го содржи главниот JavaScript код преку кој ќе се испраќа AJAX барање до proverka.php

$(document).ready(function(){

	// кога ќе се кликне на копчето за испраќање
	$('#ispratiBaranje').click(function() {

			// поставување на некои помошни променливи
			var korisnickoIme = $('#korisnickoIme').val();
			var status        = $('#status');

			// известување дека проверката е во тек
			status.text("Проверка...");

			// проверка дали е внесено корисничко име
			if (korisnickoIme == "") {

				status.text("Внесете го корисничкото име");

			} else {

				// доколку корисничкото име е во ред, се испраќа AJAX барањето
				jQuery.ajax({
					type: "POST",				// метод на испраќање
					url: "proverka.php",			// дестинација
					data: "korisnickoIme="+ korisnickoIme,	// параметри

					// ако барањето е успешно испратено
					success: function(rezultat){

						/*
						   доколку корисничкото име е зафатено
						   ќе се добие резултат 1, во спротивно
						   резултат 0.
						   (подетално околу ова во proverka.php)
						*/

						if (rezultat == 1) {
							status.text("Зафатено.");
						} else {
							status.text("Слободно.");
						}

					}
				});

			}

			// формата се спречува од понатамошно испраќање на податоците
			return false;

	});

});

Во proverka.php се врши проверката дали добиеното корисничко име веќе го има во базата.

$korisnickoIme = $_POST['korisnickoIme'];
$kolku = 0;

// конекција со серверот и избирање на базата
$konekcija = mysql_connect("сервер","корисник","лозинка");
mysql_select_db("име_на_базата", $konekcija);

// проверка дали корисничкото име го има во базата
$lista = mysql_query("SELECT korisnickoIme FROM korisnici WHERE korisnickoIme = '".$korisnickoIme."'");

// ако го има, ќе има 1 ред со тоа корисничко име
$kolku = mysql_num_rows($lista);

// печатење на резултатот
echo $kolku;

Тоа е тоа. Се надевам дека туторијалот ќе ви биде корисен :).

gravatar
Автор: Дејан Ангелов
За авторот:

Веб развивач заинтересиран околу работа со PHP и JavaScript (jQuery). Wanna learn Ruby.

2 Коментари

  1. Имаш две кардинални грешки :

    1. како проверуваш дека навистина е XHR и дали е од твојот домејн?

    2. Имаш SQL injection, XSS, CSRF …

    3. PostBack

    ајт мали !

  2. главно ми беше да се покаже како се испраќа ajax барањето. колку и да се навлегува во детали секогаш ќе има нешто плус да се додаде 😉