ثبت نام مرحله ای با php یا به اصطلاح wizard (جادویی) ، فیلد های عضویت را به گروه های مختلف تقسیم می کند . این گروه از فیلد ها با تعویض تب ها قابل نمایش هستند . در آموزش قبلی ، یک مثال ساده از ساخت صفحه لاگین و ثبت نام در php را بدون تفکیک مراحل آن یا به اصطلاح جادیی (wizard) را دیدیم .
در این مثال ، ما سه تب برای تفکیک فیلد های فرم داریم . کاربر می تواند با ثبت نام مرحله ای با تکمیل فیلد های تب فعلی به مرحله بعد برود .
فرم HTML ثبت نام مرحله ای
این کد HTML برای نمایش فرم ثبت نام به کاربر استفاده شده است . که شامل سع مرحله است . این فیلد ها بر اساس مراحل آن ها نمایش داده می شوند .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<ul id="registration-step"> <li id="account" class="highlight">Account</li> <li id="password">Credentials</li> <li id="general">General</li> </ul> <form name="frmRegistration" id="registration-form" method="post"> <div id="account-field"> <label>Email</label><span id="email-error" class="registration-error"></span> <div><input type="text" name="email" id="email" class="demoInputBox" /></div> </div> <div id="password-field" style="display:none;"> <label>Enter Password</label><span id="password-error" class="registration-error"></span> <div><input type="password" name="password" id="user-password" class="demoInputBox" /></div> <label>Re-enter Password</label><span id="confirm-password-error" class="registration-error"></span> <div><input type="password" name="confirm-password" id="confirm-password" class="demoInputBox" /></div> </div> <div id="general-field" style="display:none;"> <label>Display Name</label> <div><input type="text" name="display-name" id="display-name" class="demoInputBox"/></div> <label>Gender</label> <div> <select name="gender" id="gender" class="demoInputBox"> <option value="female">Female</option> <option value="male">Male</option> </select></div> </div> <div> <input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;"> <input class="btnAction" type="button" name="next" id="next" value="Next" > <input class="btnAction" type="submit" name="finish" id="finish" value="Finish" style="display:none;"> </div> </form> |
تب های ثبت نام مرحله ای با jQuery
این کدها دکمه های بعد و قبل رفتن برای فرم ثبت نام مرحله ای را کنترل می کند .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$(document).ready(function() { $("#next").click(function(){ var output = validate(); if(output) { var current = $(".highlight"); var next = $(".highlight").next("li"); if(next.length>0) { $("#"+current.attr("id")+"-field").hide(); $("#"+next.attr("id")+"-field").show(); $("#back").show(); $("#finish").hide(); $(".highlight").removeClass("highlight"); next.addClass("highlight"); if($(".highlight").attr("id") == $("li").last().attr("id")) { $("#next").hide(); $("#finish").show(); } } } }); $("#back").click(function(){ var current = $(".highlight"); var prev = $(".highlight").prev("li"); if(prev.length>0) { $("#"+current.attr("id")+"-field").hide(); $("#"+prev.attr("id")+"-field").show(); $("#next").show(); $("#finish").hide(); $(".highlight").removeClass("highlight"); prev.addClass("highlight"); if($(".highlight").attr("id") == $("li").first().attr("id")) { $("#back").hide(); } } }); }); |
ثبت نام کاربر جدید با php و mysql
این کد php برای insert اطلاعات کاربر جدید به دیتابیس استفاده شده است.
|
1 2 3 4 5 6 7 8 9 10 11 |
require_once("dbcontroller.php"); $db_handle = new DBController(); $query = "INSERT INTO users (email, password, display_name, gender) VALUES ('" . $_POST["email"] . "', '" . $_POST["password"] . "', '" . $_POST["display-name"] . "', '" . $_POST["gender"] . "')"; $result = $db_handle->insertQuery($query); if(!empty($result)) { $message = "You have registered successfully!"; unset($_POST); } else { $message = "Problem in registration. Try Again!"; } |
برای آشنایی با اتصال به دیتابیس در php کلیک کنید
ثبت نام مرحله ای با php یا به اصطلاح wizard (جادویی) می توانید بسیار جالب و موثر باشد به خصوص برای این روزها که کاربران رغبت زیادی برای پرکردن فرم های طولانی ثبت نام ندارند . با این کار می توانید کاربران را علاقه مند به پر کردن فرم ثبت نام کنید و یکی از تکنیک های جذب کاربر می باشد .
برای دانلود سورس کد ثبت نام مرحله ای با php از قسمت زیر اقدام کنید
موفق باشید
اون موردی رو که گفتید نمیشه که نمیشه به کاربران بگیم این کارو کنن که . جدا از اون این حالت بلور استاندارد نیست واسه پسورد من موندم پس بقیه وب سایت ها چکار میکنن. باید باهاش راه بیام دیگه راهی نیست فعلا.
بازم تشکر از اینکه وقت میگذارید و راهنمایی می کنید
🙂
سلام من فرم ثبت نام طراحی کردم اما مشکلاتی دارم اول اینکه من قسمتی که اصلا به عنوان نام کاربری نیستش رو مرورگر به عنوان کاربر در نظر می گیره و سوال می کنه برای ذخیره و اگر کاربری اونو ذخیره کنه از روی همون سیستم کاربری دیگه ای بخواد ایجاد بشه مرورگر اون قسمت نامربوط رو خودش از قبل پر کرده حتی پسورد رو اول از همه می خوام که اون text مخصوص که چیز دیگری هست رو شناسایی کنه به عنوان نام کاربر دوم اینکه اگر ذخیره کرد توی قسمت ثبت نام رو پر نکنه یک چیز دیگه اگر بخوام اصلا سوال نکنه که ذخیره کنه باید چکار کنم ممنون میشم کمکم کنید
تشکر
سلام . مقدار autocomplete فرم رو روی off قرار بدید
موفق باشید.
این ویژگی رو میدونستم اما کار نمی کرد واسه یوزر پسورد رفتم گذاشتمش رو form action درست شد دیگه هیچی از فرم کش نمیشه
تشکر آقای شفیعی عزیز من زیاد با شما کار دارم 🙂
اما خدا کنه باز موقه لاگین و ذخیره واسه فرم ثبت نام اتومات کش نشه
بله بازم شد 🙁
اینم تصویرش شاید منظورم رو بهتر متوجه بشید
https://screenshots.firefox.com/RABs9DoUFuEPmoBK/null
این موردیه که مربوط به خود مرورگر هست و نمیشه کاریش کرد که خب یک سری راهکار ها با جاواسکریپت برای گول زدن مرورگر است که خب اونم برای تبدیل فیلد تکست به پسورد است و پیشنهاد نمیشه .
در کل این یک آپشنی در مرورگرها هستش به نام Remember logins for sites در بخش security که میتونید اون رو غیر فعال کنید.
اگر میخواید هیچ موردی ذخیره نشه فیلد پسورد رو تایپ text قرار بدید و اگر میخوایین کمی جالبتر بشه میتونید در این حین یک افکت روی این اینپوت قرار بدید که کدش رو براتون اینجا نوشتم و میتونید استفاده کنید.
موفق باشید.