نظام تسجيل الدخول باستخدام jQuery&PHP

[اميرة عبد الدايم]

بسم الله الرحمن الرحيم

درس بسيط لتصميم وبرمجة نظام تسجيل الدخول باستخدام jQuery&PHP , يمكن من خلاله تسجيل دخول للعضو وفي نفس الوقت تسجيل عضو جديد.
وفي مثالي قمت بشرح مبسط فقط للفكرا ويمكنكم التعديل عليها وربطها بقاعدة بيانات.


وقمت أيضا بتطوير مثال بشكل منسق للتجربة وللعلم المثال مختلف عن الشرح فقمت بتنسيق الكود الذي ساقوم بشرحة الان.


للتجربة يمكنك زيارة الصفحة من هنا (http://www.etsala.net/demo/login)


وفكرة الدرس تتلخص في تصميم نظام تسجيل دخول وتسجيل جديد في ان واحد بدون الانتقال لصفحة اخري.
http://www.traidnt.net/vb/images/imgcache/2015/07/1-22052754-1.jpg



1- أولا سيكون لدينا كود javascript المسئول عن التنقل بين الدخول والاشتراك :

رمز Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>// استدعاء الملف من سيرفر جوجل <script type="text/javascript"> $(document).ready(function() { $('#signup').click(function()// دالة التعريف بمستخدم جديد { $('#password').val(''); $('#login_block').hide(); $('#signup_block').show(); }); $('#login').click(function()// دالة التعريف بمستخدم حالي { $('#newpassword').val(''); $('#signup_block').hide(); $('#login_block').show(); }); }); </script>
2- ثانيا نأتي لكود HTML الخاص بنا:


رمز Code:
<form method="post" action="loginup.php"> <div> <label>البريد الالكتروني</label> <br/> <input type="text" name="email"/><br /> <input type="radio" name="choose" id="login" checked="checked"/> لدي حساب خالي <br /> <input type="radio" name="choose" id="signup"/> تسجيل حساب جديد<br /> </div> <div id="login_block"> <label>كلمة السر</label><br /> <input type="password" name="password" id="password"/><br/> <input type="submit" value=" دخول "/> </div> <div id="signup_block" style="display:none"> <label>اختر كلمة السر</label><br/> <input type="password" name="newpassword" id="newpassword" /><br/> <input type="submit" value=" تسجيل "/> </div> </form>
3- ثالثا ناتي لكود صفحة loginup.php


رمز PHP:
<?php
if($_POST)
{
$email = $_POST['email'];
$password = $_POST['password'];
$newpassword = $_POST['newpassword'];

if($_POST['password'] && $_POST['email'])
{
$sql=mysql_query("SQl select statement");
echo "تم تسجيل دخول العضو بنجاح";
}

else if($_POST['newpassword'] && $_POST['email'])
{
$sql=mysql_query("SQl Insert values statement");
echo "تم تسجيل اشتراك العضو الجديد بنجاح";
}

}
?>

واخير انتهينا ويمكنكم تجربة الدرس في مثال مباشر قمت بتطويرة أيضا بشكل منسق باستخدام CSS


للتجربة يمكنك زيارة الصفحة من هنا (http://www.etsala.net/demo/login)


والحمد لله. والصلاة والسلام علي نبينا محمد (صلي الله علية وسلم).