آموزش ساخت صفحه ورود با php و ajax
در ادامه سری آموزش php و آموزش ajax از سایت پروژه های برنامه نویسی php میخواهیم ، آموزش ساخت صفحه ورود با php و ajax را خدمت شما آموزش بدهیم .
در قسمت قبل از سری آموزشی های php و ajax ، آموزش ساخت صفحه ثبت نام با php و ajax را خدمت شما دوستان ارائه دادیم و در ادامه آموزش ساخت صفحه ورود را ارائه میکنیم که مفید واقع بشود .
مختصر توضیح در مورد AJAX :
اگر تا به حال به طرز کار صفحات وب توجه کرده باشید متوجه می‌شوید که برای نمایش هر صفحه یا هر واکنشی که در سایت رخ میده ، صفحات وب مجدداً بارگذاری (refresh) می‌شوند تا محتوای جدید را نمایش دهند.
تکنولوژی AJAX ایجاد شده تا بدون نیاز به refresh کل صفحه، قسمتی از اطلاعات صفحه بارگذاری شود. در واقع این تکنولوژی به کاربر اجازه میدهد بدون بارگذاری مجدد صفحه، داده‌هایی را به سرور ارسال کند تا در آنجا پردازش شوند. سپس اطلاعات را دریافت و در صفحه وب به نمایش در آورد.
برای ساخت صفحه ورود با php و ajax مراحل 1 تا 5 را با هم پیش میریم :
1 : یک جدول برای نگهداری و خواندن اطلاعات کاربران نیاز داریم تا بتوانیم عملیات لاگین را انجام بدیم ، جدول users را ایجاد میکنیم
CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `firstName` varchar(100) NOT NULL, `lastName` varchar(100) NOT NULL, `userName` varchar(100) NOT NULL, `password` varchar(100) NOT NULL, `email` varchar(50) NOT NULL, `address` varchar(500) NOT NULL, PRIMARY KEY (`id`) );
2 : در مرحله دوم یک فرم html به نام index.html میسازیم و عناصر داخل فرم را مقدار دهی میکنیم :
در این فرم یک سری فایل css و js فراخوانی شده که همشون تو فایل دانلود هستند
<!DOCTYPE html>
<html lang="en">
<head>
<title>آموزش طراحی صفحه ورود با php و ajax </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100">
<span class="login100-form-logo">
<i class="zmdi zmdi-landscape"></i>
</span>
<span class="login100-form-title p-b-34 p-t-27">
آموزش طراحی صفحه ورود با php و ajax
</span>
<div class="wrap-input100 validate-input" data-validate="Enter username">
<input class="input100" type="text" id="username" placeholder="Username">
<span class="focus-input100" data-placeholder=""></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<input class="input100" type="password" id="pass" placeholder="Password">
<span class="focus-input100" data-placeholder=""></span>
</div>
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="rememberMe" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="rememberMe">
Remember me
</label>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn" id="btnLogin">
ورود
</button>
</div>
<div class="result">
<p></p>
</div>
<div class="text-center p-t-90">
<a class="txt1" href="#">
Forgot Password?
</a>
</div>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
<script src="login.js"></script>
</body>
</html>
3 : در این مرحله می خواهیم کدهایی را در فایل connect.php بنویسیم که وظیفه ارتباط با پایگاه داده را بر عهده دارند ، هر جا نیاز باشد که عملیاتی را بر روی پایگاه داده انجام بدیم مانند اضافه کردن کاربر،حذف کاربر و … این فایل را فراخوانی میکنیم .
چرا که پیش نیاز تمام عملیات پایگاه داده ، برقراری ارتباط با پایگاه داده مور نظر هست .
<?php
try {
$connect = new PDO("mysql:host=localhost;dbname=login", "root", "");
$connect->query("Set character set utf8");
} catch (Exception $error) {
echo $error;
}
?>
4: در این مرحله یک فایل جاواسکریپت به نام login.js میسازیم و کدهای زیر را به فایل اضافه میکنیم .
این فایل در صورتی که کاربر بر روی دکمه ورود کلیک کند، فراخوانی و اجرا می شود ، و مقادیر فیلدهای نام کاربری و گذرواژه را از کاربر گرفته و به صفحه ای process.php فرستاده و بعد از پردازش اطلاعات نتیجه را بدون اینکه صفحه دوباره بارگذاری شود ( refresh ) به کاربر نمایش میدهد .
$(document).ready(function (e) {
$("#btnLogin").click(function (e) {
var username = $("#username").val();
var password = $("#pass").val();
var check;
check = $("#rememberMe").is(":checked");
if (check) {
var checked = "remember";
} else {
var checked = "not_remember";
}
$.ajax({
url: 'process.php',
type: "POST",
data: {username: username, password: password, checked: checked},
success: function (data) {
if (data == "Logged_true") {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> جهت ورود به پنل مدیریت بر روی <a href='index.php'>لینک زیر کلیک کنید</a> !");
}
else if (data == "User_notFind") {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> کاربری با مشخصات زیر وجود ندارد !");
} else if (data == "Fields_empty") {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> لطفا نام کاربری و گذرواژه خود را وارد کنید !");
} else {
$(".result").css("display", "block");
$(".result p").html("<i class='fa fa-warning'></i> لطفا با پشتیبانی تماس بگیرید !");
}
}
})
});
});
5 : برای بررسی صحت اطلاعات وارد شده از طرف کاربر یک فایل php با نام process.php ایجاد میکنیم .
در این صفحه ابتدا فایل connect.php را فراخوانی میکنیم تا با ارتباط با پایگاه داده ، عملیات احراز حویت کاربر را انجام بدیم .
از جدول users ردیفی را انتخاب میکنیم که با نام کاربری و گذرواژه ای که کاربر وارد کرده تطابقت داشته باشه ، اگه تطابقت داشته باشه دیگر اطلاعات کاربر مانند نام ، نام خانوادگی و ..
را در سشن ذخیره میکند و به کاربر لینک ورود به پنل مدیریت را نمایش میده ، ولی اگه تطابقت نداشته باشه یعنی ردیفی با این نام کاربری و گذرواژه وجود نداشته باشه به کاربر پیغام میده ” کاربری با مشخصات زیر وجود ندارد ” .
و در صورتی که کاربر فیلدها را خالی فرستاده باشد به کاربر پیغام ” لطفا نام کاربری و گذرواژه خود را وارد کنید ” را نمایش میدهد.
<?php
session_start();
include("connect.php");
if (!empty($_POST['username']) && !empty($_POST['password'])) {
$query_select_user = "select * from users where userName='" . $_POST['username'] . "' && password='" . $_POST['password'] . "'";
$result_select_user = $connect->query($query_select_user);
$fetch_user = $result_select_user->fetch();
if ($fetch_user) {
$_SESSION['firstName'] = $fetch_user['firstName'];
$_SESSION['lastName'] = $fetch_user['lastName'];
$_SESSION['userName'] = $fetch_user['userName'];
$_SESSION['password'] = $fetch_user['password'];
$_SESSION['email'] = $fetch_user['email'];
$_SESSION['address'] = $fetch_user['address'];
echo "Logged_true";
} else {
echo "User_notFind";
}
} else {
echo "Fields_empty";
}
خوشحال میشیم هر سوالی داشته باشید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما خواهیم بود .
موفق و پیروز باشید.
