اسفند ۱۰, ۱۳۹۷ Mostafa بدون دیدگاه

اگر دنبال برنامه نویس برای ساخت افزونه ،قالب،سایت،برنامه ویندوز،اپلیکیشین اندروید،ربات تلگرام و.... هستید ،سفارش برنامه نویسی را مطالعه نمایید.

توجه : درخواست افزونه ،قالب، اسکریپت و نرم افزار و ... و سوالات و مشکلات خود را در انجمن ارسال نمایید

در این پست نمونه کد برای بررسی در دسترس بودن نام کاربری با Jquery بصورت Ajax قرار می دهم که شما می توانید در پروژه های خود قبل ثبت نام از آن استفاده نمایید و با توجه به سیستم خود تغییرات خود را ایجاد نمایید.

۱. ابتدا دیتابیس خود را ایجاد و سپس جدول users را مانند زیر ایجاد نمایید.

CREATE TABLE `users` (
  `id` int(10) NOT NULL PRIMARY KEY AUTO_INCREMENT ,
  `username` varchar(16) NOT NULL UNIQUE,
  `password` varchar(16) NOT NULL ,
);

۲. در فایل config.php خود تنظیمات دیتابیس را همانند زیر ایجاد نمایید.

/**
 * DB Configuration
 */
define('DB_HOST', 'localhost');
define('DB_NAME', 'dbname');
define('DB_USER', 'root');
define('DB_PASS', 'root');
/**
 * Connect and select MySQL DB
 */
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('Could not connect to MySQL server! ') . mysql_error();
$db = mysql_select_db(DB_NAME) or die('Fail to select MySQL DB ') . mysql_error();

۳. حالا فرم خود را ایجاد می کنیم همچنین یک div و یا تگ دلخواه خود برای چاپ اخطارها که در این مثال تگ div با شناسه usernameCheck می باشد.

<!doctype html>
<html lang="en">
<head>
  <title>Live jQuery Ajax Username Availability Check</title>
</head>
<body>
<form action="" method="post">
  <div id="usernameCheck"></div><!--show notification -->
  <div>
    <label><span>Username:</span>
      <input type="text" maxlenght="16" id="username" name="username">
    </label>
  </div>
</form>
</body>
</html>

۴. به سلیقه خود استایلی را برای فرم خود تعریف نمایید.

#usernameCheck{
  display: block;
  width: 24px;
  height: 24px;
  padding: 0px;
  background-repeat: no-repeat;
  background-position: center center;
  float: right;
  margin: 5px;
}
.usernameLoading{
  background: url(gif.gif)
}
.usernameFail{
  background: url(no.png)
}
.usernamePassed{
  background: url(ok.png)
}

۵. با استفاده از jquery بررسی می کنیم در رویداد keyup اگر تعداد کارکتر وارد شده بیشتر از ۳ تا بود آن را برای بررسی به سرور ارسال می نماییم.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var usernameCheck = $('#usernameCheck');
  $('#username').on('keyup', function(){
    var username = $('#username').val();
    if (username.length >= 3) {
      $.ajax({
        type: 'POST',
        cache: 'false',
        data: {username: username}, // form data
        beforeSend: function() {
          // show loading image
          usernameCheck.attr('class', 'usernameLoading');
        },
        success: function(d) {
          if (d == 200) {
            // show ok image
            usernameCheck.attr('class', 'usernamePassed');
          }
          else if (d == 201) {
            // show fail image
            usernameCheck.attr('class', 'usernameFail');
          }
        }
      });
    };
  });
});
</script>

۶.  در فایل php بررسی می کنیم اگر درخواست بصورت Post بود و مقدار ارسال شده Null نبود در دیتابیس بررسی می کنیم آیا نام کاربری با این مقدار وجود دارد و برای هر حالت یک پاسخ ارسال می کنیم.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  include_once('config.php');

  if (!empty($_POST['username'])) {
    # prevent sql injection
    $username = mysql_real_escape_string($_POST['username']);
    # username between 3-16
    if (strlen($username) >= 3) {
      # query users table
      $query = mysql_query("SELECT id FROM users WHERE username = '{$username}'");
      if (mysql_num_rows($query) < 1) {
        echo 200; # username not exist in db
      } else {
        echo 201; # username already exist
      }
    } else {
      echo 201;
    }
  }
  mysql_close($link); 
  return; # stop execution
}

برچسب ها