آموزش ساخت یک Login و Register با زبان PHP

وضعیت
موضوع بسته شده است.

EhsaanDev

کاربر عضو
30/11/11
421
0
16
localhost:8080
پیشگفتار


اینبار می خواهیم چه کنیم؟

این بار می خواهیم با زبان محبوب PHP یک اسکریپت Login & Register ایجاد کنیم. منظور از Login & Register چیست؟ Login & Register یعنی صفحاتی که در آن کاربرها یا ثبت نام یا وارد می شوند از امکانات ویژه ای بهره ببرند. قصد داشتم قابلیت عضوگیری به صورت VIP (در ازای پرداخت پول) را هم قرار بدهم اما چون هنوز ترمینال آی دی به دستم نرسیده این کار را نکردم.

اسکریپت ما چه قابلیت هایی دارد؟

* استفاده از ReCaptcha برای جلوگیری از اسپم

* ارسال ایمیل فعال سازی

* بازیابی رمز عبور

* آژاکس بودن!

پیشنیازها

* محلول jQuery با jQuery Form

* نیم CC پی اچ پی

* نیم لیتر HTML و CSS

* یک گونی برنامه WAMP یا XAMPP

برنامه ریزی جلسات

جلسه اول: طراحی فرم

جلسه دوم: Ajax کردن فرم

جلسه سوم: ایجاد فرم Register

جلسه چهارم:ایجاد فرم Login و Member Area

جلسه پنجم: جلوگیری از SQL Injection

فعلا تا جلسه اول.

 

EhsaanDev

کاربر عضو
30/11/11
421
0
16
localhost:8080
جلسه اول




طراحی دوفرم Login و Register

برای شروع کار سه فایل در مسیر با نام های (

login.php :: برای درون شدن

register.php :: برای نام نویسی

style.css :: برای شیوه نامه

)

ایجاد کنید. در صورت تمایل یک فایل index.php هم ایجاد کنید و به این دو فایل مهم لینک بدهید.

شیوه نامه ما به صورت زیر است. کپی پیست آزاد :67:

* {
margin:0;
padding:0;
}
html {
font:10pt "Tahoma",Arial,senf-serif;
direction:rtl;
background:#FFF;
text-shadow:1px 1px 1px #cacaca;
}
body {
margin:50px auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border:1px solid #c9c9c9;
width:450px;
}
form {
text-align:center;
}
input,select,textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font:10pt "Tahoma",Arial,senf-serif;
padding:5px;
margin-bottom:7px;
border:1px solid #cacaca;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input:hover,select:hover,textarea:hover {
border:1px solid #7613ae;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input:focus,select:fous,textarea:focus {
border:1px solid #0096ff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="submit"],button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font:10pt "Tahoma",Arial,senf-serif;
padding:5px;
border:1px solid #cacaca;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
background:#cacaca;
color:#FFF;
}
input[type="submit"]:hover,button:hover {
background:#7613ae;
border:1px solid #c9c9c9;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="submit"]::disable,button::disable{
background:#000;
border:1px solid #c9c9c9;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.result {
background:#7613ae;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
padding:5px;
}
img {
border:none;
}​
کد:
حالا فرم درون شدن را می سازیم. فایل login.php را با همان آفتاب پرست نازنازی که چند روز دیگه تولدشه (Notepad++) باز کنید و بریزید کدهای زیر را در آن (کپی پیست ممنوع :33: )


<!DOCTYPE HTML>
<html dir="rtl">
<head>
<title>Login</title>
<meta charset="utf-8" />
<meta name="persianscript" content="iehsan" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<form action="login.php" method="POST">
پست الکترونیکی: <input type="email" name="email" required="required" /><br />
گذرواژه: <input type="password" name="password" required="required" /><br />
<!-- ReCaptcha -->
<input type="submit" name="exec" id="exec" value="ورود" />
</form>
</body>
</html>
کد:
به جای <!-- ReCaptcha --> در جلسه های آتی، فرم Recaptcha قرار خواهد گرفت!!

می بینید ما به جای Username از Email کاربر استفاده می کنیم. در جلسه بعد هم فرممان را آژاکس سازی خواهیم کرد.

نتیجه ما:

You must be registered for see images attach



حالا فرم ثبت نام هم به همین صورت می سازیم. فرقش این است که یک فیلد تایید گذرواژه هم اضافه کنید!

( کدهای زیر برای register.php کپی پیست ممنوع :33: )


کد:
<!DOCTYPE HTML>
<html dir="rtl">
    <head>
        <title>Register</title>
        <meta charset="utf-8" />
        <meta name="persianscript" content="iehsan" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <form action="register.php" method="POST">
            پست الکترونیکی: <input type="email" name="email" required="required" /><br />
            گذرواژه: <input type="password" name="password" required="required" /><br />
            تایید گذرواژه: <input type="password" name="password2" required="Required" /><br />
            <!-- ReCaptcha -->
            <input type="submit" name="exec" id="exec" value="نام نویسی" />
        </form>
    </body>
</html>
این فرم هم مثل همان فرم!

جلسه اولمان به سلامتی تمام شد. جلسه بعد فرمها را تغییر خواهیم داد تا فرممان برای آژاکس سازی آماده و سپس آن را با jquery form آژاکس سازی می کنیم.

:30: :30:پانویس مهم تر از متن! :30: :30:

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







 
آخرین ویرایش توسط مدیر:

EhsaanDev

کاربر عضو
30/11/11
421
0
16
localhost:8080
جلسه دوم - آژاکس سازی فرم




برای شروع آژاکس سازی، دو فایل را با همان آفتاب پرست اوپن سورس یعنی Notepad++ باز کنید. در تگ <head> هر دوفایل کد زیر را اضافه کنید:

<script type="text/javascript" src="http://code.iehsan.ir/jquery.min.js"></script>
<script type="text/javascript" src="http://code.iehsan.ir/jquery.form.js"></script>
<script type="text/javascript" src="form.js"></script>​
کد:
حالا یک فایل با نام form.js بسازید و آن را با N++ (آفتاب پرست خوش تیپ) باز کنید و در آن::


$(document).ready(function() {
var options = {
target: '.result',
beforeSubmit: showRequest,
success: showResponse
};
$('#short').ajaxForm(options);
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
document.getElementById("exec").value="صبر کنيد";
document.getElementById("exec").disable = true;
}
function showResponse(responseText, statusText, xhr, $form) {
$(".result").show();
$(".result").fadeIn(1000);
$(".result").html(responseText);
document.getElementById("exec").value="ارسال شد!";
setTimeout("document.getElementById('exec').value='ارسال'",3000);
}
کد:
حالا برای نشان دادن Response، دوباره هر دو فایل login.php و register.php را باز کنید و در تگ <body> قبل از تگ <form> کد زیر را اضافه کنید:

<div class="result" style="display:none"></div>
کد:
Respone در این لایه قرار میگیرد.

به همین راحتی فرم آژآکس سازی شد.

جلسه بعد ReCaptcha را اضافه خواهیم کرد و فرم Register را هم فعال می کنیم.




 
وضعیت
موضوع بسته شده است.