جلسه اول
طراحی دوفرم 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:
دوستان عزیز! وقتی میگوییم کپی پیست نکنید (مخصوصا افراد مبتدی) بخاطر این است که کدی را که می نویسیم متوجه شوید. در صورت عدم تمایل، کپی پیست کنید هیچ اشکالی ندارد!