بررسی شناسه کاربری و طول رمز عبور با کمک آژاکس

دسته‌ها : آموزش, پی اچ پی, جی کوئری علی میرزائی 15 دیدگاه‌ها

بررسی شناسه کاربری و طول رمز عبور با بهره گیری از آژاکس

اول از همه سلام، بعد از یه غیبت نسبتا طولانی در بخش آموزش؛ امروز با یک پست تپلللل، در خدمت همراهان دنیای وردپرس و برنامه نویسی هستیم. :) همونطور که در عنوان اصلی اشاره شد، این نوشته به بررسی شناسه کاربری و قدرت رمز عبور (با استفاده از آژاکس) اختصاص داره و تمامی مراحل کدنویسی -به صورت گام به گام- توضیح داده خواهند شد:

مرحله اول

اولین مرحله ی کار رو با چند دستور ساده sql شروع میکنیم:

SQL

CREATE TABLE IF NOT EXISTS `registration` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

توضیحات:

این مرحله توضیحات مهمی رو نداره… مسلما جداول پایگاه داده شما دیزاینی متفاوت رو دارند و ما در اینجا -تنها برای تست- جدولی رو با نام registration ایجاد کردیم که از رکوردهای ستون name این جدول، در مراحل بعدی استفاده خواهیم کرد. (برای راحتی بیشتر، میتونید قطعه کد sql بالا رو در بخش SQL پایگاه دادتون (در محیط MySQL) اجرا کنید.)


مرحله دوم

در این مرحله، نیاز به چند ورودی و div داریم که میتونیم در یک form ازشون استفاده کنیم:

HTML

<input type="text" autocomplete="off" placeholder="نام کاربری" name="user_name" id="user_id" class="user_name"/>
<span class="check"></span><br/><br/>
<input type="password" autocomplete="off" placeholder="رمز عبور" name="passwd" class="passwd"/>

توضیحات:

  • ورودی اول، شناسه کاربری رو تشکیل میده و در مراحل بعد، از سلکتور کلاس “user_name” این ورودی استفاده میکنیم.
  • کلاس check برای نمایش وضعیت ارسال، تعریف شده و در بخش آژاکس، پیغام هامون رو به این کلاس، اضافه میکنیم.
  • ورودی آخر رو هم با تعریف نوع password و کلاس passwd، برای نمایش طول رمز عبور ایجاد میکنیم.

مرحله سوم

سومین مرحله، فراخوانی کتابخانه ها و استفاده از دستورات آژاکس که کدنویسیش به صورت زیر انجام میشه:

JQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript" src="js/script.min.js"></script>
<script type="text/javascript">
$(function () {
    $('.user_name').keyup(function () {
        var checkname = $(this).val();
        var availname = remove_whitespaces(checkname);
        if (availname != '') {
            $('.check').show();
            $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
            var String = 'username=' + availname;
            $.ajax({
                type: "POST",
                url: "available.php",
                data: String,
                cache: false,
                success: function (result) {
                    var result = remove_whitespaces(result);
                    if (result == '') {
                        $('.check').html('<img src="image/accept.png" /> این شناسه کاملا آزاد است');
                        $(".check").removeClass("red");
                        $('.check').addClass("green");
                        $(".user_name").removeClass("yellow");
                        $(".user_name").addClass("white");
                    } else {
                        $('.check').html('<img src="image/error.png" /> این شناسه قبلا ثبت شده است');
                        $(".check").removeClass("green");
                        $('.check').addClass("red")
                        $(".user_name").removeClass("white");
                        $(".user_name").addClass("yellow");
                    }
                }
            });
        } else {
            $('.check').html('');

        }
    });

    $('.passwd').password_strength(); // to check password strength
});

function remove_whitespaces(str) {
    var str = str.replace(/^\s+|\s+$/, '');
    return str;
}
</script>

توضیحات:

دو دستور اول، به فراخوانی کتابخانه جی کوئری و فایل تابع Password Strength (اسکریپت بررسی طول رمز عبور) میپردازند که حتما باید در صفحه، فراخوانی شده باشند… اما! دستورات اصلی این بخش، از تابع keyup شروع میشه و باید سکلتور کلاس user_name (که در بخش HTML نوشته شد) رو به این تابع، اختصاص بدیم.

