سلام.
دوستان من میخوام یه صفحه لاگین شبیه دیجیکالا طراحی کنم.
به این صورت که کاربر ابتدا باید کد ملی خود را وارد کند و اگر صحیح بود، input پسورد نمایش داده شود و وقتی پسورد هم به درستی وارد کرد به صفحه موردنظر هدایت شود.
میخوام این کار به صورت ajax انجام شود.
یه سری کدها نوشتم ولی نمیدونم الان مشکل از کجاست. در واقع اگر input کدملی خالی باشد به مرحله بعد میرود و همچنین اگر کدملی و پسورد هم درست باشد دوباره به صفحه لاگین برمیگردد.
ممنون میشم راهنمایی کنید.
کدهای ویو
<div id="loginContainer" class="container">
<div id="cardlogin" class="card" style="width:300px;">
<div class="card-header">
realestate
</div>
<div class="card-body">
<h4 class="card-title">ورود / ثبت نام</h4>
<p class="card-text">کد ملی خود را وارد کنید</p>
<form id="form-data" >
<div class="form-group row">
<div class="col-6">
<input id="textID" type="text" name="idNumber" placeholder="کد ملی خود را وارد کنی">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<input type="submit" name="submit" id="submit" class="btn btn-primary">
</div>
</div>
</form>
</div>
</div>
</div>
<div id="loginContainer2" class="container" style="visibility: hidden">
<div id="cardpassword" class="card" style="width:300px;">
<div class="card-header">
realestate
</div>
<div class="card-body">
<h4 class="card-title">رمز عبور را وارد کنید</h4>
<p class="card-text">رمز عبور حساب کاربری خود را وارد کنید</p>
<form >
<div class="form-group row">
<div class="col-6">
<input id="textid2" type="text" name="idNumber" placeholder="کد ملی خود را وارد کنی">
</div>
</div>
<div class="form-group row">
<div class="col-6">
<input id="textpassword" type="password" name="password" placeholder="زمز عبور خود را وارد کنی">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<input type="submit" name="submit" id="submitpassword" class="btn btn-primary">
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').click(function(e){
e.preventDefault();
var idNumber=$("input[name=idNumber]").val();
$.ajax({
type: "POST",
url:"{{route('InputLogin.post')}}",
data:{idNumber:idNumber },
success:function(data)
{
$('#cardlogin').css('visibility', 'hidden');
$('#loginContainer2').css('visibility', 'visible');
}
});
});
});
</script>
@endsection
کدهای روت
Route::get('InputLogin','Auth\LoginController@ajaxRequest');
Route::post('InputLogin','Auth\LoginController@CheckUsername')->name('InputLogin.post');
کدهای کنترلر
public function username()
{
return 'idNumber';
}
public function ajaxRequest()
{
return view('auth.login');
}
public function CheckUsername(Request $request)
{
$data=$request->all();
dd($data);
$users=DB::table('users')->where('idNumber',$data)->first();
dd($users);
if($users!='')
{
return response()->json($data->idNumber,200);
}
else
{
return view("auth.register");
}
}
خوب شما که هیچ validation ی نذاشتید قبل از ارسال درخواست Ajax. اول چک کنید اگر موبایل وارد نشده بود یا تعداد کاراکترهاش درست نبود یا ... یک ارور بدید و جلوی درخواست Ajax رو بگیرید. مثلا اینجوری:
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').click(function(e){
e.preventDefault();
var idNumber=$("input[name=idNumber]").val();
if(!idNumber || idNumber.length !== 11) {
alert('شماره موبایل وارد نشده / صحیح نیست!');
return;
}
$.ajax({
type: "POST",
url:"{{route('InputLogin.post')}}",
data:{idNumber:idNumber },
success:function(data)
{
$('#cardlogin').css('visibility', 'hidden');
$('#loginContainer2').css('visibility', 'visible');
}
});
});
});
</script>
و اینکه باز در بخش success یعنی بعد از گرفتن پاسخ از سمت سرور باید طبق حالت های مختلفی که ممکنه رخ بده یک سری کارهایی انجام بدید. مثلا اینکه شماره موبایل وارد شده در دیتابیس پیدا نشد یا ...
و اگر همه چیز اوکی بود باید فرم مرحله بعد رو بهش نشون بدید. البته باز باید یک فکری هم به حال این بکنید که چطور در ریکوئست بعدی که کلمه عبور رو میفرسته به شماره موبایل کاربر هم دسترسی داشته باشید که بعد بتونید عملیات Auth رو انجام بدید. شاید یک راهش ذخیره در Session کاربر باشه یا ...
در کل اینکه با وجود زحماتی که کشیدید تا اینجا ولی هنوز بخشی زیادی از کار مونده و اینجا هم نمیشه کل فرایند رو براتون نوشت یا توضیح داد. بهتره خودتون تمام سعیتون رو بکنید و هر جا به مشکل یا سوال برخوردید از دوستان بپرسید.
موفق و پیروز باشید
سلام دوست عزیزمون راست میگه یک فیلم کوتاه توی یوتیوب پیدا کن نگاه کن مثل اینو جستجو کن :
how implement login_page ajax and laravel
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