آموزش MVC | دوره آموزشی MVC در PHP | آموزش PHP و نوشتن به زبان MVC | جزوه آموزشی MVC در PHP و ... همگی اسامی است که می توانید به محتوای این مقاله مرتبط کنید ، در این مقاله آموزشی جامع ما سعی می کنیم به بهترین شکل بصورت جزوه آموزشی به شما برنامه نویسی MVC در PHP را به زبان ساده آموزش بدهیم اما به شما پیشنهاد می کنیم برای یادگیری بهتر به قسمت دوره های آموزشی توسینسو و آموزش PHP بروید و بصورت اصولی و اساسی PHP و MVC را آموزش ببینید.
توی این آموزش میخوام MVC از مبتدی تا جایی که بتونم بهتون آموزش بدم . واسه شروع یه توضیح کوتاه درباره MVC میدم .MVC یه چارچوب یا Framework برای ساخت برنامه های کاربردی وب هست ، که با استفاده از MVC ، برنامه های کاربردی وب نوشته شده دارای قدرت و انعطاف بیشتری هستن و در ضمن پیچیدگی که قبلا توی کدنویسی ایجاد میشد با MVC خیلی کمتر میشه .
برای یادگیری زبان برنامه نویسی پی اچ پی ، می توانید به دوره آموزش PHP در این لینک مراجعه کنید
MVC مخفف Model View Controller هست که Model واسه کار با دیتابیس، پعنی تو این قسمت هرکاری که میخوایم روی دیتابیس انجام بدیم اینجا کدشو مینویسیم، توی قسمت View کدهایی رو مینویسیم که میخوایم توی خروجی نمایش داده بشن، مثلا کدهای قالب وب سایت رو تو این قسمت میزاریم یا اگه یه صفحه ثبت نام توی وب سایتمون داشته باشیم باید توی صفحه ثبت نام از تگهای img , input , ... استفاده کنیم پس واسه اینکه این تگها نمایش داده بشن باید اونارو توی قسمت view بنویسیم
قسمت controller هم کنترل میکنه شرط ها ، توابع ، ورودی و خروجی هارو یعنی موقعی که کاربری چیزی از وب سایتمون درخواست میکنه، اون درخواست ابتدا توسط controller چک میشه و اگه لازم باشه درخواست رو میفرسته به model وگرنه درخواست به view فرستاده میشه، حالا اگه درخواست به Model فرستاده بشه ، model نسبت به درخواستی که کاربر داره روی دیتابیس اعمالی رو انجام میده و نتیجه درخواست رو برمیگردونه به controller و اون هم جواب رو میفرسته به view تا نتیجه به کاربر نمایش داده بده .
توضیح دادن اینا یکم سخته ولی موقعی که به کد نویسی رسیدیم همه چیزو متوجه میشید . من از برنامه 11 DreamWeaver واسه جایی که توش کد نوسی انجام میدیم استفاده میکنم و یه برنامه دیگه به اسم Wamp هم احتیاج دارید که بتونید از برنامه کاربردی خودمون خروجی بگیریم . پس واسه ابتدای کار برنامه DreamWeaver و Wamp نصب و بازشون میکنیم
توی DreamWeaver روی new site کلیک میکنیم و یه برنامه وب جدید درست میکنیم به این صورت که اسم برنامه و مسیرشم وارد میکنید بعد روی servers کلیک میکنید و بعد روی دکمه + کلیک میکنید تا یه صفحه براتون باز بشه ، بعدش تو قست connect using گزینه local//network انتخاب میکنید و مقدار server name و server folder و web url رو به ترتیب اسم برنامه ، مسیر برنامه و http:////127.0.0.1//WebApplicationName قرار میدید (بجای WebApplicationName اسم برنامه خودتونو قرار بدید)
بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .
خوب تگ body بصورت زیر تغییر میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)
میبینید که توی browser کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .
خروجی بصورت زیر نمایش داده میشه .
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد .
ولی الان به این شکل هست ،
پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .
تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه .
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
ErrorDocument 404 //error_pages//404.html
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
Redirect //olddir// http:////www.yourdomain.com//newdir//index.html
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
کد page.php:
ادامه کد:
توی تگ style کدهای css هست (اگه شد بعداً یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن .
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
username:password
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
username:password
username:password
username:password
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
http:////www.htaccesstools.com//htpasswd-generator
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه
اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .
ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید .
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
order allow,deny deny from 123.45.6. allow from all
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
order allow,deny allow from 162.1.1.1 deny from all
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ،
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> welcome </body> </html>
و حالا این کد توی .htaccess مینویسم .
DirectoryIndex index.html
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
خوب حالا اگه کدمونو به این صورت نوشته بودیم
DirectoryIndex index.html index.cgi index.php
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .
6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره) و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
IndexIgnore *.txt
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم
IndexIgnore *.txt *.jpg
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
IndexIgnore *
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
Options +Indexes
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
Options -Indexes
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
http://www.htaccess-guide.com
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
Options -indexes ErrorDocument 401 http://127.0.0.1/PHP-MVC/ ErrorDocument 403 http://127.0.0.1/PHP-MVC/ ErrorDocument 404 http://127.0.0.1/PHP-MVC/ ErrorDocument 500 http://127.0.0.1/PHP-MVC/
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
Options +FollowSymlinks
RewriteEngine on
Options -indexes
ErrorDocument 401 http://127.0.0.1/PHP-MVC/
ErrorDocument 403 http://127.0.0.1/PHP-MVC/
ErrorDocument 404 http://127.0.0.1/PHP-MVC/
ErrorDocument 500 http://127.0.0.1/PHP-MVC/
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ، $(*.)^ یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<?php echo $_GET['url']; ?>
بصورت شکل زیر :
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
echo '<br>'.$_GET['b'];
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید :
<?php
//echo $_GET['url'];
//echo '<br>'.$_GET['b'];
$url = $_GET['url'];
$url = explode('/', $url);
print_r($url);
?>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر / و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<?php
//echo $_GET['url'];
//echo '<br>'.$_GET['b'];
$url = $_GET['url'];
$url = explode('/', $url);
//print_r($url);
if(!file_exists("Controllers/".$url[0].".php"))
{
echo "Not Found Page";
}
?>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<?php
//echo $_GET['url'];
//echo '<br>'.$_GET['b'];
if(!isset($_GET['url']))
{
$url = 'index';
}
else
{
$url = $_GET['url'];
}
$url = explode('/', $url);
//print_r($url);
if(!file_exists("Controllers/".$url[0].".php"))
{
echo "Not Found Page";
}
?>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم .
توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه class استفاده میشه و زمانی که توی کلاسون میخوایم تابع سازنده داشته باشیم باید اسم اون تابع رو ()construct___ بزاریم، در ابتدا یه فایل بنام Bootstrap.php توی فولدر Libs میسازیم. و کدهای زیر توش مینویسیم (در واقع داریم کلاسی بنام Bootstrap ایجاد میکنیم، در ادامه نقش این فایل رو در وب سایتمون میفهمید)
<?php
class Bootstrap
{
function __construct()
{
}
}
حالا کد های php که توی فایل index.php در قسمت قبلی نوشتیمو اضافه میکنیم به فایل Bootstrap و کدهای php صفحه index.php بصورت زیر ویرایش میکنیم :
کدهای Bootstrap :
<?php
class Bootstrap
{
function __construct()
{
if(!isset($_GET['url']))
{
$url = 'index';
}
else
{
$url = $_GET['url'];
}
$url = explode('/', $url);
//print_r($url);
if(!file_exists("Controllers/".$url[0].".php"))
{
echo "Not Found Page";
}
}
}
کدهای php صفحه index.php :
<?php
require("libs/Bootstrap.php");
$app = new Bootstrap();
?>
اگه بخوایم کدهای یه فایل دیگه رو توی یه فایل دیگه استفاده کنیم از تابع require استفاده میکنیم و خط دوم هم یه شی از نوع کلاس Bootstrap میسازه به نام app$ .
خوب باید سه تابع دیگه بنام های Index,About,Login ایجاد کنیم، پس کدهای زیر توی فایل های Index.php , About.php , Login.php که توی فولدر Controllers هستن مینویسیم . (توی قسمتهای قبلی آموزش، این فایل هارو ایجاد کردیم)
کد About.php :
<?php
class About
{
function __construct()
{
echo "<br>Page About ";
}
}
کد Index.php :
<?php
class Index
{
function __construct()
{
echo "<br>Page Index ";
}
}
کد Login.php :
<?php
class Login
{
function __construct()
{
echo "<br>Page Login ";
}
}
خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :
طبق کدی که من توی کلاس About نوشتم باید زمانی که صفحه about باز میشه متن Page About برام چاپ بشه ولی نشد، مشکل کجاست ؟
باید توی کلاس Bootstrap کدی بنویسیم تا برنامه بفهمه زمانی که توی URL آدرس صفحات سایت تایپ میشه، محتویات اون صفحه نمایش داده بشه .
بعد از آخرین دستور If ، یه else اضافه میکنیم که کدش بصورت زیر میشه :
if(!file_exists("Controllers/".$url[0].".php"))
{
echo "Not Found Page";
}
else
{
$file = "controllers/".$url[0].".php";
require($file);
$controller = new $url[0]();
}
کد بالا چک میکنه اگه URL ی بنویسیم که وجود نداره خطا بده، در غیر این صورت صفحه مورد نظر نشون بده و در اینجا مقدار [0]url$ برابر about هست، در نتیجه زمانی که کد اجرا میشه ()about بجای ()[0]url$ قرار میگیره و صفحه about نمایش داده میشه .
میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه url ی وارد کنیم که صفحه ش وجود نداره بهمون خطا میده .
حالا اگه آخر کد Bootstrap و کد About بصورت زیر تغییر بدیم :
کد Bootstrap :
else
{
$file = "controllers/".$url[0].".php";
require($file);
$controller = new $url[0]();
$controller->$url[1]();
}
کد About :
<?php
class About
{
function __construct()
{
echo "<br>Page About ";
}
function AboutMe()
{
echo '<br>........About Me..........<br>';
}
}
اگه URL بصورت زیر وارد کنیم نتیجه اینجوری میشه :
Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .
اگه این سری URL بصورت زیر وارد کنیم :
نتیجه اینه که کلی به ما خطا میده ، کدهای Bootstrap بصورت زیر ویرایش میکنیم تا دیگه بهمون خطا نده .
else
{
$file = "controllers/".$url[0].".php";
require($file);
$controller = new $url[0]();
if(!empty($url[1]))
{
$method_name = $url[1];
if(method_exists($controller, $method_name))
{
$controller->$method_name();
}
else
{
echo "<br>method not found<br>";
}
}
}
تابع empty چک میکنه که آیا مقداری توی متغیر وجود داره یا نه . (با تابع isset فرق میکنه)
یه متغیر بنام methodname$ تعریف کردم و مقدار [1]url$ داخل میریزم و بعد با تابع methodexists چک میکنم که آیا تابعی با این نام (یعنی مقدار داخل method_name$) توی کلاس وجود داره یا نه ؟! اگه وجود داشت تابع رو فراخوانی میکنه وگرنه به ما خطای method not found میده . (توی زبانهای برنامه نویسی دیگه زمانی که میخواستیم به توابعی از یه کلاس دسترسی داشته باشیم بعد از نام اون کلاس کاراکتر "." میزاشتیم و بعد نام تابع، ولی اینجا به جای "." از "<-" استفاده میشه)
خوب حالا اگه خواستیم یه مقدار به تابعی که توی کلاسمون ایجاد کردیم بدیم و اون تابع بر حسب مقداری که بهش دادیم اعمالی رو انجام بده باید کدهارو کمی تغییر بدیم :
تابع Aboutme یا بصورت زیر تغییر میدیم :
function AboutMe($str = false)
{
if($str == true)
{
echo '<br>........'.$str.'..........<br>';
}
else
{
echo '<br>........About Me..........<br>';
}
}
یا هم بصورت زیر :
function AboutMe($str = '')
{
if(empty($str) == false)
{
echo '<br>........'.$str.'..........<br>';
}
else
{
echo '<br>........About Me..........<br>';
}
}
کد Bootstrap :
if(!empty($url[1]))
{
$method_name = $url[1];
if(method_exists($controller, $method_name))
{
if(!empty($url[2]))
{
$parametr = $url[2];
$controller->$method_name($parametr);
}
else
{
$controller->$method_name();
}
}
else
{
echo "<br>method not found<br>";
}
}
یه متغیر بنام parametr$ تعریف کردم، که اگه مقداری توی [2]url$ بود این مقدار ریخته میشه توی متغییر parametr$ و به عنوان پارامتر تابع استفاده میشه .
امیدوارم از این قسمت هم استفاده لازم برده باشید .
خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :
<?php
class Controller
{
function __construct()
{
echo "<br>Main Controller<br>";
}
}
متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)
class Login extends Controller
توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :
<?php
require("libs/Controller.php");
require("libs/Bootstrap.php");
$app = new Bootstrap();
?>
فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه)
function __construct()
{
parent::__construct();
echo "<br>Page Login ";
}
متونستیم بجای اینکه بنویسیم
parent::__construct();
این کد رو بنویسیم (هیچ فرقی نمیکنه)
Controller::__construct();
خوب حالا یه بار دیگه تست میکنیم :
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)
<?php
class View
{
function __construct()
{
echo "<br>we are in page View";
}
}
تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :
function __construct()
{
echo "<br>Main Controller<br>";
$this->view = new View();
}
یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :
<?php
require("libs/Controller.php");
require("libs/view.php");
require("libs/Bootstrap.php");
$app = new Bootstrap();
?>
و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div>
<ul>
<li>
<label>نام کاربری : </label>
<input type="text" id="txt_User" name="txt_User" />
</li>
<li>
<label>رمز عبور : </label>
<input type="text" id="txt_Pass" name="txt_Pass" />
</li>
<li>
<input type="submit" id="btn_Login" name="btn_Login" />
</li>
</ul>
</div>
</body>
</html>
کد Index.php توی فولدر Index :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> ...........Page Index........... </body> </html>
کد Index.php توی فولدر About :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> ...........Page About........... </body> </html>
خوب حالا یه فایل Header.php و Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
require("libs/Controller.php");
require("libs/view.php");
require("libs/Bootstrap.php");
$app = new Bootstrap();
?>
</body>
</html>
کد Footer.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="Footer">
<div>
©Copyright
</div>
</div>
</body>
</html>
کد Header.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="Header">
<div id="MainMenu">
<ul>
<li>
<a href="Index">خانه</a>
</li>
<li>
<a href="Login">ورود</a>
</li>
<li>
<a href="About">درباره</a>
</li>
</ul>
</div>
</div>
</body>
</html>
حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
function __construct()
{
//echo "<br>Main Controller<br>";
$this->view = new View();
}
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<?php
class View
{
function __construct()
{
//echo "<br>we are in page View";
}
function Render($name)
{
require("Views/Header.php");
require("views/".$name.".php");
require("Views/Footer.php");
}
}
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم .
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
function __construct()
{
parent::__construct();
//echo "<br>Page About ";
$this->view->Render("About/index");
}
کد تابع سازنده کلاس Index :
function __construct()
{
parent::__construct();
//echo "<br>Page Index ";
$this->view->Render("Index/index");
}
کد تابع سازنده کلاس Login :
function __construct()
{
parent::__construct();
//echo "<br>Page Login ";
$this->view->Render("Login/index");
}
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .
یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟! در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/Login.css"/>
<title>Login</title>
</head>
<body>
<div id="SingUp">
<ul>
<li id="title">
PHP-MVC
</li>
<li>
<input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
</li>
</ul>
</div>
<br /><br />
<div id="Login">
<div id="textbox">
<ul>
<li>
<input type="text" id="txt_User" name="txt_User" />
</li>
<li>
<input type="text" id="txt_Pass" name="txt_Pass" />
</li>
<li>
<input type="submit" id="btn_Login" name="btn_Login" value="ورود" />
</li>
</ul>
</div>
<div id="label">
<ul>
<li>
<label>نام کاربری : </label>
</li>
<li>
<label>رمز عبور : </label>
</li>
</ul>
</div>
<ul>
<li id="title">
<div>
PHP-MVC Login
</div>
</li>
</ul>
</div>
</body>
</html>
با استفاده از کد زیر (که در بالا اومده)
<link rel="stylesheet" type="text/css" href="CSS/Login.css"/>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
کد Login.css :
#SingUp, #Login
{
border: 1px solid;
margin: 0 auto;
}
#SingUp
{
height: 90px;
}
#Login
{
width: 550px;
}
#SingUp ul, #Login ul
{
list-style: none;
}
#SingUp li
{
float: left;
}
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن )
و حالا یه خروجی دیگه میگیریم :
خوب حالا قسمت هایی رو باید تغییر بدیم :
#SingUp
{
height: 90px;
background-color: #6260b6;
}
#Login
{
width: 550px;
height: 200px;
border: 1px solid;
border-radius: 5px;
border-color: #999;
}
با استفاده از خاصیت border-radius میتونیم گوشه های کادر رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
#SingUp #title
{
font-size: 30px;
font-weight: bold;
color: #FFF;
margin-right: 40px;
margin-left: 100px;
}
#Login #textbox
{
position: absolute;
margin: 45px 0 0 170px;
}
#Login #label
{
position: absolute;
margin: 50px 0 0 80px;
}
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).
یه خروجی میگیریم :
و حالا دوباره یه تغییر کوچیک میدیم :
#SingUp, #Login
{
/*border: 1px solid;*/
margin: 0 auto;
}
خوب حالا این کدهارو هم اضافه میکنیم :
#SingUp #Btn_SingUp
{
background-color: #168500;
border: 1px solid #999;
width: 70px;
height: 30px;
color: #FFF;
font-weight: bold;
cursor: pointer;
}
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست .
کد زیر به قسمت SingUp #title# اضافه میکینم :
text-shadow: 0.5px 0.5px 5px #000;
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
text-shadow: 0px 0px 10px #FFF;
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
#Login ul
{
padding: 0;
}
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
خوب این تکه کد باید تغییر بدیم :
#SingUp li
{
float: left;
margin-top: 20px;
}
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
#Login #title
{
border-bottom: 1px solid #999;
margin: 0 20px 30px 20px;
}
#Login #title div
{
color: #4d279c;
font-weight: bold;
padding-bottom: 5px;
}
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن .
حالا یه خروجی دیگه میگیریم .
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
#Login label
{
color: #615f64;
}
#Login #label li
{
margin-bottom: 5px;
}
#Login #textbox #txt_Pass
{
margin-top: 5px;
}
#Login #textbox #btn_Login
{
margin-top: 12px;
background-color: #005caa;
border: 1px solid #000;
color: #FFF;
width: 50px;
height: 27px;
font-weight: bold;
margin-left: 3px;
}
حالا یه خروجی میگیریم ببینیم چطوری شد:
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
#SingUp, #Login
{
/*border: 1px solid;*/
margin: 0 auto;
}
#SingUp
{
height: 90px;
background-color: #6260b6;
}
#SingUp #Btn_SingUp
{
background-color: #168500;
border: 1px solid #999;
width: 70px;
height: 30px;
color: #FFF;
font-weight: bold;
cursor: pointer;
text-shadow: 0px 0px 10px #FFF;
}
#SingUp #title
{
font-size: 30px;
font-weight: bold;
color: #FFF;
margin-right: 40px;
margin-left: 100px;
text-shadow: 0.5px 0.5px 5px #000;
}
#SingUp ul, #Login ul
{
list-style: none;
}
#SingUp li
{
float: left;
margin-top: 20px;
}
#Login
{
width: 550px;
height: 200px;
border: 1px solid;
border-radius: 5px;
border-color: #999;
}
#Login #textbox
{
position: absolute;
margin: 45px 0 0 170px;
}
#Login #label
{
position: absolute;
margin: 50px 0 0 80px;
}
#Login ul
{
padding: 0;
}
#Login #title
{
border-bottom: 1px solid #999;
margin: 0 20px 30px 20px;
}
#Login #title div
{
color: #4d279c;
font-weight: bold;
padding-bottom: 5px;
}
#Login label
{
color: #615f64;
}
#Login #label li
{
margin-bottom: 5px;
}
#Login #textbox #txt_Pass
{
margin-top: 5px;
}
#Login #textbox #btn_Login
{
margin-top: 12px;
background-color: #005caa;
border: 1px solid #000;
color: #FFF;
width: 50px;
height: 27px;
font-weight: bold;
margin-left: 3px;
}
خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
http:////localhost//phpmyadmin
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام LoginModel.php توی فولدر Models ایجاد میکنیم و کلاس LoginModel توش تعریف میکنیم :
کد Login_Model.php :
<?php
class Login_Model
{
function __construct()
{
}
function run()
{
$link = mysql_connect('localhost', 'root', 'mr_prog');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db('ITPro', $link);
if (!$db_selected) {
die ('Can\'t use user_pass : ' . mysql_error());
}
$user = $_POST["txt_User"];
$pass = md5($_POST["txt_Pass"]);
$sql = "select * from tlb_UserPass where username='{$user}' and password='{$pass}'";
$result = mysql_query($sql);
if (!$result) {
die ('Invalid query : ' . mysql_error());
}
if($row = mysql_fetch_row($result))
{
echo "<br>welcome";
}
else
{
echo "<br>Invalid Username Or Password";
}
die();
}
}
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysqlconnect به phpmyadmin وصل میشیم (در اینجا root و mr_prog به ترتیب یوزر و پسورد اکانت من هست که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysqlselectdb هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysqlfetchrow نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysqlfetchrow تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<?php
class Login extends Controller
{
function __construct()
{
parent::__construct();
$this->view->Render("Login/index");
}
function run()
{
require("models/Login_Model.php");
$L_M = new Login_Model();
$L_M->run();
}
}
که من یه تابع بنام run نوشتم و توش یه شی از کلاس LoginModel ایجاد کردم و تابع run توی کلاس LoginModel فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<form id="form_login" name="form_login" method="post" action="Login/run" >
<div id="Login">
.
.
.
</div>
</form>
خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو admin' or '0'='1 و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو #'alaki' or '1'='1 و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .
خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/Header.css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="Header">
<div id="SingUp">
<ul>
<li id="title">
PHP-MVC
</li>
<li>
<input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
</li>
</ul>
</div>
<div id="MainMenu">
<ul>
<li>
<a href="Index">خانه</a>
</li>
<li>
<a href="Login">ورود</a>
</li>
<li>
<a href="About">درباره</a>
</li>
</ul>
</div>
</div>
</body>
</html>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .
کد header.css :
#Header
{
margin: 0 auto;
background-color: #6260b6;
}
#SingUp
{
margin: 0 auto;
width: 1000px;
height: 80px;
background-color: #6260b6;
}
#SingUp ul
{
list-style: none;
}
#SingUp li
{
float: left;
margin-top: 20px;
}
#SingUp #Btn_SingUp
{
background-color: #168500;
border: 1px solid #999;
width: 70px;
height: 30px;
color: #FFF;
font-weight: bold;
cursor: pointer;
text-shadow: 0px 0px 10px #FFF;
}
#SingUp #title
{
font-size: 30px;
font-weight: bold;
color: #FFF;
margin-right: 40px;
margin-left: 100px;
text-shadow: 0.5px 0.5px 5px #000;
}
کد Login.css :
#Login
{
margin: 0 auto;
width: 550px;
height: 200px;
border: 1px solid;
border-radius: 5px;
border-color: #999;
}
#Login #textbox
{
position: absolute;
margin: 45px 0 0 170px;
}
#Login #label
{
position: absolute;
margin: 50px 0 0 80px;
}
#Login ul
{
padding: 0;
list-style: none;
}
#Login #title
{
border-bottom: 1px solid #999;
margin: 0 20px 30px 20px;
}
#Login #title div
{
color: #4d279c;
font-weight: bold;
padding-bottom: 5px;
}
#Login label
{
color: #615f64;
}
#Login #label li
{
margin-bottom: 5px;
}
#Login #textbox #txt_Pass
{
margin-top: 5px;
}
#Login #textbox #btn_Login
{
margin-top: 12px;
background-color: #005caa;
border: 1px solid #000;
color: #FFF;
width: 50px;
height: 27px;
font-weight: bold;
margin-left: 3px;
}
حالا یه خروجی میگیریم :
خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
#MainMenu
{
margin: 0 auto;
width: 1000px;
background-color: #6260b6;
border: 1px solid #000;
height: 40px
}
#MainMenu li
{
float: right;
margin: 0 10px;
border: 1px solid #000;
text-align: center;
line-height: 30px;
}
#MainMenu ul
{
margin: 0 20px 0 0;
padding: 0;
list-style: none;
}
خروجی رو باهم میبینیم :
حالا این کدهارو هم اضافه میکینم :
#MainMenu a
{
font: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #bdbbbb;
background-color: #3f44a0;
text-decoration: none;
display: block;
width: 80px;
height: 30px;
}
خروجی :
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
#MainMenu a:hover
{
color: #fff;
background-color: #000676;
text-shadow: 0px 0px 5px #fff;
box-shadow: 0 0 20px #9b9b9b;
-moz-box-shadow: 0 0 20px #9b9b9b;
-webkit-box-shadow: 0 0 20px #9b9b9b;
-ms-box-shadow: 0 0 20px #9b9b9b;
-o-box-shadow: 0 0 20px #9b9b9b;
}
خروجی :
خوب میبینید که با موس روی منو "خانه" رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila
webkit واسه google chrome
ms واسه Internet Explorer
o واسه Opera
حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
#MainMenu
{
margin: 0 auto;
width: 1000px;
background-color: #6260b6;
/*border: 1px solid #000;*/
height: 40px
}
#MainMenu li
{
float: right;
margin: 0 10px;
border: 1px solid #9b9b9b;
text-align: center;
line-height: 30px;
}
خروجی میگیریم :
خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
.
.
.
$user = $_POST["txt_User"];
$pass = md5($_POST["txt_Pass"]);
$sql = "select * from tlb_UserPass where username='{$user}' and password='{$pass}'";
die($sql);
.
.
.
خوب الان یه خروجی میگیریم :
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
.
.
.
//$user = $_POST["txt_User"];
//$pass = md5($_POST["txt_Pass"]);
$user = mysql_real_escape_string($_POST["txt_User"]);
$pass = md5(mysql_real_escape_string($_POST["txt_Pass"]));
$sql = "select * from tlb_UserPass where username='{$user}' and password='{$pass}'";
$result = mysql_query($sql);
.
.
.
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
.
.
.
//$user = $_POST["txt_User"];
//$pass = md5($_POST["txt_Pass"]);
$user = mysql_real_escape_string($_POST["txt_User"]);
$pass = md5(mysql_real_escape_string($_POST["txt_Pass"]));
$sql = "select * from tlb_UserPass where username='{$user}' and password='{$pass}'";
die($sql);
.
.
.
خروجی :
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .
با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<?php
define("DB_TYPE", "mysql");
define("DB_HOST", "localhost");
define("DB_NAME", "ITPro");
define("DB_USER", "root");
define("DB_PASS", "mehdi!1230");
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<?php
class Database extends PDO
{
function __construct()
{
parent::__construct(DB_TYPE.":host=".DB_HOST.";dbname=".DB_NAME, DB_USER, DB_PASS);
}
}
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<?php
class Model
{
function __construct()
{
$this->db = new Database();
}
}
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<?php
class Login_Model extends Model
{
function __construct()
{
parent::__construct();
}
function run()
{
/*$link = mysql_connect('localhost', 'root', 'mehdi!1230');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db('ITPro', $link);
if (!$db_selected) {
die ('Can\'t use user_pass : ' . mysql_error());
}*/
$user = $_POST["txt_User"];
$pass = $_POST["txt_Pass"];
//$user = mysql_real_escape_string($_POST["txt_User"]);
//$pass = md5(mysql_real_escape_string($_POST["txt_Pass"]));
//$sql = "select * from tlb_UserPass where username='{$user}' and password='{$pass}'";
//$result = mysql_query($sql);
$qurey = $this->db->prepare("select * from tlb_UserPass where
username = :userlogin and password = md5(:passlogin)");
$qurey->execute(array(":userlogin" => $user, ":passlogin" => $pass));
//die($sql);
$count = $qurey->rowcount();
/*if (!$result) {
die ('Invalid query : ' . mysql_error());
}
if($row = mysql_fetch_row($result))
{
echo "<br>welcome";
}
else
{
echo "<br>Invalid Username Or Password";
}
die();*/
if($count > 0)
{
echo "<br>welcome";
}
else
{
echo "<br>Invalid Username Or Password";
}
}
}
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت) .
کد Index.php :
.
.
.
require("libs/view.php");
require("libs/Model.php");
require("libs/Bootstrap.php");
.
.
.
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
require("Libs/Database.php");
همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
require("Config/database.php");
خروجی میگیریم :
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
.
.
.
$controller = new $url[0]();
$controller->loadModel($url[0]);
if(!empty($url[1]))
.
.
.
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<?php
class Controller
{
function __construct()
{
//echo "<br>Main Controller<br>";
$this->view = new View();
}
function loadModel($name)
{
$path = "models/".$name."_model.php";
if(file_exists($path))
{
require($path);
$ModelName = $name."_model";
$this->model = new $ModelName();
}
}
}
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
function run()
{
//require("models/Login_Model.php");
//$L_M = new Login_Model();
//$L_M->run();
$this->model->run();
}
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
میبینید که داره درست جواب میده .
توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم
و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت JQuery مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم
سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
.
.
.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="JS/JQuery.js"></script>
</head>
.
.
.
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script >
یا
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script >
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید .
خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
$(function()
{
دستورات ...
});
قواعد دستوری در JQuery بصورت زیر هست :
$(selector).action();
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
$("#message").hide();
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
$(selector).event(function()
{
دستورات ...
});
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { } مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت JQuery برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون .
تغییر در کد Index .php (توی فولدر Index) :
.
.
.
<body>
<div id="Reg_News">
<ul>
<li class="right">
<div id="Register">
<ul>
<li id="title">
عضویت در سایت ...!
</li>
<li>
<input type="text" name="txt_Name" id="txt_Name" value="نام" />
<input type="text" name="txt_Family" id="txt_Family" value="نام خانوادگی" />
</li>
<li>
<input type="text" name="_txt_pass" id="_txt_pass" value="رمز عبور" />
</li>
<li>
<input type="text" name="_txt_pass2" id="_txt_pass2" value="تکرار رمز عبور" />
</li>
<li>
<input type="text" dir="rtl" name="txt_Email" id="txt_Email" value="آدرس پست الکترونیکی" />
</li>
<li>
<input type="text" name="txt_Email2" id="txt_Email2" value="تکرار آدرس پست الکترونیکی" />
</li>
<li>
<input name="radio_Sex" type="radio" id="radio_Sex" value="0" />
<label id="lbl_Male">مرد</label>
<input class="radio_FeMale" name="radio_Sex" type="radio" id="radio_Sex" value="1" />
<label id="lbl_Female">زن</label>
</li>
<li>
<input type="text" name="txt_Question" id="txt_Question" value="سوال امنیتی" />
</li>
<li>
<input type="submit" name="btn_Reg" id="btn_Reg" value="ثبت نام" />
</li>
<li>
<label>
<p>
<div>
در صورتی که بر روی دکمه ثبت نام کلیک کنید یعنی شما تایید میکنید
</div>
<div>
که <a href="#Rules">قوانین سایت</a> را مطالعه کرده و پذیرفته اید .
</div>
</p>
</label>
</li>
</ul>
</div>
</li>
<li class="left">
<div id="News">
<ul>
<li>
News1...........
</li>
<li>
News2...........
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
خروجی :
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
.
.
.
<title>Untitled Document</title>
<script type="text/javascript" src="JS/JQuery.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/Register.css"/>
</head>
<body>
.
.
.
فقط تگ <link> اضافه کردم .
کد register.css :
#Register
{
padding: 5px;
width: 600px;
border: 1px solid darkgrey;
direction: rtl;
margin: 100px 0 0 10px;
border-radius: 5px;
}
#News
{
padding: 5px;
width: 500px;
border: 1px solid darkgrey;
direction: rtl;
margin: 100px 0 0 10px;
border-radius: 5px;
}
خروجی :
این خط کد رو به Register# اضافه میکنیم :
text-align:right;
نتیجه :
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
.
.
.
عضویت در سایت ...!
</li>
<li id="fn_ln">
<input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" />
.
.
.
فقط "id="fn_ln اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
#Register #fn_ln
{
width: 500px;
}
#Register #_txt_pass, #Register #_txt_pass2, #Register #txt_Email, #Register #txt_Email2, #Register #txt_Question
{
width: 330px;
}
#Register input, #Register #lbl_Male, #Register #lbl_Female
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
نتیجه :
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
class="borderstyle"
کد Index.php (شبیه زیر):
.
.
.
<li id="title">
عضویت در سایت ...!
</li>
<li id="fn_ln">
<input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" />
<input type="text" name="txt_Family" id="txt_Family"
value="نام خانوادگی" class="borderstyle" />
</li>
<li>
<input type="text" name="_txt_pass" id="_txt_pass" value="رمز عبور" class="borderstyle" />
</li>
<li>
<input type="text" name="_txt_pass2" id="_txt_pass2"
value="تکرار رمز عبور" class="borderstyle" />
</li>
<li>
<input type="text" dir="rtl" name="txt_Email" id="txt_Email"
value="آدرس پست الکترونیکی" class="borderstyle" />
</li>
<li>
<input type="text" name="txt_Email2" id="txt_Email2"
value="تکرار آدرس پست الکترونیکی" class="borderstyle" />
</li>
<li>
<input name="radio_Sex" type="radio" id="radio_Sex" value="0" />
<label id="lbl_Male">مرد</label>
<input class="radio_FeMale" name="radio_Sex" type="radio" id="radio_Sex" value="1" />
<label id="lbl_Female">زن</label>
</li>
<li>
<input type="text" name="txt_Question" id="txt_Question"
value="سوال امنیتی" class="borderstyle" />
</li>
<li>
<input type="submit" name="btn_Reg" id="btn_Reg" value="ثبت نام" />
</li>
<li>
<label>
<p>
<div>
در صورتی که بر روی دکمه ثبت نام کلیک کنید یعنی شما تایید میکنید
</div>
<div>
که <a href="#Rules">قوانین سایت</a> را مطالعه کرده و پذیرفته اید .
</div>
</p>
</label>
</li>
</ul>
</div>
</li>
<li class="left">
.
.
.
حالا تکه کد زیر به register.css اضافه میکنیم :
#Register .borderstyle
{
border: 1px solid darkgrey;
border-radius: 3px;
text-indent: 7px;
padding: 5px 0;
width: 162px;
color: darkgrey;
box-shadow: 0 0 11px #d8d8d8;
-moz-box-shadow: 0 0 11px #d8d8d8;
-webkit-box-shadow: 0 0 11px #d8d8d8;
-ms-box-shadow: 0 0 11px #d8d8d8;
-o-box-shadow: 0 0 11px #d8d8d8;
}
نتیجه :
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
#Register li, #Reg_News li
{
list-style: none;
padding: 0;
margin: 0 0 7px 0;
}
#btn_Reg
{
width: 150px;
padding: 6px;
border: 1px solid black;
background-color: #08a000;
border-radius: 3px;
color: #000;
margin-top: 20px;
font-size: 14px;
}
نتیجه :
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه "ثبت نام" قرار داره رو تغییر میدیم :
#Register label
{
width: 200px;
color: #333;
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
#Register label a
{
margin: 0 5px;
color: red;
text-decoration: none;
text-shadow: 0 2px 3px red;
}
نتیجه :
و یه خورده هم متن "عضویت در سایت ...!" تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
.radio_FeMale
{
margin: 0 40px 0 0;
}
#title
{
font-size: 25px;
margin-bottom: 20px;
margin-right: 10px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #006396;
text-shadow: 0.9px 0.9px 12px #006396;
}
نتیجه :
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
#Reg_News
{
margin: 0 auto;
width: 1200px;
}
#Reg_News li.right
{
float: right;
}
#Reg_News li.left
{
float: left;
}
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left. و right. بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)
نتیجه :
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
.
.
.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/Footer.css"/>
<title>Untitled Document</title>
.
.
.
کد Footer.css :
#Footer
{
margin: 0 auto;
background-color: #6260b6;
height: 300px;
text-align: center;
}
نتیجه :
خوب باید ارتفاع RegNews# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت RegNews# (توی کد register.css) اضافه میکنیم .
height: 600px;
خوب الان یه بار دیگه نتیجه رو میبینیم :
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه) .
کد زیر به Footer.css اضافه میکنیم :
#Footer div
{
padding-top: 250px;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 15px;
}
حالا عرض قسمت Register# تغییر میدیم .
width:530px;
عرض قسمت News# هم تغییر میدیم .
width:450px;
یه خروجی از نتیجه کارمون میگیریم :
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم.
توی قسمت قبلی یه فرم ثبت نام درست کردیم حالا میخوایم این فرم تکمیل کنیم با کمک JQuery .خوب در ابتدا مثل همیشه یه تغییر کوچیک توی سایت میدیم، فاصله بین منوی "درباره" و دکمه "ثبت نام" کمی بیشتر میکنیم . تغییر width در قسمت Reg_News# در فایل Register.css :
width: 1100px;
تغییر width در قسمت SingUp# در فایل Header.css :
width: 1200px;
تغییر margin-left در قسمت SingUp #title# در فایل Header.css :
margin-left: 10px;
تغییر width در قسمت MainMenu# در فایل Header.css :
width: 1200px;
تغییر width و padding در قسمت Register# در فایل Register.css :
padding: 22px; width:490px;
تغییر width در قسمت News# در فایل Register.css :
width: 430px;
تمام فایلهایی که تا الان واسه وب سایت درست کردیم آپلود کردم میتونید از این لینک دانلود کنید .
خروجی :
الان میخوایم زمانی که روی textbox ها کلیک میکنیم متن داخل هر کدوم پاک بشه .یه فابل بنام Register.js توی فولدر Index میسازیم و لینکش میکنیم به فایل Index.php (توی فولدر Index) بصورت زیر و شروع میکنیم به کد نویسی.
<script type="text/javascript" src="views/index/register.js"></script>
$(function()
{
$(".borderstyle").focusin(function()
{
$(this).css("border-color" , "darkgrey");
$(this).css("color" , "black");
if( (($(this).prop("name") == "txt_Name" && $(this).val()=="نام")) ||
(($(this).prop("name") == "txt_Family" && $(this).val()=="نام خانوادگی")) ||
(($(this).prop("name") == "_txt_pass" && $(this).val()=="رمز عبور")) ||
(($(this).prop("name") == "_txt_pass2" && $(this).val()=="تکرار رمز عبور")) ||
(($(this).prop("name") == "txt_Email" && $(this).val()=="آدرس پست الکترونیکی")) ||
(($(this).prop("name") == "txt_Email2" && $(this).val()=="تکرار آدرس پست الکترونیکی")) ||
(($(this).prop("name") == "txt_Question" && $(this).val()=="سوال امنیتی")) )
{
$(this).val("");
}
});
});
کد بالا به ما میگه زمانی که فکوس میکنیم توی تگهایی که نام کلاسشون borderstyle هست، رنگ کادر به رنگ darkgrey (یعنی خاکستری) تغییر کنه (این تغییر واسه اینه که در ادامه میخوایم کدی بنویسیم که زمانی که فوکوس میکنیم به textbox ی و چیزی توش نمی نویسیم و فوکوس ازش میگیریم میخوایم رنگ کادر قرمز بشه پس بخاطر همینه که اینجا رنگشو به خاکستری تغییر میدیم) و رنگ متن هم از رنگ خاکستری (که بصورت پیشفرض گذاشتیم) به رنگ سیاه تغییر کنه .این شرط هم به ما میگه که زمانی که فوکوس میکنیم به شی، اگه اسم اون شی مثلاً txt_Name بود یعنی فوکوس کردیم به کادر متنی که میخوایم توش نام وارد کنیم و حالا اگه مثلاً حاوی "نام" بود یعنی هنوز توی کادر نام چیزی وارد نکردیم درنتیجه هر چی توی کادر نام هست پاک میکنه .واسه اینکه بخوایم با JQuery استایل بدیم به اشیا، بصورت زیر عمل میکنیم .
$("tag name").css("Property" , "value");
با استفاده از تابع ()prop توی JQuery میتونیم به خاصیت های تگها دسترسی داشته باشیم .با استفاده از تابع ()val میتونیم مقداری بریزیم توی شی یا مقدارشو بگیریم ( اشیایی مثل textbox ) . خوب حالا اگه فوکوس از شی برداریم میخوایم کاری کنیم که اگه مقداری توش ننوشتیم دور کادر متن قرمز بشه .
$(".borderstyle").focusout(function()
{
$(this).css("border-color" , "#c30009");
if($(this).prop("name") == "txt_Name" && $(this).val()=="")
{
$(this).val("نام");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "txt_Family" && $(this).val()=="")
{
$(this).val("نام خانوادگی");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "_txt_pass" && $(this).val()=="")
{
$(this).prop("type", "text");
$(this).val("رمز عبور");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "_txt_pass2" && $(this).val()=="")
{
$(this).prop("type", "text");
$(this).val("تکرار رمز عبور");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "txt_Email" && $(this).val()=="")
{
$(this).prop("dir", "rtl");
$(this).val("آدرس پست الکترونیکی");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "txt_Email2" && $(this).val()=="")
{
$(this).prop("dir", "rtl");
$(this).val("تکرار آدرس پست الکترونیکی");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "txt_Question" && $(this).val()=="")
{
$(this).val("سوال امنیتی");
$(this).css("color" , "darkgrey");
}
else
{
$(this).css("color" , "black");
$(this).css("border-color" , "darkgrey");
}
});
کد بالا به ما میگه زمانی که فکوس از یه شی برمیداریم کادر متن به رنگ قرمز تغییر کنه (البته اگه در ادامه شرط اینکه مقداری باید داخل textbox ها باشه درست باشه رنگ کادر به خاکستری تغییر میکنه)، شرط ها شبیه شرط های هستن که در بالاتر توضسح دادم با این تفاوت که این شرط ها طمانی درست هستن که متنی داخل textbox نباشه زمانی که فوکوس برمیداریم، بعضی جاها کدی مثل کد پایی آوردم .
$(this).prop("type", "text");
این کد واسه اینه که مبخوایم به خاصیت type یه شی دسترسی داشته باشیم و مقدارشو به text تغییر بدیم، این خط کد هم واسه کادر های رمزعبور هست که میخوایم زمانی که فوکوس میکنیم به کادر رمزعبور مقدار این خاصیت password بشه (واسه امنیت کلمه عبور) و اگه مقداری توی کادر رمزعبور وارد نکردیم این مقدار به text تغییر کنه .
در جاهایی هم کد زیر رو آوردم :
$(this).prop("dir", "rtl");
این کد هم واسه کادر ایمیل هست و واسه اینه که میخوایم زمانی که فوکوس برمیداریم از این کادر متن (زمانی که حاوی مقدار نیست)، مقدار dir (مخفف direction یعنی جهت) برابر rtl بشه (یعنی جهت نوشتن از راست به چپ) چون زمانی که فوکوس میکنیم میخوایم این مقدار به ltr (یعنی جهت نوشتن از چپ به راست) تغییر کنه .اون else آخر کار هم واسه اینه که میخوایم زمانی که فوکوس از یه کادر متن برمیداریم و این کادر متن حاوی مقداریست، دیگه رنگ دور کادر متن قرمز نباشه .خوب حالا می یایم کدمونو کمی بهتر میکنیم، میخوایم زمانی که فوکوس از کادر رمزعبور برمیداریم اگه مقدار دو کادر متن باهم یکی نبود قرمز بشه . کدهای زیرو به ادامه کدهای قسمت else (که در بالا بود)، اضافه میکنیم .
if($(this).prop("name") == "_txt_pass")
{
if($("#_txt_pass2").val()!="تکرار رمز عبور")
{
if($(this).val() != $("#_txt_pass2").val())
{
$(this).css("border-color" , "#c30009");
}
else
{
$("#_txt_pass2").css("border-color" , "darkgrey");
}
}
}
else if($(this).prop("name") == "_txt_pass2")
{
if($("#_txt_pass").val()!="رمز عبور")
{
if($(this).val() != $("#_txt_pass").val())
{
$(this).css("border-color" , "#c30009");
}
else
{
$("#_txt_pass").css("border-color" , "darkgrey");
}
}
}
شرط اول توی کد بالا به ما میگه اگه کادر متنی که فوکوس کردیم بهش، کادر رمز اولی هست و شرط دوم هم میگه اگه کادر رمز دومی مقدارش "تکرار رمز عبور" نبود (یعنی مقداری توی کادر رمز دومی وارد کردیم) در نتیجه این دو مقدار باهم مقایسه میشن حالا اگه این دو مقدار باهم برابر بودن که دور کادر رمزعبور اولی خاکستری میشه (یعنی همه چی درسته) در غیر این صورت دور کادر رمز اولی قرمز میشه .کدهای else if هم تقریباً به همین صورت هست فقط برعکس بالایی .خوب حالا میخوایم زمانی که فوکوس میکنیم به کادر رمز عبور، خاصیت type این کادر برابر password بشه .
$("#_txt_pass").focusin(function()
{
$(this).prop("type", "password");
});
$("#_txt_pass2").focusin(function()
{
$(this).prop("type", "password");
});
الان میخوایم زمانی که فوکوس میکنیم به کادر ایمیل، خاصیت dir این کادر برابر ltr بشه .
$("#txt_Email").focusin(function()
{
$(this).prop("dir", "ltr");
});
$("#txt_Email2").focusin(function()
{
$(this).prop("dir", "ltr");
});
بعد از این کارا میخوایم کدی بنویسیم تا زمانی که کاربر ایمیل وارد میکنه، سایت چک بکنه که این ایمیل یه ایمیل معتبر هست .شرطی که واسه چک کردن ایمیل مینویسیم اینه که ایمیل باید حداقل کاراکترهای لازم داشته باشه یعنی قبل و بعد از کاراکتر "@" باید حتماً یک کاراکتر باشه، بعد از کاراکترهایی که بعد "@" میاد باید کاراکتر "." بیاد و بعد از این کاراکتر باید حداقل دوتا کاراکتر بنویسیم (یعنی ایمیل سه قسمت داره) به صورت زیر :
[One Character Or More]@[One Character Or More].[Two Character Or More]
خوب یه کدی با php مینویسیم که این کارا واسمون انجام بده ، یه فایل بنام CheckEmail.php توی فولدر Libs ایجاد میکنیم و کدهای زیر توش مینویسیم .
<?php
if(!isset($_POST["Email"]))
{
echo "value is empty";
return;
}
$Email = $_POST["Email"];
$chrList_Email = '/\A([^@\s]+)@(([a-z0-9]+\.)+[a-z]{2,})\Z/i';
if(preg_match($chrList_Email, $Email) == false)
{
echo json_encode("Invalid");
}
else
{
echo json_encode("valid");
}
?>
شرط IF اولی چک میکنه همچین متغیری بنام Email با متد POST فرستاده شده یا نه، سپس اگه وجود داشت مقدارشو توی متغیر Email$ میریزه .متغیر chrList_Email$ هم واسه ایمیل هست، که یه شرط میزاریم و چک میکنیم کاراکترهایی که واسه ایمیل وارد میکنیم با مقدار این متغیر تناقضی وجود نداشته باشه، حالا مفهوم این مقدارا چیه؟
$chrList_Email = '/\A([^@\s]+)@(([a-z0-9]+\.)+[a-z]{2,})\Z/i';
واسه نوشتن باید در ابتدا یه کاراکتر "//" بیاریم و در آخر هم یه "//" بیاریم که در اینجا من در آخر "i/" نوشتم یعنی نمیخوایم به حروف کوچیک و بزرگ حساس باشه.سپس شروطی که میخوایم بنویسیم بین "A\" و "Z\" مینویسیم. اگه بخوایم از یه یا چند کاراکتر جلوگیری کنیم (یعنی این کاراکتر ها جز کاراکترهایی باشن که باعث میشن شرط درست نشه) از کاراکتر "^" استفاده میکنیم.
s\@^ : یعنی هرکاراکتری توی قسمت اول میتونه بیاد ولی نمیخوایم کاراکتر "@" و فاصله توی قسمت باشه .
کاراکتر "+" یعنی حداقل یک کاراکتر باید بیاد .
a-z : فقط کاراکتر کوچیک a تا z .
0-9 : فقط کاراکتر 0 تا 9 .
واسه اینکه تعداد کاراکتر توی شرط هامون بزاریم باید بصورت زیر عمل کنیم .
{min , max}
مثلاً زمانی که اینجوری مینویسیم :
{2, 5}
یعنی باید حداقل 2 کاراکتر و حداکثر 5 کاراکتر وارد کنیم .
و اگه اینجوری ینویسیم :
{3 , }
یعنی حداقل باید سه کاراکتر بنویسیم و اینجا دیگه حداکثر کاراکتر نداریم (یعنی بینهایت کاراکتر)
میتونید از این سایت کمک بگیرید .با استفاده از تابع ()preg__match چک میکنیم که آیا مقدار Email$ با chrList__Email$ همخوانی داره یا نه ، اگه نداشت که با استفاده از تابع ()json__encode مقدار "Invalid" برمیگردونیم و گرنه "valid" برمیگردونه .خوب الان باید یه کد JQuery بنویسیم که رجوع کنه به این کدهای PHP ، پس کد های زیر در ادامه کدهای Else ی که در بالا نوشتیم مینویسیم :
if($(this).prop("name") == "txt_Email")
{
//.......................check email is valid......................//
$.post("libs/CheckEmail.php",
{
Email : $("#txt_Email").val()
}, function(data)
{
if(data == 'Invalid')
{
$("#txt_Email").css("border-color" , "#c30009");
}
else
{
if($("#txt_Email2").val()!="تکرار آدرس پست الکترونیکی")
{
if($("#txt_Email").val() != $("#txt_Email2").val())
{
$("#txt_Email").css("border-color" , "#c30009");
}
else
{
$("#txt_Email2").css("border-color" , "darkgrey");
$("#txt_Email").css("border-color" , "darkgrey");
}
}
}
}, 'json');
//.......................check email is valid......................//
}
else if($(this).prop("name") == "txt_Email2")
{
//.......................check email is valid......................//
$.post("libs/CheckEmail.php",
{
Email : $("#txt_Email2").val()
}, function(data)
{
if(data == 'Invalid')
{
$("#txt_Email2").css("border-color" , "#c30009");
}
else
{
if($("#txt_Email").val()!="آدرس پست الکترونیکی")
{
if($("#txt_Email2").val() != $("#txt_Email").val())
{
$("#txt_Email2").css("border-color" , "#c30009");
}
else
{
$("#txt_Email").css("border-color" , "darkgrey");
$("#txt_Email2").css("border-color" , "darkgrey");
}
}
}
}, 'json');
//.......................check email is valid......................//
}
کد اول واسه کادر ایمیل اولی هست که با استفاده از متد post رجوع میکنه به فایل CheckEmail.php توی فولدر libs .مقدار txtEmail# توی متغیر Email میریزیم تا این مقدار با متد post بفرستیم به فایل CheckEmail.php .با استفاده از شرط IF چک میکنیم که اگه مقدار برگشتی ( که توی متغیر data برگشت داده میشه ) برابر Invalid باشه یعنی ایمیل معتبر نیست پس دور کادر قرمز میشه در غیر اینصورت یعنی ایمیل معتبر هست که اینجا یه شرط دیگه میزاریم که اگه مقدار کادر ایمیل دومی برابر "تکرار آدرس پست الکترونیکی" نبود یعنی مقداری وارد کردیم و باز یه شرط دیگه میزاریم که اگه ایمیل اول با دوم برابر نبود کادر قرمز بشه در غیر اینصورت خاکستری بشه .
کد دومی (که واسه کادر ایمیل دوم هست) هم برعکس کد اولیه .فایلهایی که تا الان واسه وب سایت درست کردیم بهمراه کارایی که تو این آموزش انجام دادیم آپلود کردم میتونید از این |لینک::http://www.mediafire.comdownload274xa4r479vq987/ITPro.irPart2.rar| دانلود کنید .توی قسمت بعدی یه جدول توی دیتابیس میسازیم واسه ذخیره اطلاعات کاربرانی که ثبت نام میکنن ، امیدوارم از این آموزش هم استفاده لازم برده باشید .
تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا دانلود کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
.
.
.
<body>
<div id="WhoLogin">
<div>
<ul>
<li class="Right" id="Login">
<a href="#">ورود</a>
</li>
<li class="Right" id="Username">
<a href="#">نام کاربری</a>
</li>
<li class="Right" id="Letter">
<img src="Pic/Letter.png" />
</li>
<li class="Right" id="Message">
<img src="Pic/warning.png" />
</li>
<li class="Right" id="Post">
<a href="#">ارسال مطالب</a>
</li>
<li class="Left">
<input type="text" id="txt_search" name="txt_search" value="جستجو ..." />
</li>
</ul>
</div>
</div>
<div id="Header">
<div id="SingUp">
.
.
.
در بالا میبینید که من یه تگ div بنام WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
#WhoLogin
{
background-color: #6260b6;
margin: 0 auto;
}
#WhoLogin div
{
margin: 0 auto;
width: 1200px;
height: 40px;
background-color: #6260b6;
direction: rtl;
}
#WhoLogin ul
{
list-style-type: none;
}
#WhoLogin li.Right
{
float: right;
}
#WhoLogin li.Left
{
float: left;
}
خروجی :
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
margin-left: 20px;
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
margin-left: 70px;
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
#WhoLogin li
{
line-height: 40px;
}
بوسیله کد زیر رنگ و فونت و رنگ لینکهای "ورود" و "ارسال مطالب" عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
#WhoLogin li#Login a, #WhoLogin li#Post a
{
text-decoration: none;
color: #CCC;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding: 7px 20px;
border: 1px solid #999;
background-color: #3f44a0;
}
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
#WhoLogin #Message img
{
width: 25px;
margin: 8px 0 0 0;
}
#WhoLogin #Letter img
{
width: 30px;
margin: 7px 0 0 0;
}
خروجی :
خوب الان یه استایل به textbox (جستجو) و لینک "نام کاربری" میدیم ، کدهای زیر اضافه میکنیم .
#WhoLogin #Username a
{
text-decoration: none;
color: #CCC;
font: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}
#WhoLogin #txt_search
{
color: darkgrey;
height: 22px;
width: 230px;
}
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
margin: 0;
خروجی :
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin# .
border-bottom: 1px solid #5d26a0;
یه خروجی میگیریم .
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
:-( مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
min-width: 1200px;
:-) درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
.
.
.
</li>
<li class="Right" id="Letter">
<div id="Num_Letter"><label class="Number">2</label></div>
<img src="Pic/Letter.png" />
</li>
<li class="Right" id="Message">
<div id="Num_Message"><label class="Number">1</label></div>
<img src="Pic/warning.png" />
</li>
<li class="Right" id="Post">
.
.
.
دو تگ <div> بنامهای Num__Letter و Num__Message میسازیم که توشون یه label میزاریم .
خروجی :
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
position: absolute;
}
یه بار دیگه خروجی میگیریم :
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
border: 2px solid green;
کد زیر رو اضافه میکنیم .
#Num_Letter .Number, #Num_Message .Number
{
border: 2px solid red;
}
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter و Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
width: 16px; height: 16px; border: 2px solid #67000a; background-color: #a4000f; text-align: center;
خروجی :
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
padding-right: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #FFF; line-height: 17px;
خروجی :
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
کد زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
border-radius: 50px; margin: 20px 12px 0 0;
خروجی :
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
display: none;
خروجی :
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<div id="SingUp">
<ul>
<li id="title">
ITPro.ir
</li>
<li>
<input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
</li>
<li id="title2">
<a href="https://tosinso.com/">انجمن تخصصی فن آوری اطلاعات ایران</a>
</li>
</ul>
</div>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
#SingUp #title2
{
margin-left: 20px;
}
#SingUp #title2 a
{
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-shadow: 0px 0px 10px #FFF;
}
تغییر قسمت SingUp #title# بصورت زیر :
margin-right: 650px; margin-left: 60px;
تغییر در header.php بصورت زیر :
.
.
.
<div id="WhoLogin">
<div>
<ul>
<li class="Right" id="Login">
<a href="Login">ورود</a>
</li>
<li class="Right" id="Username">
.
.
.
href دکمه ورود برابر Login قرار دادیم .
.
.
.
<div id="MainMenu">
<ul>
<li>
<a href="Index">خانه</a>
</li>
<li>
<a href="#">انجمن</a>
</li>
.
.
.
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href برابر # قرار دادیم .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
CREATE TABLE tbl_InfoUser(ID INT NOT NULL AUTO_INCREMENT,PRIMARY KEY(ID),Username VARCHAR(10) NOT NULL,Name VARCHAR(30) NOT NULL,Family VARCHAR(10) NOT NULL,Email VARCHAR(70) NOT NULL,Sex boolean NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی
خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
min-width: 1200px;
اینم درست شد.
قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
.
.
.
<li class="Right" id="Username">
<div id="MenuDropDown">
<ul>
<li class="EditProfile"><a href="#Profile">صفحه شخصی</a></li>
<li class="Setting"><a href="#Setting">تنظیمات</a></li>
<li class="line"></li>
<li class="Exit"><a href="#Exit">خروج</a></li>
</ul>
</div>
<a href="#">نام کاربری</a>
</li>
.
.
.
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
#Username #MenuDropDown
{
top: 52px;
position: absolute;
width: 105px;
height: auto;
background-color: #FFF;
border: 1px solid #666;
border-radius: 4px;
}
#Username #MenuDropDown li
{
line-height: 30px;
margin: 0;
}
#Username #MenuDropDown ul
{
margin: 0;
padding: 0;
}
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<a href="#" class="Username">نام کاربری</a>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
#WhoLogin #Username a.Username
{
text-decoration: none;
color: #CCC;
.
.
.
در بالا (خط اول) فقط Username. به بعد از a اضافه میکنیم .
الان میایم یه استایل به لینکها میدیم :
#Username #MenuDropDown a
{
height: 30px;
padding-right: 15px;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
#Username #MenuDropDown li.line
{
border-bottom: 1px solid #CCC;
}
#Username #MenuDropDown:after
{
content: "\25b8";
color: #FFF;
font-size: 23px;
width: 7px;
right: 12px;
position: absolute;
top: -27px;
transform: rotate(-90deg);
}
یه border میزاریم و سپس با استفاده از 25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
width: 140px;
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
#Username #MenuDropDown a:hover
{
color: #7c70f4;
font-weight: bold;
text-shadow: 0.5px 0.5px 5px #7c70f4;
}
#Username #MenuDropDown li.EditProfile a:hover
{
border-radius: 3px 3px 0 0;
background-color: #CCC;
}
#Username #MenuDropDown li.Setting a:hover
{
background-color: #CCC;
}
#Username #MenuDropDown li.Exit a:hover
{
border-radius: 0 0 3px 3px;
background-color: #CCC;
}
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت Username #MenuDropDown a# اضافه میکنیم .
transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out;
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت Username #MenuDropDown# اضافه میکنیم تا منو نمایش داده نشه .
display: none;
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$("a.Username").click(function()
{
if ($("#Username #MenuDropDown").is(":visible") == false)
{
$("#Username #MenuDropDown").css("display","inline");
$(document).click(function(e)
{
if(!$(e.target).is('a.Username'))
{
$("#Username #MenuDropDown").css("display","none");
}
});
}
else
{
$("#Username #MenuDropDown").css("display","none");
}
});
});
</script>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
if ($("#Username #MenuDropDown").is(":visible") == false)
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
$(document).click(function(e)
{
if(!$(e.target).is('a.Username'))
{
$("#Username #MenuDropDown").css("display","none");
}
});
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<?php
class Session
{
public static function init()
{
@session_start();
}
public static function IsLogin()
{
Session::init();
if(isset($_SESSION["Login"]))
{
return true;
}
else
{
return false;
}
}
public static function LoginDo($key, $value)
{
Session::init();
$_SESSION[$key] = $value;
}
public static function Logout()
{
session_destroy();
}
}
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
Session::init();
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
$obj = new Session(); $obj->init();
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<?php if(Session::IsLogin()) { ?>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<? } else { ?>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<?php } ?>
یه تغییر هم باید توی header.php بدیم :
.
.
.
<ul>
<?php if(!Session::IsLogin()) {?>
<li class="Right" id="Login">
<a href="Login">ورود</a>
</li>
<?php } else { ?>
<li class="Right" id="Username">
<div id="MenuDropDown">
<ul>
<li class="EditProfile"><a href="#Profile">صفحه شخصی</a></li>
<li class="Setting"><a href="#Setting">تنظیمات</a></li>
<li class="line"></li>
<li class="Exit"><a href="#Exit">خروج</a></li>
</ul>
</div>
<a href="#" class="Username">نام کاربری</a>
</li>
<li class="Right" id="Letter">
<div id="Num_Letter"><label class="Number">2</label></div>
<img src="Pic/Letter.png" />
</li>
<li class="Right" id="Message">
<div id="Num_Message"><label class="Number">1</label></div>
<img src="Pic/warning.png" />
</li>
<li class="Right" id="Post">
<a href="#">ارسال مطالب</a>
</li>
<?php } ?>
<li class="Left">
<input type="text" id="txt_search" name="txt_search" value="جستجو ..." />
</li>
</ul>
</div>
</div>
<div id="Header">
<div id="SingUp">
<ul>
<li id="title">
ITPro.ir
</li>
<?php if(!Session::IsLogin()) {?>
<li>
<input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
</li>
<?php } ?>
<li id="title2">
.
.
.
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل Login__Model.php پیدا کنید و بصورت زیر تغییرش بدید .
.
.
.
if($count > 0)
{
//echo "<br>welcome";
Session::LoginDo("Login", "success");
header("location: ../index");
}
else
{
//echo "<br>Invalid Username Or Password";
header("location: ../login");
}
.
.
.
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
require("libs/Session.php");
خوب الان یه خروجی میگیریم ببینیم چطور شد .
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
حالا میخوایم زمان ورود به سایت به جای نمایش "نام کاربری" نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
public static function LoginDo($key, $value, $username)
{
Session::init();
$_SESSION[$key] = $value;
$_SESSION["Uname"] = $username;
}
و تابع زیر اضافه میکنیم :
public static function GetUserLogin()
{
return $_SESSION["Uname"];
}
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<a href="#" class="Username"><?php echo Session::GetUserLogin(); ?></a>
شرط زیر رو توی فایل Login__Model.php پیدا کنید و بصورت زیر تغییرش بدید .
if($count > 0)
{
Session::LoginDo("Login", "success", $user);
header("location: ../index");
//echo "<br>welcome";
}
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .
تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
کد sql جدول شهر :
CREATE TABLE tbl_City(Name VARCHAR(30) NOT NULL,NO VARCHAR(3) NOT NULL, NO_Province VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
کد sql جدول تنظیمات کاربر :
CREATE TABLE tbl_SettingUser(Username VARCHAR(10) NOT NULL, Locked boolean NOT NULL, ReceiveEmail boolean NOT NULL, ShowEmail boolean NOT NULL, ShowAge boolean NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<li>
<input type="text" name="txt_username" id="txt_username" value="نام کاربری" class="borderstyle" />
</li>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
$(".borderstyle").focusin(function()
{
$(this).css("border-color" , "darkgrey");
$(this).css("color" , "black");
if( (($(this).prop("name") == "txt_Name" && $(this).val()=="نام")) ||
(($(this).prop("name") == "txt_Family" && $(this).val()=="نام خانوادگی")) ||
(($(this).prop("name") == "_txt_pass" && $(this).val()=="رمز عبور")) ||
(($(this).prop("name") == "_txt_pass2" && $(this).val()=="تکرار رمز عبور")) ||
(($(this).prop("name") == "txt_Email" && $(this).val()=="آدرس پست الکترونیکی")) ||
(($(this).prop("name") == "txt_Email2" && $(this).val()=="تکرار آدرس پست الکترونیکی")) ||
(($(this).prop("name") == "txt_Question" && $(this).val()=="سوال امنیتی")) ||
(($(this).prop("name") == "txt_username" && $(this).val()=="نام کاربری")) )
{
$(this).val("");
}
});
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
.
.
.
$(".borderstyle").focusout(function()
{
$(this).css("border-color" , "#c30009");
if($(this).prop("name") == "txt_Name" && $(this).val()=="")
{
$(this).val("نام");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "txt_username" && $(this).val()=="")
{
$(this).val("نام کاربری");
$(this).css("color" , "darkgrey");
}
else if($(this).prop("name") == "txt_Family" && $(this).val()=="")
{
.
.
.
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
.
.
.
else
{
$("#_txt_pass2").css("border-color" , "darkgrey");
}
}
}
else if($(this).prop("name") == "txt_username")
{
if($("#txt_username").val()!="نام کاربری")
{
$.post("libs/checkuser.php",
{
"username" : $(this).val()
},function(response)
{
if(response == "NotExist")
{
alert($("#txt_username").val()+" Is NotExist");
}
else
{
alert($("#txt_username").val()+" Is Exist");
}
});
}
}
else if($(this).prop("name") == "_txt_pass2")
{
.
.
.
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<?php
if(!isset($_POST["username"]))
{
echo "value is empty";
return;
}
$username = htmlspecialchars($_POST["username"]);
$dbase = new PDO("mysql: host=localhost; dbname=ITPro", "root", "mehdi!1230");
$qurey = $dbase->prepare("select id from tlb_userpass where Username = :userlogin");
$qurey->execute(array(":userlogin" => $username));
$count = $qurey->rowcount();
if($count > 0)
{
echo "Exist";
}
else
echo "NotExist";
یه خروجی از کارمون میگیریم .
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) )
.
.
.
<li>
<input type="text" name="txt_username" id="txt_username" value="نام کاربری" class="borderstyle" />
<div id="NotExist">نام کاربری که انتخاب کرده اید
مجاز است و در حال حاضر توسط شخص دیگری بکار برده نمی شود.</div>
<div id="Exist">این نام کاربری قبلا توسط شخص دیگری ثبت شده است،
اگر رمزعبور خور را فراموش کرده اید این <a id="ForgetPass" href="#ForgetPass">اینجا</a> کلیک کنید</div>
</li>
.
.
.
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
#Register #Exist, #Register #NotExist
{
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-size: 12px;
font-weight: bold;
padding: 7px;
}
#Register #Exist
{
color: #D14343;
}
#Register #NotExist
{
color: #37A626;
}
#Register #Exist a
{
padding: 0 3px;
color: #000;
text-decoration: none;
}
#Register #Exist a:hover
{
text-decoration: underline;
}
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
$("#Exist").hide();
$("#NotExist").hide();
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و 13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
.
.
.
if(response == "NotExist")
{
$("#Exist").hide();
$("#NotExist").show();
//alert($("#txt_username").val()+" Is NotExist");
}
else
{
$("#NotExist").hide();
$("#Exist").show();
//alert($("#txt_username").val()+" Is Exist");
}
.
.
.
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
.
.
.
else if($(this).prop("name") == "txt_username" && $(this).val()=="")
{
$(this).val("نام کاربری");
$(this).css("color" , "darkgrey");
$("#Exist").hide();
$("#NotExist").hide();
}
.
.
.
یه نام کاربری که وجود نداره وارد میکنیم .
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
و حالا هم هیچی وارد نمیکنیم در نتیجه اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
#Register #txt_username
{
width: 330px;
}
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .
تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن "سوال امنیتی" کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن "سوال امنیتی" برمی داره این تصویر مخفی بشه .کنار کادر متن "سوال امنیتی" یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن "سوال امنیتی" به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .لینک دانلود عکس
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
.
.
.
<label id="lbl_Female">زن</label>
</li>
<li>
<div id="canvas">
<img class="refresh" src="Pic/refresh2.png" />
<canvas id="canvasid"></canvas>
</div>
<input type="text" name="txt_Question" id="txt_Question"
value="سوال امنیتی" class="borderstyle" />
</li>
.
.
.
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
body
{
background:#EEE;
}
سپس کدای زیرو هم به register.css اضافه میکنیم .
#Register #canvas
{
position: absolute;
margin: -3px 340px 0 0;
background-color: #fff;
width: 100px;
height: 23px;
border: 1px solid #D5191C;
border-radius: 5px;
padding: 5px 10px;
}
#Register #canvasid
{
margin: 0 15px 0 0;
width: 75px;
height: 15px;
padding: 3px 6px;
}
#Register .refresh
{
position: absolute;
width: 17px;
height: 17px;
cursor: pointer;
margin: 3px -5px 0 0;
}
خروجی از کارمون :
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت Register .refresh# اضافه میکنیم .
transition: transform 700ms ease-in-out; -webkit-transition: -webkit-transform 700ms ease-in-out; -moz-transition: -moz-transform 700ms ease-in-out; -ms-transition: -ms-transition 700ms ease-in-out; -o-transition: -o-transform 700ms ease-in-out;
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت Register #canvas# اضافه میکنیم .
box-shadow: 0 0 11px #D5191C; -moz-box-shadow: 0 0 11px #D5191C; -webkit-box-shadow: 0 0 11px #D5191C; -ms-box-shadow: 0 0 11px #D5191C; -o-box-shadow: 0 0 11px #D5191C;
سپس کدای زیرو اضافه میکنیم .
#Register .refresh:hover
{
/* Safari */
-webkit-transform: rotate(360deg);
/* Firefox */
-moz-transform: rotate(360deg);
/* IE */
-ms-transform: rotate(360deg);
/* Opera */
-o-transform: rotate(360deg);
}
360 درجه عکسو میچرخونیم .
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام ()CreateSecurityCode :
function CreateSecurityCode()
{
Num1 = GetRandom(111, 999);
CodeChar1 = GetRandom(97, 122);
CodeChar2 = GetRandom(65, 90);
CodeChar3 = GetRandom(97, 122);
Num2 = GetRandom(11, 99);
Code = Num2 + String.fromCharCode(CodeChar1, CodeChar2) + Num1 + String.fromCharCode(CodeChar3);
return Code;
}
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
function GetRandom(MinNumber, MaxNumber)
{
return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
}
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
$(".refresh").click(function()
{
$("#canvas #canvasid").remove();
_canvas = '<canvas id="canvasid" width="75" height="15"></canvas>';
$("#canvas").append(_canvas);
var canvas = $("#canvas").find("#canvasid")[0];
var context = canvas.getContext('2d');
context.font = '16px Calibri';
context.fillStyle = 'blue';
code = CreateSecurityCode();
context.fillText(code,75,12);
});
اون تگ canvas که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم . با استفاده از تابع fillText (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط " } ()function)$ " )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
$("#Register .refresh").load(function(){
$(".refresh").click();
});
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن "سوال امنیتی" ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
$("#Register #txt_Question").focusin(function()
{
$("#Register #canvas").css("display","inline");
$(document).click(function(e)
{
if(!$(e.target).is('#Register #txt_Question'))
{
if(!$(e.target).is('#Register .refresh'))
{
if(!$(e.target).is('#Register #canvas'))
{
if(!$(e.target).is('#Register #canvasid'))
{
$("#Register #canvas").css("display","none");
}
}
}
}
});
});
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن "سوال امنیتی" و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن "سوال امنیتی" و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت Register #canvas# اضافه میکنیم .
display: none;
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
.
.
.
else if($(this).prop("name") == "txt_Question" && $(this).val()=="")
{
$(this).val("سوال امنیتی");
$(this).css("color" , "darkgrey");
}
else
{
$(this).css("color" , "black");
if($(this).prop("name") == "txt_Question")
{
if($("#Register #txt_Question").val().toLowerCase() == code.toLowerCase())
{
$(this).css("border-color" , "#23AA09");
}
else
{
$(this).css("border-color" , "#c30009");
}
}
else
{
$(this).css("border-color" , "darkgrey");
}
if($(this).prop("name") == "_txt_pass")
.
.
.
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید
تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن "سوال امنیتی" به رنگ سبز تغییر میکنه و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن "سوال امنیتی" همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه .
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
.
.
.
$(".refresh").click(function()
{
if($('#Register #txt_Question').val() != 'سوال امنیتی')
{
$('#Register #txt_Question').css("border-color" , "#c30009");
}
$("#canvas #canvasid").remove();
.
.
.
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register# کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
padding: 25px 35px;
و بجای کد بالا، کد زیرو مینویسیم :
width:540px;
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
width: 520px;
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
#Reg_News ul
{
padding: 0;
}
#Register ul
{
margin: 30px 50px 30px 0;
}
یه تغییر هم توی قسمت Reg_News# میدیم :
#Reg_News
{
margin: 0 auto;
width: 1200px;
height: 700px;
direction: rtl;
}
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
padding: 0; margin: 0 0 7px 0;
و بجای کدای بالا ، کد زیر مینویسیم :
margin-bottom: 7px;
مشکل سایتمون برطرف شد .
اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر کدای این تابع ()a.Username").click")$ (که توی فایل header.php نوشتیم) این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
return false;
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .لینک دانلود
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<?php
class Profile extends controller
{
function __construct()
{
parent::__construct();
$this->view->Render("Profile/index");
}
}
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک "صفحه شخصی" که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
.
.
.
<div id="MenuDropDown">
<ul>
<li class="EditProfile"><a href="Profile<?php
echo '\\'.Session::GetUserLogin(); ?>">صفحه شخصی</a></li>
.
.
.
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>پروفایل</title>
<script type="text/javascript" src="../JS/JQuery.js"></script>
<script type="text/javascript" src="../JS/jquery.tools.min.js"></script>
<script type="text/javascript" src="../Views/Profile/Profile.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/Profile.css">
</head>
<body>
<div id="i_cover">
<img src="#" class="img_cover" />
</div>
<div id="menu_cover">
<ul>
<li class="Profile">
<img src="#" class="img_Profile" />
</li>
<li class="username">
<label><?php if(Session::IsLogin()) echo Session::GetUserLogin(); ?></label>
</li>
<li class="btn_imgCover">
<label>تصویر کاور</label>
</li>
<li class="btn_imgProfile">
<label>تصویر پروفایل</label>
</li>
</ul>
</div>
<div id="box_profile">
<div id="_Profile">
<ul>
<li id="RightProfile">
<ul id="Sector">
<li class="_title">
<div id="NO">0</div>
<label>پیام های خصوصی</label>
</li>
<li class="content">
<ul>
<li class="item"><a href="#SendMassage">ارسال پیام</a></li>
<li class="line"></li>
<li class="item"><label>پیام های ارسالی : </label></li>
<li class="item"><label>پیام های دریافتی : </label></li>
<li class="line"></li>
<li class="item"><a href="#FollowMassage">پیگیری پیام خصوصی</a></li>
</ul>
</li>
</ul>
<ul id="Sector">
<li class="_title"><label>اطلاعات کاربری</label></li>
<li class="content">
<ul>
<li class="item"><label>امتیاز : </label></li>
<li class="item"><label>نوع کاربری : </label></li>
<li class="line"></li>
<li class="item"><label>تاریخ عضویت : </label></li>
<li class="line"></li>
<li class="item"><label>تاریخ و زمان آخرین فعالیت : </label></li>
<li class="item"><label>تاریخ و زمان آخرین بازدید : </label></li>
</ul>
</li>
</ul>
<ul id="Sector">
<li class="_title"><label>تنظیمات</label></li>
<li class="content">
<ul>
<li class="item"><a href="#ChangePass">تغییر پسورد</a></li>
<li class="line"></li>
<li class="item"><a href="#ChangePic">ویرایش عکس شخصی</a></li>
<li class="item"><a href="#ChangeBlacklist">ویرایش لیست سیاه</a></li>
</ul>
</li>
</ul>
<ul id="Sector">
<li class="_title">
<div id="NO">0</div>
<label>دوستان</label>
</li>
<li class="content">
</li>
</ul>
</li>
<li id="ContentProfile">
<div id="MenuProfile">
<ul>
<li id="InfoUser" class="selected">
<a href="#InfoUser">اطلاعات عمومی</a>
</li>
<li id="Massage">
<a href="#Massage">پیام ها</a>
</li>
<li id="Entries">
<a href="#Entries">مطالب</a>
</li>
<li id="Setting">
<a href="#Entries">تنظیمات</a>
</li>
</ul>
</div>
<div class="line"></div>
<div class="content">
<div class="InfoUser">
<ul>
<li id="right">
<div class="box">
<ul>
<li class="box_title">اطلاعات عمومی</li>
<li class="box_content">
<ul>
<li id="name">
<label>نام : </label>
<label>سعید</label>
</li>
<li id="family">
<label>نام خانوادگی : </label>
<label>خلیفه</label>
</li>
<li id="family">
<label>جنسیت : </label>
<label>مرد</label>
</li>
<li id="family">
<label>تاریخ تولد : </label>
<label>2 اردیبهشت 1369</label>
</li>
<li id="family">
<label>سن : </label>
<label>24</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="box">
<ul>
<li class="box_title">درباره من</li>
<li class="box_content">
<ul>
<li id="Context">
<label>متخصص برنامه نویسی و شبکه</label>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li id="left">
<div class="box">
<ul>
<li class="box_title">امضا</li>
<li class="box_content">
<ul>
<li id="Context">
<label>The Best Programming</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="box">
<ul>
<li class="box_title">آدرس</li>
<li class="box_content">
<ul>
<li id="country">
<label>کشور : </label>
<label>ایران</label>
</li>
<li id="province">
<label>استان : </label>
<label>فارس</label>
</li>
<li id="city">
<label>شهر : </label>
<label>شیراز</label>
</li>
<li id="DetailAddress">
<label>جزئیات آدرس : </label>
<label>---</label>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="Massage">
<ul>
<li id="right">
<ul>
<li id="btn_newpm">
<label>پیام جدید</label>
</li>
<li id="inbox" class="selected">
<img id="refresh_inbox" src="../Pic/refresh.png" />
<a href="#inbox">پیام های دریافتی</a>
</li>
<li id="send">
<img id="clear_pmSend" src="../Pic/download.png" />
<a href="#send">پیام های ارسالی</a>
</li>
<li id="Trash">
<img id="clear_Trash" src="../Pic/download.png" />
<a href="#Trash">سطل آشغال</a>
</li>
</ul>
</li>
<li id="left">
<ul id="btn_newpm">
<li id="lbl">
<ul>
<li>
<label>فرستنده : </label>
</li>
<li>
<label>گیرنده : </label>
</li>
<li>
<label>موضوع : </label>
</li>
</ul>
</li>
<li id="txt">
<ul>
<li>
<input type="text" id="txt_send" />
</li>
<li>
<input type="text" id="txt_recieve" />
</li>
<li>
<input type="text" id="txt_subject" />
</li>
</ul>
</li>
<li>
<textarea id="txtcontent" ></textarea>
</li>
</ul>
<ul id="inbox">
<li id="menu">
<ul>
<li><input type="checkbox" id="chk" /></li>
<li><a href="#Del">حذف</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<?php
define("path", "http://127.0.0.1/PHP-MVC/");
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
require("Config/define.php");
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم : (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<link rel="stylesheet" type="text/css" href="<?php echo path ?>CSS/Header.css"/> <script type="text/javascript" src="<?php echo path ?>JS/jquery.js"></script> <img src="<?php echo path ?>Pic/Letter.png" /> <img src="<?php echo path ?>Pic/warning.png" />
کد header.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo path ?>CSS/Header.css"/>
<script type="text/javascript" src="<?php echo path ?>JS/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$("a.Username").click(function()
{
if ($("#Username #MenuDropDown").is(":visible") == false)
{
$("#Username #MenuDropDown").css("display","inline");
$(document).click(function(e)
{
if(!$(e.target).is('a.Username'))
{
$("#Username #MenuDropDown").css("display","none");
}
});
}
else
{
$("#Username #MenuDropDown").css("display","none");
}
return false;
});
});
</script>
<!--<title>Untitled Document</title>-->
</head>
<body>
<div id="WhoLogin">
<div>
<ul>
<?php if(!Session::IsLogin()) {?>
<li class="Right" id="Login">
<a href="<?php echo path ?>Login">ورود</a>
</li>
<?php } else { ?>
<li class="Right" id="Username">
<div id="MenuDropDown">
<ul>
<li class="EditProfile"><a href="<?php echo path ?>Profile<?php
echo '\\'.Session::GetUserLogin(); ?>">صفحه شخصی</a></li>
<li class="Setting"><a href="<?php echo path ?>Profile#Setting">تنظیمات</a></li>
<li class="line"></li>
<li class="Exit"><a href="<?php echo path ?>Profile#Exit">خروج</a></li>
</ul>
</div>
<a href="<?php echo path ?>#" class="Username"><?php echo Session::GetUserLogin(); ?></a>
</li>
<li class="Right" id="Letter">
<div id="Num_Letter"><label class="Number">2</label></div>
<img src="<?php echo path ?>Pic/Letter.png" />
</li>
<li class="Right" id="Message">
<div id="Num_Message"><label class="Number">1</label></div>
<img src="<?php echo path ?>Pic/warning.png" />
</li>
<li class="Right" id="Post">
<a href="<?php echo path ?>Profile#">ارسال مطالب</a>
</li>
<?php } ?>
<li class="Left">
<input type="text" id="txt_search" name="txt_search" value="جستجو ..." />
</li>
</ul>
</div>
</div>
<div id="Header">
<div id="SingUp">
<ul>
<li id="title">
ITPro.ir
</li>
<?php if(!Session::IsLogin()) {?>
<li>
<input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
</li>
<?php } ?>
<li id="title2">
<a href="https://tosinso.com/">انجمن تخصصی فن آوری اطلاعات ایران</a>
</li>
</ul>
</div>
<div id="MainMenu">
<ul>
<li>
<a href="<?php echo path ?>Index">خانه</a>
</li>
<li>
<a href="<?php echo path ?>#">انجمن</a>
</li>
<li>
<a href="<?php echo path ?>About">درباره</a>
</li>
</ul>
</div>
</div>
</body>
</html>
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه) .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید