صفحه اصلی » آموزش به کمک کد » بررسی وجود نام کاربری بدون رفرش صفحه
username_check

بررسی وجود نام کاربری بدون رفرش صفحه

 

در این آموزش یاد می گیرید که چگونه با استفاده از بکارگیری اسکریپت های jQuery و Ajax و همچنین PHP بتوان بصورت زنده و بدون رفرش صفحه وجود یا عدم وجود نام کاربری را چک نمود. در این مثال بجای $.post از متد $.ajax استفاده شده است. طرز کار این برنامه ساده است بدین صورت که کاربر با تایپ نام کاربری در input box  تابع $.ajax() بصورت پویا یک درخواست HTTP Post را فراخوانی کرده و نام کاربری را به کمک اسکریپت PHP از جدول پایگاه داده MySQL بازخوانی کرده و وجود یا عدم وجود نام کاربری را در همان صفحه نشان می دهد. تمامی این عملیات به کمک رویداد keyup() موجود در متد $.ajax انجام می گیرد. بیایید نگاهی به کدها داشته باشیم:

این آموزش از دو فایل ساده PHP تشکیل شده؛ index.php فایل اصلی می باشد که شامل کدهای jQuery/javascript و فرم ساده HTML است و فایل دومی username-check.php می باشد که بصورت پویا و با استفاده از فراخوانی $.ajax() POST یک درخواست را فرستاده و وجود یا عدم وجود نام کاربری را چک می کند.

ابتدا کد SQL زیر را جهت ایجاد پایگاه داده و جدول را در phpMyAdmin خود Paste کنید:

CREATE TABLE `users` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_name` VARCHAR( 25 ) NOT NULL
) ENGINE = MYISAM ;

 

 

همچنین جهت تست می توانید با استفاده از کدهای زیر چند داده آزمایشی را در جدول درج نمائید:

INSERT INTO `dbtest`.`users` (`id`, `user_name`) VALUES (NULL, 'pradeep'), (NULL, 'CodingCage');

بصورت زیر از تابع $.ajax() استفاده می شود:

$.ajax({    
    type : 'POST',
    url  : 'username-check.php',
    data : $(this).serialize(),
    success : function(data)
    {
    $("#result").html(data);
    }
});

 

 

همچنین کدهای مربوط به تابع $.post() بصورت زیر است:

$.post("username-check.php", $("#reg-form").serialize())
        .done(function(data){
 $("#result").html(data);
});

 

 

فایل Index.php

این فایل شامل کدهای jQuery/javascript و فرم ساده HTML است و  بدین صورت عمل می کند که کاربر با تایپ نام کاربری در input box  تابع $.ajax() بصورت پویا یک درخواست HTTP Post را فراخوانی کرده و نام کاربری را به کمک اسکریپت PHP از جدول پایگاه داده MySQL فراخوانی کرده و وجود یا عدم وجود نام کاربری را در همان صفحه نشان می دهد. تمامی این عملیات به کمک رویداد keyup() موجود در متد $.ajax انجام می گیرد.

index.php   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Username Availability Check using PHP PDO and jQuery</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{    
 $("#name").keyup(function()
 {  
  var name = $(this).val(); 
 
  if(name.length > 3)
  {  
   $("#result").html('checking...');
 
   /*$.post("username-check.php", $("#reg-form").serialize())
    .done(function(data){
    $("#result").html(data);
   });*/
 
   $.ajax({
 
    type : 'POST',
    url  : 'username-check.php',
    data : $(this).serialize(),
    success : function(data)
        {
              $("#result").html(data);
           }
    });
    return false;
 
  }
  else
  {
   $("#result").html('');
  }
 });
 
});
</script>
 
</head>
 
<body>
 
 
<form id="reg-form" action="" method="post" autocomplete="off">
<fieldset>
 <div>
    <input type="text" name="name" id="name" placeholder="Username" />
    <span id="result"></span>
    </div>
</fieldset>
</form>
</body>
</html>

 

فایل username-check.php

یک فایل ساده PHP می باشد که فقط شامل کدهای PHP بوده و در پس زمینه فایل اصلی عمل نموده و تابع $.ajax() را فراخوانی می کند.

<?php
 
  $host="localhost";
  $user="root";
  $pass="";
  $dbname="dbtest";
 
  $dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass);
 
  if($_POST) 
  {
      $name     = strip_tags($_POST['name']);
 
   $stmt=$dbcon->prepare("SELECT user_name FROM users WHERE user_name=:name");
   $stmt->execute(array(':name'=>$name));
   $count=$stmt->rowCount();
 
   if($count>0)
   {
    echo "<span style='color:brown;'>Sorry username already taken !!!</span>";
   }
   else
   {
    echo "<span style='color:green;'>available</span>";
   }
  }
?>

 

 

فایل Style.css

برای قالب دهی نیز از کدهای زیر استفاده شده است:

Style.css   
@charset "utf-8";
/* CSS Document */
 
*{margin:0; padding:0;}
#reg-form
{
 margin:100px auto;
 padding:25px;
 border:solid #cfcfcf 1px;
 width:50%;
 background:#f9f9f9;
}
fieldset
{
 padding:5px;
 width:60%;
 margin:0 auto;
 border:0;
}
input
{
 width:100%;
 height:35px;
 border:solid #00a2d1 1px;
 padding-left:10px;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 font-size:15px;
}
span
{
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 font-size:15px;
}
دانلود سورس کد

درباره بهزاد

باید دنیا را کمی بهتر از آنچه تحویل گرفته ای،تحویل دهی خواه با فرزندی خوب؛ خواه با باغچه ای سرسبز؛ خواه با اندکی بهبود شرایط اجتماعی. و اینکه بدانی اگر حتی فقط یک نفر با بودن تو ساده تر نفس کشیده است، یعنی تو موفق بوده ای...

۲ دیدگاه

  1. سلام
    دستتون درد نکنه اموزش عالی بود
    فقط میشه مثل نام کاربری شماره موبایل و تکراز رمز عبور هم لحظه ای چک بشه؟
    میتونید در این مورد کمکم کنین؟
    تشکر

  2. سلام

    دستتون درد نکنه اموزش عالی بود
    فقط میشه مثل نام کاربری شماره موبایل و تکراز رمز عبور هم لحظه ای چک بشه؟
    میتونید در این مورد کمکم کنین؟

    تشکر

پاسخی بنویسید

آدرس ایمیل شما منتشر نمی شود.فیلدهای الزامی علامت گذاری شده اند. *

*