نکته اساسی در این فرم، اینه که پیش از زدن دکمه ارسال، اطلاعات بررسی شناسه رو داشته باشیم. به همین خاطر از تابع val جی کوئری، برای گرفتن مقدار ورودی استفاده میکنیم و اون رو در متغیر checkname میریزیم. در ادامه، با استفاده از تابع remove_whitespaces، مقادیر زایدی مثل space رو از ورودی حذف و حاصل رو به متغیر جدیدی با نام availname اضافه میکنیم…
در خط بعد، نوبت به یک شرط ساده میرسه! این شرط با بررسی خالی نبودن متغیر availname (که در پاراگراف قبلی توضیح داده شد)، فضایی رو باز میکنه که در اونجا، کار ارسال و دریافت اطلاعات رو انجام خواهیم داد…

برای زیبا سازی بیشتر -قبل از شروع دستورات آژاکس- به کلاس check، افکت ساده ای رو اضافه میکنیم که حین ارسال اطلاعات، یک تصویر لودینگ انیمیشنی رو نمایش بده. همینطور متغیر String رو با مقدار availname و نام username (جهت ارسال POST) ایجاد میکنیم که مقدار data رو در بخش آژاکسی، تشکیل میده.

و اما، اندر حکایت دستورات بخش آژاکس…
بعد از نوشتن دستور $.ajax، در اولین خط، نوع ارسال رو به صورت POST تعریف میکنیم و محل ارسال رو به فایل available.php (که در مرحله بعد کدهاش رو معرفی میکنم) ارجاع میدیم. data حاوی مقدار String خواهد بود و کش رو هم در اینجا غیر فعال میکنیم.
نمایش وضعیت ارسال، نیاز به بخش success داره که با دریافت result از فایل available.php، در صورت خالی بودن متغیر، پیغام موفقیت و در غیر این صورت پیغام خطای عملیات رو نمایش میده…

تا اینجا، شرط بررسی مقدار availname تموم میشه. فقط مونده یک شرط else که در صورت خالی بودن availname، محتویات کلاس check رو -از مراحل قبل-پاکسازی میکنه.

آخرین توضیح باقی مونده از کد بالا، بررسی قدرت فیلد رمز عبور. این بخش هم کار چندانی نداره! فقط باید سلکتور passwd رو به تابع password_strength اضافه کنیم که با ارجاع به فایل تابع Password Strength، اتوماتیک تمامی کارها رو برامون انجام بده. :)


مرحله چهارم

در مرحله قبل، به بخشی رسیدیم که یک فایل php رو با نام available آدرس دهی کردیم. حالا در مرحله چهارم که آخرین قدم کار رو تشکیل میده، باید این فایل رو ایجاد کنیم:

PHP

<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "";
$mysql_db_database = "test";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $con) or die("Could not select database");

if(isset($_POST['username']) && !empty($_POST['username'])){
$username=strtolower(mysql_real_escape_string($_POST['username']));
$query="select * from registration where LOWER(name)='$username'";
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
$HTML='user exists';
}else{
$HTML='';
}
echo $HTML;
}
?>

توضیحات:

خطوط اول این فایل، ما رو به پایگاه داده و در دنبالش به جدول registration وصل میکنه. (در این بخش باید مشخصات پایگاه داده تون رو وارد کنید.)
اگه مشکلی در اتصال به پایگاه داده وجود نداشته باشه، نوبت به ایجاد شرطی میرسه که با بررسی خالی نبودن مقدار username ارسالی از طرف بخش آژاکس،  اطلاعات دریافتی رو با رکوردهای پایگاه داده مقایسه میکنه و در صورت تطابق، به متغیر $HTML رشته ای رو اضافه میکنه که تأثیرش، در مقدار result (مرحله success در ajax) نمایش داده میشود…

منبع: دنیای وردپرس و برنامه نویسی – www.alimir.ir

برای راحتی کار دوستان، نتیجه تمامی توضیحات داده شده رو در یک فایل ZIP جمع آوری و پیوست کردیم که عزیزان میتونن با دانلود این فایل، علاوه بر سورس کدهای توضیح داده شده، استایل های css رو هم داشته باشند.

دیدگاه کاربران در مورد این نوشته

  1. like داشت اما رو سیستم من مشکل داشت!!!!
    خودم رفتم با pdo حلش کردم شاد باشی

    توسط morTaza پاسخ

    1. ممنون مرتضی عزیز، اتفاقا PDO راه خیلی بهتریه. تابع mysql_connect رو فقط برای سادگی در آموزش استفاده کردم.

      توسط علی میرزائی پاسخ

  2. داداش ایجکس نه آژاکس
    آژاکس باشگاهه ! :)
    مرسی خوب بود

    توسط کاویان پاسخ

    1. ممنون کاویان جان، درسته ولی این یه غلط مصطلحه که در دیدگاه های قبلی هم توضیحش رو داده بودم.

      توسط علی میرزائی پاسخ

  3. سلام
    ببخشید اقا ی میرزایی آژاکس دیگه چیه ؟؟؟ منظورتون همون ای جکسه دیگه ؟؟
    لطفا تصحیح کنید.

    توسط rasha پاسخ

    1. ممنون راشا جان، بله حق با شماست، تلفط “ای جکس” صحیح تره، ولی آژاکس هم به صورت غلط مصطلح شده و میشه ازش استفاده کرد. :) مثلا “سئو” هم یک تلفظ اشتباه دیگست که خیلی وقته جا افتاده و به همین صورت استفاده میشه. 😉

      توسط علی میرزائی پاسخ

  4. سلام داداش اگه بخوایم روی وردپرس پیادش کنیم باید چیزی رو بدیم تغییر بدیم یا از همین میشه استفاده کرد؟؟؟چون در فرم ثبت نامی که برای وردپرس ایجاد کردم اطلاعات کاربر در جدول user وردپرس ثبت میشه.

    توسط علی پاسخ

    1. سلام علی جان، بله باید تغییراتی رو در توابع و نوع اتصال به پایگاه داده (مثل استفاده از کلاس wpdb) ایجاد کنید. ایشالا سر فرصت، یه آموزش مناسب برای بخش وردپرس آماده میکنم 😉

      توسط علی میرزائی پاسخ

  5. سلام ایا امکان داره از این کد در وبلاگ ها استفاده کرد؟؟
    مثلا رزبلاگ

    توسط soft پاسخ

    1. اگه اجازه دسترسی مستقیم به اطلاعات پایگاه داده رو داشته باشید، بله ممکنه. اما در غیر این صورت خیر (در رزبلاگ، مسلما این اجازه رو نمیتونید داشته باشید!).

      توسط علی میرزائی پاسخ

  6. سلام
    علی آقا
    یه مشکل دارم می شه کمکم کنید ؟
    من یه قالب گذاشتم روی سایتم ولی هرکاری می کنم در تایتل صفحه عنوان سایتم رو نشون نمیده و لی در قسمت ادامه مطالب فقط عونان مطلب رو نشون میده .
    مشکلش چیشه چجوری درست می شه ؟
    وقتی هم ازقالب های خود وردپرس استفاده می کنم درسته و مشکلی نداره
    http://www.xum.ir/images/2014/05/16/Untitled-162jVm.jpg

    توسط محمد حسین پاسخ

    1. سلام آقا محمد حسین،
      متنی که در نوار عنوان (title bar) نمایش داده میشه، در واقع همون رشته ایه که شما داخل تگ title (در بخش head سند html) استفاده کردید.
      حالا، مشکل شما هم به این خاطر که این تگ از سند صفحه html اصلیتون حذف شده و به همین دلیل مجبوره که آدرس لینک رو نمایش بده.

      توسط علی میرزائی پاسخ

  7. ممنون دوست عزیز
    مشتاقانه منتظر مطالب بعدیتون هستم

    توسط حسین محمودی پاسخ

    1. خواهش میکنم حسین آقا، قابلی نداشت… {گل}

      توسط علی میرزائی پاسخ

  8. سلام
    دستت شما درد نکنه البته یه چه عجب هم داره ها بعد از مدت ها قرار دادن آیکون و ….!!! :-):-)
    یه سوال دارم چطور میشه ازش برای فرم ثبت نام در وردپرس استفاده کرد؟؟؟راهنمایی می فرمایید

    توسط علی پاسخ

دیدگاه خود را بیان کنید