مهدی رزمجویی
توسعه دهنده SQL و PHP علاقه مند به مهندسی معکوس

کاملترین آموزش MVC در PHP رایگان | برنامه نویسی MVC در PHP

آموزش MVC | دوره آموزشی MVC در PHP | آموزش PHP و نوشتن به زبان MVC | جزوه آموزشی MVC در PHP و ... همگی اسامی است که می توانید به محتوای این مقاله مرتبط کنید ، در این مقاله آموزشی جامع ما سعی می کنیم به بهترین شکل بصورت جزوه آموزشی به شما برنامه نویسی MVC در PHP را به زبان ساده آموزش بدهیم اما به شما پیشنهاد می کنیم برای یادگیری بهتر به قسمت دوره های آموزشی توسینسو و آموزش PHP بروید و بصورت اصولی و اساسی PHP و MVC را آموزش ببینید.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

دوره آموزشی برنامه نویسی MVC در PHP قسمت اول

توی این آموزش میخوام MVC از مبتدی تا جایی که بتونم بهتون آموزش بدم . واسه شروع یه توضیح کوتاه درباره MVC میدم .MVC یه چارچوب یا Framework برای ساخت برنامه های کاربردی وب هست ، که با استفاده از MVC ، برنامه های کاربردی وب نوشته شده دارای قدرت و انعطاف بیشتری هستن و در ضمن پیچیدگی که قبلا توی کدنویسی ایجاد میشد با MVC خیلی کمتر میشه .

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 اسم برنامه خودتونو قرار بدید)

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

||http://tosinso.com/files/get/7ee647c1-8f4e-41c5-899b-4bf1a75a7e68||

 بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا  توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام  index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

||http://tosinso.com/files/get/39d83ad3-2604-443f-a169-45aa084ec0ae||

خوب تگ body بصورت زیر تغییر  میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

||http://tosinso.com/files/get/4db0b4ae-97e2-4b6b-9530-ab8c072dd7ed||

میبینید که توی browser  کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

||http://tosinso.com/files/get/9336b72a-4e15-44b1-a49a-bb8d4c0a5398||

خروجی بصورت زیر نمایش داده میشه .
* _خانه_
* _ورود_
* _درباره_
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد . 
||http://tosinso.com/files/get/5f855cb2-c077-42a8-852e-a0951caed319||  ولی الان به این شکل هست ،
||http://tosinso.com/files/get/550bcbc0-0f4d-4ef9-abf9-b57cc6a76108||
  پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

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

||http://tosinso.com/files/get/7ee647c1-8f4e-41c5-899b-4bf1a75a7e68||

 بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا  توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام  index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

||http://tosinso.com/files/get/39d83ad3-2604-443f-a169-45aa084ec0ae||

خوب تگ body بصورت زیر تغییر  میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

||http://tosinso.com/files/get/4db0b4ae-97e2-4b6b-9530-ab8c072dd7ed||

میبینید که توی browser  کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

||http://tosinso.com/files/get/9336b72a-4e15-44b1-a49a-bb8d4c0a5398||

خروجی بصورت زیر نمایش داده میشه .
* _خانه_
* _ورود_
* _درباره_
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد . 
||http://tosinso.com/files/get/5f855cb2-c077-42a8-852e-a0951caed319||  ولی الان به این شکل هست ،
||http://tosinso.com/files/get/550bcbc0-0f4d-4ef9-abf9-b57cc6a76108||
  پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب تگ body بصورت زیر تغییر میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

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

||http://tosinso.com/files/get/7ee647c1-8f4e-41c5-899b-4bf1a75a7e68||

 بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا  توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام  index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

||http://tosinso.com/files/get/39d83ad3-2604-443f-a169-45aa084ec0ae||

خوب تگ body بصورت زیر تغییر  میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

||http://tosinso.com/files/get/4db0b4ae-97e2-4b6b-9530-ab8c072dd7ed||

میبینید که توی browser  کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

||http://tosinso.com/files/get/9336b72a-4e15-44b1-a49a-bb8d4c0a5398||

خروجی بصورت زیر نمایش داده میشه .
* _خانه_
* _ورود_
* _درباره_
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد . 
||http://tosinso.com/files/get/5f855cb2-c077-42a8-852e-a0951caed319||  ولی الان به این شکل هست ،
||http://tosinso.com/files/get/550bcbc0-0f4d-4ef9-abf9-b57cc6a76108||
  پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که توی browser کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

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

||http://tosinso.com/files/get/7ee647c1-8f4e-41c5-899b-4bf1a75a7e68||

 بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا  توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام  index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

||http://tosinso.com/files/get/39d83ad3-2604-443f-a169-45aa084ec0ae||

خوب تگ body بصورت زیر تغییر  میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

||http://tosinso.com/files/get/4db0b4ae-97e2-4b6b-9530-ab8c072dd7ed||

میبینید که توی browser  کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

||http://tosinso.com/files/get/9336b72a-4e15-44b1-a49a-bb8d4c0a5398||

خروجی بصورت زیر نمایش داده میشه .
* _خانه_
* _ورود_
* _درباره_
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد . 
||http://tosinso.com/files/get/5f855cb2-c077-42a8-852e-a0951caed319||  ولی الان به این شکل هست ،
||http://tosinso.com/files/get/550bcbc0-0f4d-4ef9-abf9-b57cc6a76108||
  پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خروجی بصورت زیر نمایش داده میشه .

  • خانه
  • ورود
  • درباره

حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد .

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

||http://tosinso.com/files/get/7ee647c1-8f4e-41c5-899b-4bf1a75a7e68||

 بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا  توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام  index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

||http://tosinso.com/files/get/39d83ad3-2604-443f-a169-45aa084ec0ae||

خوب تگ body بصورت زیر تغییر  میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

||http://tosinso.com/files/get/4db0b4ae-97e2-4b6b-9530-ab8c072dd7ed||

میبینید که توی browser  کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

||http://tosinso.com/files/get/9336b72a-4e15-44b1-a49a-bb8d4c0a5398||

خروجی بصورت زیر نمایش داده میشه .
* _خانه_
* _ورود_
* _درباره_
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد . 
||http://tosinso.com/files/get/5f855cb2-c077-42a8-852e-a0951caed319||  ولی الان به این شکل هست ،
||http://tosinso.com/files/get/550bcbc0-0f4d-4ef9-abf9-b57cc6a76108||
  پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

ولی الان به این شکل هست ،

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

||http://tosinso.com/files/get/7ee647c1-8f4e-41c5-899b-4bf1a75a7e68||

 بعدش روی دکمه save کلیک میکنیم و تو این قسمت تیک گزینه remote رو برمیداریم و تیک گزینه testing میزنیم حالا روی دکمه save کلیک کنید . بعد از این کارا  توی قسمت سمت راست (یعنی local file) روی برنامه راست کلیک و گزینه new file رو میزنیم و یه فایل ایجاد میکنیم به نام  index.php و سپس دوباره روی برنامه راست کلیک کرده و چهار تا فلودر به نامهای Models , Views , Controller , Libs ایجاد میکنیم . حالا صفحه index.php باز میکنیم که کدهای زیر بصرت پیشفرض توش هست .

||http://tosinso.com/files/get/39d83ad3-2604-443f-a169-45aa084ec0ae||

خوب تگ body بصورت زیر تغییر  میدیم و یه خروجی از برنامه میگیریم (با استفاده از دکمه F12 یه خروجی توی Browser برای ما نشون میده)

||http://tosinso.com/files/get/4db0b4ae-97e2-4b6b-9530-ab8c072dd7ed||

میبینید که توی browser  کلمه test نمایش داده شد،حالا تگ body بصورت زیر تغییر میدیم و توی فولدر controller ، سه فایل به نام های Login.php , Help.php , Index.php ایجاد میکنیم .

||http://tosinso.com/files/get/9336b72a-4e15-44b1-a49a-bb8d4c0a5398||

خروجی بصورت زیر نمایش داده میشه .
* _خانه_
* _ورود_
* _درباره_
حالا با استفاده از این لینکها میتونیم به صفحات دیگه بریم . خوب ما میخوایم موقعی که کاربر مثلاً روی لینک ورود کلیک میکنه URL بصورت زیر دربیاد . 
||http://tosinso.com/files/get/5f855cb2-c077-42a8-852e-a0951caed319||  ولی الان به این شکل هست ،
||http://tosinso.com/files/get/550bcbc0-0f4d-4ef9-abf9-b57cc6a76108||
  پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

پس ما باید یه فایل به نام .htaccess توی فولدر اصلی برنامه ایجاد کنیم . خوب حالا این فایل چیه و به چه درد میخوره توی قسمت بعد آموزش میدم .

دوره آموزشی برنامه نویسی MVC در PHP قسمت دوم

تو قسمت قبل یه توضیح کوتاه درباره 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 بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

کد page.php:

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

ادامه کد:

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

توی تگ style کدهای css هست (اگه شد بعداً یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .

خوب حالا میریم سر کدهای htaccess:

یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن .

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

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 :

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه

سلام به همگی دوستان، تو قسمت قبل یه توضیح کوتاه درباره MVC دادم و استارت برنامه وبمونو زدیم چندتا فایل هم ایجاد کردیم و رسیدیم به مبحث .htaccess ، خوب یه توضیح درباره این فایل میدم و بعد با این فایل نرم افزار Apache روی سرور تنظیم میکنیم .فایل .htaccess واسه کانفیگ سرورهایی کارایی داره که روی سرور ، Apache اجرا شده باشه و با این فایل میتونیم توابع و ویژگیهایی Apache فعال یا غیرفعال کنیم مثلا تغییر مسیر، محافظت از رمز عبور ، محدودیت IP و ... . زمانی که این فایل روی یه دایرکتوری میزاریم Apache به دنبال این فایل میگرده، پس باید این فایل به همین صورت یعنی .htaccess بنویسیم بدون چیزی کم یا زیاد . یه مثال میزنم، زمانی که برنامه وب ما به خاطر اشتباه کاربر یا برنامه نویس با خطا برخورد میکنه، Apache این خطا رو تو یه صفحه با شماره خطا و توضیح خطا به ما نشون میده و ما نمیخوایم هر وقت که با خطا روبرو میشیم این عمل صورت بگیره، حالا یا برنامه نویس صلاح میبینه که این خطا رو نشون بده با این تفاوت که خود برنامه نویس میاد یه صفحه خطا ایجاد میکنه و زمانی که خطا رخ میده صفحه خطایی که خودش تولید کرده بجای صفحه خطا Apache میزاره (یعنی مسیر URL تغییر میده) یا اینکه اصلا خطایی نمایش داده نمیشه، که این کار بوسیله ErrorDocument انجام میشه بصورت زیر.
<left>
ErrorDocument 401 http:////127.0.0.1//PHP-MVC//Index
<left>
خوب این کد باید توی فایل .htaccess بنویسیم، که در اینجا موقعی که خطای 401 رخ میده بجای نمایش صفحه خطا، برنامه Redirect (تغییر مسیر) میکنه به صفحه index برنامه و صفحه index نمایش داده میشه .خوب حالا واسه ابتدای کار یه فایل .htaccess توی پوشه اصلی برنامه وبمون میسازیم .نکته : زمانی که فایل .htaccess توی یه فولدر قرار میدیم هر تنطیمی که انجام داده باشیم روی فایل ها و زیرفولدرهای همان فولدر هم اعمال میشه . 
1) ErrorDocument : زمانی که خطا رخ میده کاربر به مسیر مورد نظر هدایت میکنه .
<left>
ErrorDocument 404 //error_pages//404.html
<left>
404 : موقعی که فایلی رو پیدا نمیکنه این خطا رخ میده .
403 : زمانی که خطای Forbidden رخ میده .
401 : Authorization Required
500 : Internal Server
400 : Bad request
2) Redirects : موقعی که بخوایم کاربر از یه مسیر به مسیر دیگه منتقل کنیم، مثلا قبلاً یه صفحه توی وب سایتمون داشتیم و بجای این صفحه یه صفحه جدید درست کردیم و حالا یه کاربری میخواد صفحه قدیمی باز کنه، با Redirects میتونیم کاربر به صفحه جدید انتقال بدیم .
<left>
Redirect //old_dir//  http:////www.yourdomain.com//new_dir//index.html
<left>
3)یکی از مهمترین کاربرد های فایل .htaccess قابلیت password protection (محافظت از رمزعبور) هست .
زمانی که میخوایم روی یه فولدر یا تعداد بیشتری فولدر رمزعبور بزاریم تا فقط افرادی که دارای رمز عبور هستند بتونن این فولدر باز کنن، این قابلیت بدرد بخور هست، بصورت زیر انجام میدیم .
یه مثال میزنم، من یه فولدر به نام private دارم که میخوام فقط یوزری بنام admin بتونه محتوای اونو ببینه . فعلا اگه بخوام این فولدر باز کنم راحت باز میشه .
||http://tosinso.com/files/get/2b033ea3-cd69-4bc9-b50e-f98fdb9ca9dd||
و یه فایل بنام page.php توی این فولدر ساختم که در واقع میخوایم از این فایل محافظت کنم .
||http://tosinso.com/files/get/7284314e-ff1b-4154-9599-67f29cf71dd1||
کد page.php:
||http://tosinso.com/files/get/1184c1db-f1d7-4354-a2c5-9e19194e397b||
ادامه کد:
||http://tosinso.com/files/get/d251f989-557d-466e-b829-82c8d24e4f98||
توی تگ style کدهای css هست (اگه شد بعداً  یه مقدار css هم توضیح میدم) و ادامه کد هم که آسونه چیزی نداره (دو تا label , textbox و یه button گذاشتم) .
خوب حالا میریم سر کدهای htaccess:
یه فایل بنام .htaccess توی فولدر private میسازیم که این فایل وظیفه محافظت از فولدر داره تا کاربرای دیگه (به غیر از کاربری با نام admin) نتونن توی فولدر ببینن . 
||http://tosinso.com/files/get/c69b4207-68d2-4ced-8b9e-cf3ecc0ea67c||
AuthType : نوع تشخیص هویت معلوم میکنه و ما اینجا basic براش ست کردیم چون داریم از احراز هویت http استفاده میکنیم .
AuthName : یه متن هست که توی صفحه ای که میخواییم رمزعبور وارد کنیم نمایش داده میشه (توی عکس معلومه)
AuthUserFile : مسیر فایل محتوای رمزعبور و نام کاربری (توصیه میشه فایل محتوای رمزعبور و نام کاربری توی فولدر برنامه وب نباشه، خارج از فلودرهای برنامه باشه)
require valid-user : یعنی فقط کاربرای مجاز محتویات این فولدر میبینند .
و حالا یه فایل دیگه هم میسازیم به نام .htpasswd و توش رمز عبور و نام کاربری هرکسی که میخوایم به این فولدر دسترسی داشته باشه، قرار میدیم (در اینجا ما فقط به admin اجازه دادیم)
<left>
username:password
<left>
اگه خواستید به چند نفر اجازه بدید این فولدر ببینن باید username و password ها رو زیر هم بنویسید اینجوری :
<left>
username:password
username:password
username:password
<left>
توی فایل .htpasswd میشه رمز عبور encrypt ذخیره کرد یا هم بصورت معمولی رمز عبور دخیره کنیم، اگه خواستید رمزعبورتون encrypt کنید برید توی این سایت :
<left>
http:////www.htaccesstools.com//htpasswd-generator
<left>
خوب من رمزعبور خودمو encrypt کردم و گذاشتم توی فایل .htpasswd :
||http://tosinso.com/files/get/3cd686d4-e136-4ba8-8503-f62e2149903d||
و حالا موقعی که میخواییم وارد page.php بشیم از ما نام کاربری و رمزعبور میپرسه .
||http://tosinso.com/files/get/551497ca-877e-4724-9482-3f54de0cfd12||
اگه روی دکمه cancel کلیک کنم این صفحه برام نشون داده میشه
||http://tosinso.com/files/get/9dcaebd7-12ce-40ea-8128-ca3f5143a348||
اگه رمزعبور یا نام کاربری غلط وارد کنم دوباره ازم نام کاربری و رمزعور میپرسه و اگه هم درست وارد کنم که صفحه ای که میخوایم برامون باز میکنه 
||http://tosinso.com/files/get/405eddde-ab98-4a5a-80f3-b943ee915c90||

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

اومیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی ادامه مباحث htaccess توضیح میدم .

دوره آموزشی برنامه نویسی MVC در PHP قسمت سوم

ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

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 مواجه میشه .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ،

من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه 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

و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا اگه کدمونو به این صورت نوشته بودیم

 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 میزنم .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)

IndexIgnore *.txt
سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم

IndexIgnore *.txt *.jpg
سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )

IndexIgnore *
سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .

Options +Indexes

اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .

Options -Indexes
سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .

خوب تا اینجا توضیحاتی که واسه .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 (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید بعد از 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'];	
?>

بصورت شکل زیر :

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .

[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .

echo '<br>'.$_GET['b'];
سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا میایم مقادیر 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 مقادیر آرایه رو چاپ میکنه .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای 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";
	}
?>

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

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .

سلام به همه دوستان گلم در ITPro ابتدا قبل از شروع این قسمت یه عذر خواهی کنم بایت وقفه طولانی که ایجاد شد بین قسمت قبلی و این قسمت ، خوب توی قسمت قبلی درباره ErrorDocument ، Redirects  و password protection توضیح دادم و توی این قسمت توضیحات تکمیلی .htaccess براتون میگم بهمراه کد نویسی MVC  . نکته مهم : قبل از اینکه فایل .htaccess بسازید و توش کد بنویسید، برید توی فایل httpd.conf (اگه از wamp استفاده میکنید برید توی منوی wamp توی قسمت apache) و این خطی که در زیر انتخابش کردم پیدا کنید و اگه اول خط، کاراکتر # داشت ، کاراکتر # از اول خط پاک کنید و فایل ذخیره کرده و wamp ریستارت کنید . 
||http://tosinso.com/files/get/370a523a-186b-4d5a-b48f-5af01e053d2a||
4) Deny visitors by IP address : میتونیم جلوگیری کنیم از بازدید بعضی بازدیدکنندگان از وب سایتمون یا اجازه بدیم فقط کاربران با یه رنج آی پی خاص بتونن از وب سایتمون بازدید کنن .مثلاً فقط به ادمین سایت اجازه بدیم که بتونه صفحات حساس وب سایت ببینه و بقیه کاربران قادر نباشن .
<htm>
order allow,deny
deny from 123.45.6.
allow from all
<htm>
کد بالا به همه اجازه میده بتونن وب سایتو ببینن ولی کاربرانی که  سه اکتد آی پی شون این 123.45.6 هست اجازه بازدید از سایت ندارن .
<htm>
order allow,deny
allow from 162.1.1.1
deny from all
<htm>
کد بالایی هم فقط به کاربری با آی پی 162.1.1.1 اجازه میده از وب سایت بازدید کنه و اگه کاربری توی محدوده آی پی تعریف نشده باشه و بخواد وارد سایت بشه با خطای Forbidden مواجه میشه .
||http://tosinso.com/files/get/110262ac-52d4-466f-98ee-ab65f203e558||

5) DirectoryIndex : بصورت پیشفرض Apache بدنبال فایل index.php میگرده تا وب سایت با اون صفحه بیاره بالا (یعنی نشون بده) ، ولی میشه این پیشفرضو تغییر داد ، 
من یه صفحه index.php توی آموزش قبلی ساختم که موقعی که نمایش داده میشد بصورت زیر بود 
||http://tosinso.com/files/get/960448ad-c06f-433d-8c36-4aecd1c75ffb||
و حالا نمیخوام موقعی که وب سایتمو کسی باز میکنه صفحه index.php بصورت پیشفرض براش باز بشه میخوام index.html باز بشه .
کد index.html : فقط یه welcome توش نوشتم :-)
<htm>
<!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>
<htm>
و حالا این کد توی .htaccess مینویسم .
<htm>
DirectoryIndex index.html
<htm>
و بعدش دوباره وب سایتمو باز میکنم میبینید که پیشفرضش تغییر کرد و صفحه که میخواستم باز شد .
||http://tosinso.com/files/get/f8cf8f64-1222-4f5c-a0f5-13c2c60cc21f||
خوب حالا اگه کدمونو به این صورت نوشته بودیم
<htm>
 DirectoryIndex index.html index.cgi index.php
<htm>
Apache ابتدا به دنبال صفحه index.html میگرده تا نمایشش بده و اگه وجود نداشت میره سراغ index.cgi  و در نهایت اگه این صفحه هم وجود نداشت index.php نمایش میده .

6) Disable directory listings : با استفاده از این قابلیت میتونیم جلوگیری کنیم از نمایش بعضی از فایل ها با پسوند های مورد نظر خودمون، یا کلاً جلوگیری کنیم از نمایش فولدرهای وب سایت .
من سه تا فولدر با نام های About,Index,Login توی فولدر Views میسازم (فولدر views توی قسمت قبلی ایجاد کردیم) ، یه چند تا فایل با پسوند jpg. و txt. هم توی فولدر views میسازم (البته این فایل هارو بعدش پاک کنید، چون فقط واسه توضیح disable directory این فایهارو ایجاد کردم بدردمون نمیخوره)  و حالا توی URL آدرس فولدر Views تایپ میکنم و enter میزنم .
||http://tosinso.com/files/get/c93ac99e-d6db-4197-be80-cbe624ea0723||
میبینید که تمام محتویات views نمایش داده شد حالا اگه بخوایم فایل هایی با پسوند txt نمایش داده نشن بصورت زیر کد مینویسیم (توی فایل .htaccess)
<htm>
IndexIgnore *.txt
<htm>
||http://tosinso.com/files/get/df7c03aa-0666-4a24-871c-81e767c61ae7||
یا اگه خواستیم فایل با پسوند jpg هم نمایش داده نشه کد بصورت زیر مینویسیم 
<htm>
IndexIgnore *.txt *.jpg
<htm>
||http://tosinso.com/files/get/14ce8ba5-d20c-417b-9113-4ca6ea8f79ba||
اگه کد بصورت زیر بنویسیم هیچ فایل و فولدری نمایش داده نمیشه ( انگار فولدر خالی هست )
<htm>
IndexIgnore *
<htm>
||http://tosinso.com/files/get/395d0ba6-8db8-4888-b2a9-f94c2e7e3161||
خوب حالا اگه وب سروری که شما وب سایتتونو روش آپ کردید فولدرهارو نمایش نمیده، میتونید با دستور زیر نمایش فولدر برای خودتون فعال کنید .
<htm>
Options +Indexes
<htm>
اگه خواستید کلاً فولدرهای سایتتون نمایش داده نشن میتونید از کد زیر استفاده کنید .
<htm>
Options -Indexes
<htm>
||http://tosinso.com/files/get/7ed0dba8-5af5-47f4-a797-5274439d0dab||
میبینید که دیگه اجازه نمایش فولدر بهمون نمیده .
خوب تا اینجا توضیحاتی که واسه .htaccess دادم کافی هست میریم سر بحث اصلیمون یعنی MVC ( توی ادامه آموزشها، قابلیت های دیگه htaccess براتون میگم ) واسه اطلاعات بیشتر میتونید به سایت زیر سر بزنید .
<left>
http://www.htaccess-guide.com
<left>
خوب حالا قبل از شروع MVC، کدهای زیر توی فایل .htaccess مینویسیم .
<htm>
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/
<htm>
به جای PHP-MVC (اسم وب سایت من هست)، شما اسم وب سایت خودتونو بنویسید .
||http://tosinso.com/files/get/279ca742-b8a9-4ca7-95d9-8cdb67bc8eae||
میبینید بعد از index.php هرچیزی وارد کنیم به ما خطایی نمیده که این خودش یه باگ محسوب میشه و حالا میاییم این باگ برطرف میکنیم.
فایل htaccess. بصورت زیر ویرایش میکنیم :
<htm>
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]

<htm>
زمانی که بخوایم از Rewrite استقاده کنیم باید قبلش دو خط اول هم بنویسیم . ( البته واسه بعضی از سرورها )
d- و f- و l- یعنی بتونیم با تایپ کردن اسم فایل و فولدر توی URL به اون فایل یا فولدر دسترسی داشته باشیم ،  $(*.)^  یعنی هر فایل و فولدری که توی URL وارد میکنیم ، url هم یه متغییر هست که بعداً توی کدها ازش استفاده میکنیم و 1$ هم تمام مقادیری که بعد از اسم سایت وارد میکنیم شامل میشه .
کد زیر به index.php اضافه میکنیم :
<php>
<?php
	echo $_GET['url'];	
?>
<php>
بصورت شکل زیر :
||http://tosinso.com/files/get/ffd5f0d8-0a96-4abd-91ab-0d0f55a33d3a||
این کد مقادیری که توی متغیر url وارد میکنیم (متغیر url توی کدهای htaccess تعریف کردیم) نمایش میده .
||http://tosinso.com/files/get/b32fc5c9-fb42-4b57-9026-79b6e554f2e2||
مثلاً زمانی که بعد از اسم سایت، مقداری بصورت بالا وارد میکنیم یعنی میخوایم تابعی (در اینجا run یه تابع هست) که توی کدهای کلاس Login نوشته شده اجرا بشه و اگه مقداری نیز بعد از run بیاد،این مقدار به عنوان مقادیر تابع (پارامتر تابع) به حساب میاد .
[QSA] زمانی به درد ما میخوره که بخوایم URL بصورت زیر وارد کنیم و از متغیری به نام b هم استفاده کنیم که در این صورت باید کد زیر به انتهای کد index.php (بعد از دستور echo) اضافه کنید تا نتیجه رو ببینید .
<php>
echo '<br>'.$_GET['b'];
<php>
||http://tosinso.com/files/get/64267654-e9e2-4274-9fb4-98929d5b7035||
ولی اگه این [QSA] نزاریم در موقعی که میخوایم از متغیر b استفاده کنیم بهمون خطا میده .
||http://tosinso.com/files/get/6d8880f7-936b-4984-b635-71f9b90b845f||
خوب حالا میایم مقادیر url جدا میکنیم با استفاده از تابع ()explode ، کدهای php صفحه index.php بصورت زیر تغییر بدید  :
<php>
<?php
	//echo $_GET['url'];
	//echo '<br>'.$_GET['b'];
	
	$url = $_GET['url'];
	$url = explode('/', $url);
	print_r($url);
?>
<php>
دو خط اول غیر فعال کردم چون دیگه بدردمون نمیخورن .
تابع explode مقادیر متغیر url$ جدا سازی میکنه بر حسب کاراکتر /  و خروجیش هم یه آرایه هست .
دستور print_r مقادیر آرایه رو چاپ میکنه .
||http://tosinso.com/files/get/fbb4c01c-984c-42ae-bada-455180885704|| 
خوب طبق چیزی که با لا گفتم اگه URL چرت و پرت هم بنویسیم (بصورت زیر) به ما خطا نمیده
||http://tosinso.com/files/get/e6e71890-0318-4572-bf4f-e2e72616ca21||
 حالا با دستور زیر میگم فقط صفحاتی رو نشون بده که توی وب سایت هست . (کدهای php صفحه Index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
خوب حالا اگه دوباره چرت و پرت بنویسیم (بصورت زیر) به ما خطایی که خودمون نوشتیمو نشون میده، حتی میشه یه صفحه خطا درست کرد و کاربر رو به صفحه ی خطا منتقل کرد .
||http://tosinso.com/files/get/e76e2185-9c9a-4250-9a44-c1d94e4db402||
خوب حالا اگه URL بصورت زیر بنویسیم بهمون خطا میده و اینم یه باگ دیگه هست که باید رفع بشه .
||http://tosinso.com/files/get/6ce34e29-c25f-41c9-8a57-3e9b357cb502||
بصورت زیر این باگ هم برطرف میشه . (کدهای php صفحه index.php بصورت زیر ویرایش کنید)
<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;
	}
?>
<php>
تابع isset چک میکنه که همچین متغیری ست شده یا نه ( یعنی همچین متغیری اصلاً وجود داره یا نه )
توی کد بالا گفتم اگه چیزی برای url ست نشده باشه، index براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم . 


نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

بصورت زیر این باگ هم برطرف میشه . (کدهای 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 براش ست بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید . توی قسمت بعدی کلاسها رو توضیح میدم .

دوره آموزشی برنامه نویسی MVC در PHP قسمت چهارم

توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه 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 ";
	}
}

خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :

سلام به همگی توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه class استفاده میشه و زمانی که توی کلاسون میخوایم تابع سازنده داشته باشیم باید اسم اون تابع رو ()construct___ بزاریم، در ابتدا یه فایل بنام Bootstrap.php توی فولدر Libs میسازیم. و کدهای زیر توش مینویسیم (در واقع داریم کلاسی بنام Bootstrap ایجاد میکنیم، در ادامه نقش این فایل رو در وب سایتمون میفهمید)
<php>
<?php
class Bootstrap
{
	function __construct()
	{
	}
}
<php>
حالا کد های php که توی فایل index.php در قسمت قبلی نوشتیمو اضافه میکنیم به فایل Bootstrap و کدهای php صفحه index.php بصورت زیر ویرایش میکنیم :
کدهای Bootstrap :
<php>
<?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>
کدهای php صفحه index.php :
<php>
<?php

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>
اگه بخوایم کدهای یه فایل دیگه رو توی یه فایل دیگه استفاده کنیم از تابع require استفاده میکنیم و خط دوم هم یه شی از نوع کلاس Bootstrap میسازه به نام app$  .
خوب باید سه تابع دیگه بنام های Index,About,Login ایجاد کنیم، پس کدهای زیر توی فایل های Index.php , About.php , Login.php که توی فولدر Controllers هستن مینویسیم . (توی قسمتهای قبلی آموزش، این فایل هارو ایجاد کردیم)
کد About.php :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
}
<php>
کد Index.php :
<php>
<?php

class Index
{
	function __construct()
	{
		echo <br>Page Index ;
	}
}
<php>
کد Login.php :
<php>
<?php

class Login
{
	function __construct()
	{
		echo <br>Page Login ;
	}
}
<php>
خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :
||http://tosinso.com/files/get/521b30da-58fe-49d5-baf7-3b7e2f4e1884||
طبق کدی که من توی کلاس About نوشتم باید زمانی که صفحه about باز میشه متن Page About برام چاپ بشه ولی نشد، مشکل کجاست ؟
باید توی کلاس Bootstrap کدی بنویسیم تا برنامه بفهمه زمانی که توی URL آدرس صفحات سایت تایپ میشه، محتویات اون صفحه نمایش داده بشه .
بعد از آخرین دستور If ، یه else اضافه میکنیم که کدش بصورت زیر میشه :
<php>
if(!file_exists(Controllers/.$url[0]..php))
{
	echo Not Found Page;
}
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
}
<php>
کد بالا چک میکنه اگه URL ی بنویسیم که وجود نداره خطا بده، در غیر این صورت صفحه مورد نظر نشون بده و در اینجا مقدار [0]url$ برابر about هست، در نتیجه زمانی که کد اجرا میشه ()about بجای ()[0]url$ قرار میگیره و صفحه about نمایش داده میشه .
||http://tosinso.com/files/get/00994776-1b1a-4c34-8f02-39002764ba55||
میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه url ی وارد کنیم که صفحه ش وجود نداره بهمون خطا میده .
حالا اگه آخر کد Bootstrap و کد About بصورت زیر تغییر بدیم :
کد Bootstrap :
<php>
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
	$controller->$url[1]();	
}
<php>
کد About :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
	
	function AboutMe()
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
اگه URL بصورت زیر وارد کنیم نتیجه اینجوری میشه :
||http://tosinso.com/files/get/190a82d5-3dbb-4dcd-8cc6-61f41aae3416||
Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .
اگه این سری URL بصورت زیر وارد کنیم :
||http://tosinso.com/files/get/43a0aea9-3686-495b-895b-522977930044||
نتیجه اینه که کلی به ما خطا میده ، کدهای Bootstrap بصورت زیر ویرایش میکنیم تا دیگه بهمون خطا نده .
<php>
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>;
		}
	}	
}
<php>
تابع empty چک میکنه که آیا مقداری توی متغیر وجود داره یا نه . (با تابع isset فرق میکنه)
یه متغیر بنام method_name$ تعریف کردم و مقدار [1]url$ داخل میریزم و بعد با تابع method_exists چک میکنم که آیا تابعی با این نام (یعنی مقدار داخل method_name$) توی کلاس وجود داره یا نه ؟! اگه وجود داشت تابع رو فراخوانی میکنه وگرنه به ما خطای  method not found میده . (توی زبانهای برنامه نویسی دیگه زمانی که میخواستیم به توابعی از یه کلاس دسترسی داشته باشیم بعد از نام اون کلاس کاراکتر . میزاشتیم و بعد نام تابع، ولی اینجا به جای . از <- استفاده میشه)
خوب حالا اگه خواستیم یه مقدار به تابعی که توی کلاسمون ایجاد کردیم بدیم و اون تابع بر حسب مقداری که بهش دادیم اعمالی رو انجام بده باید کدهارو کمی تغییر بدیم :
تابع Aboutme یا بصورت زیر تغییر میدیم :
<php>
function AboutMe($str = false)
{
	if($str == true)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
یا هم بصورت زیر :
<php>
function AboutMe($str = '')
{
	if(empty($str) == false)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
کد Bootstrap :
<php>
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>;
	}
}
<php>
یه متغیر بنام parametr$ تعریف کردم، که اگه مقداری توی [2]url$ بود این مقدار ریخته میشه توی متغییر parametr$ و به عنوان پارامتر تابع استفاده میشه .
||http://tosinso.com/files/get/319f56be-af64-4676-8628-66cc8c1c6d49||

امیدوارم از این قسمت هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

طبق کدی که من توی کلاس 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 نمایش داده میشه .

سلام به همگی توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه class استفاده میشه و زمانی که توی کلاسون میخوایم تابع سازنده داشته باشیم باید اسم اون تابع رو ()construct___ بزاریم، در ابتدا یه فایل بنام Bootstrap.php توی فولدر Libs میسازیم. و کدهای زیر توش مینویسیم (در واقع داریم کلاسی بنام Bootstrap ایجاد میکنیم، در ادامه نقش این فایل رو در وب سایتمون میفهمید)
<php>
<?php
class Bootstrap
{
	function __construct()
	{
	}
}
<php>
حالا کد های php که توی فایل index.php در قسمت قبلی نوشتیمو اضافه میکنیم به فایل Bootstrap و کدهای php صفحه index.php بصورت زیر ویرایش میکنیم :
کدهای Bootstrap :
<php>
<?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>
کدهای php صفحه index.php :
<php>
<?php

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>
اگه بخوایم کدهای یه فایل دیگه رو توی یه فایل دیگه استفاده کنیم از تابع require استفاده میکنیم و خط دوم هم یه شی از نوع کلاس Bootstrap میسازه به نام app$  .
خوب باید سه تابع دیگه بنام های Index,About,Login ایجاد کنیم، پس کدهای زیر توی فایل های Index.php , About.php , Login.php که توی فولدر Controllers هستن مینویسیم . (توی قسمتهای قبلی آموزش، این فایل هارو ایجاد کردیم)
کد About.php :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
}
<php>
کد Index.php :
<php>
<?php

class Index
{
	function __construct()
	{
		echo <br>Page Index ;
	}
}
<php>
کد Login.php :
<php>
<?php

class Login
{
	function __construct()
	{
		echo <br>Page Login ;
	}
}
<php>
خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :
||http://tosinso.com/files/get/521b30da-58fe-49d5-baf7-3b7e2f4e1884||
طبق کدی که من توی کلاس About نوشتم باید زمانی که صفحه about باز میشه متن Page About برام چاپ بشه ولی نشد، مشکل کجاست ؟
باید توی کلاس Bootstrap کدی بنویسیم تا برنامه بفهمه زمانی که توی URL آدرس صفحات سایت تایپ میشه، محتویات اون صفحه نمایش داده بشه .
بعد از آخرین دستور If ، یه else اضافه میکنیم که کدش بصورت زیر میشه :
<php>
if(!file_exists(Controllers/.$url[0]..php))
{
	echo Not Found Page;
}
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
}
<php>
کد بالا چک میکنه اگه URL ی بنویسیم که وجود نداره خطا بده، در غیر این صورت صفحه مورد نظر نشون بده و در اینجا مقدار [0]url$ برابر about هست، در نتیجه زمانی که کد اجرا میشه ()about بجای ()[0]url$ قرار میگیره و صفحه about نمایش داده میشه .
||http://tosinso.com/files/get/00994776-1b1a-4c34-8f02-39002764ba55||
میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه url ی وارد کنیم که صفحه ش وجود نداره بهمون خطا میده .
حالا اگه آخر کد Bootstrap و کد About بصورت زیر تغییر بدیم :
کد Bootstrap :
<php>
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
	$controller->$url[1]();	
}
<php>
کد About :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
	
	function AboutMe()
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
اگه URL بصورت زیر وارد کنیم نتیجه اینجوری میشه :
||http://tosinso.com/files/get/190a82d5-3dbb-4dcd-8cc6-61f41aae3416||
Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .
اگه این سری URL بصورت زیر وارد کنیم :
||http://tosinso.com/files/get/43a0aea9-3686-495b-895b-522977930044||
نتیجه اینه که کلی به ما خطا میده ، کدهای Bootstrap بصورت زیر ویرایش میکنیم تا دیگه بهمون خطا نده .
<php>
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>;
		}
	}	
}
<php>
تابع empty چک میکنه که آیا مقداری توی متغیر وجود داره یا نه . (با تابع isset فرق میکنه)
یه متغیر بنام method_name$ تعریف کردم و مقدار [1]url$ داخل میریزم و بعد با تابع method_exists چک میکنم که آیا تابعی با این نام (یعنی مقدار داخل method_name$) توی کلاس وجود داره یا نه ؟! اگه وجود داشت تابع رو فراخوانی میکنه وگرنه به ما خطای  method not found میده . (توی زبانهای برنامه نویسی دیگه زمانی که میخواستیم به توابعی از یه کلاس دسترسی داشته باشیم بعد از نام اون کلاس کاراکتر . میزاشتیم و بعد نام تابع، ولی اینجا به جای . از <- استفاده میشه)
خوب حالا اگه خواستیم یه مقدار به تابعی که توی کلاسمون ایجاد کردیم بدیم و اون تابع بر حسب مقداری که بهش دادیم اعمالی رو انجام بده باید کدهارو کمی تغییر بدیم :
تابع Aboutme یا بصورت زیر تغییر میدیم :
<php>
function AboutMe($str = false)
{
	if($str == true)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
یا هم بصورت زیر :
<php>
function AboutMe($str = '')
{
	if(empty($str) == false)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
کد Bootstrap :
<php>
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>;
	}
}
<php>
یه متغیر بنام parametr$ تعریف کردم، که اگه مقداری توی [2]url$ بود این مقدار ریخته میشه توی متغییر parametr$ و به عنوان پارامتر تابع استفاده میشه .
||http://tosinso.com/files/get/319f56be-af64-4676-8628-66cc8c1c6d49||

امیدوارم از این قسمت هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه 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 بصورت زیر وارد کنیم نتیجه اینجوری میشه :

سلام به همگی توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه class استفاده میشه و زمانی که توی کلاسون میخوایم تابع سازنده داشته باشیم باید اسم اون تابع رو ()construct___ بزاریم، در ابتدا یه فایل بنام Bootstrap.php توی فولدر Libs میسازیم. و کدهای زیر توش مینویسیم (در واقع داریم کلاسی بنام Bootstrap ایجاد میکنیم، در ادامه نقش این فایل رو در وب سایتمون میفهمید)
<php>
<?php
class Bootstrap
{
	function __construct()
	{
	}
}
<php>
حالا کد های php که توی فایل index.php در قسمت قبلی نوشتیمو اضافه میکنیم به فایل Bootstrap و کدهای php صفحه index.php بصورت زیر ویرایش میکنیم :
کدهای Bootstrap :
<php>
<?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>
کدهای php صفحه index.php :
<php>
<?php

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>
اگه بخوایم کدهای یه فایل دیگه رو توی یه فایل دیگه استفاده کنیم از تابع require استفاده میکنیم و خط دوم هم یه شی از نوع کلاس Bootstrap میسازه به نام app$  .
خوب باید سه تابع دیگه بنام های Index,About,Login ایجاد کنیم، پس کدهای زیر توی فایل های Index.php , About.php , Login.php که توی فولدر Controllers هستن مینویسیم . (توی قسمتهای قبلی آموزش، این فایل هارو ایجاد کردیم)
کد About.php :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
}
<php>
کد Index.php :
<php>
<?php

class Index
{
	function __construct()
	{
		echo <br>Page Index ;
	}
}
<php>
کد Login.php :
<php>
<?php

class Login
{
	function __construct()
	{
		echo <br>Page Login ;
	}
}
<php>
خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :
||http://tosinso.com/files/get/521b30da-58fe-49d5-baf7-3b7e2f4e1884||
طبق کدی که من توی کلاس About نوشتم باید زمانی که صفحه about باز میشه متن Page About برام چاپ بشه ولی نشد، مشکل کجاست ؟
باید توی کلاس Bootstrap کدی بنویسیم تا برنامه بفهمه زمانی که توی URL آدرس صفحات سایت تایپ میشه، محتویات اون صفحه نمایش داده بشه .
بعد از آخرین دستور If ، یه else اضافه میکنیم که کدش بصورت زیر میشه :
<php>
if(!file_exists(Controllers/.$url[0]..php))
{
	echo Not Found Page;
}
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
}
<php>
کد بالا چک میکنه اگه URL ی بنویسیم که وجود نداره خطا بده، در غیر این صورت صفحه مورد نظر نشون بده و در اینجا مقدار [0]url$ برابر about هست، در نتیجه زمانی که کد اجرا میشه ()about بجای ()[0]url$ قرار میگیره و صفحه about نمایش داده میشه .
||http://tosinso.com/files/get/00994776-1b1a-4c34-8f02-39002764ba55||
میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه url ی وارد کنیم که صفحه ش وجود نداره بهمون خطا میده .
حالا اگه آخر کد Bootstrap و کد About بصورت زیر تغییر بدیم :
کد Bootstrap :
<php>
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
	$controller->$url[1]();	
}
<php>
کد About :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
	
	function AboutMe()
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
اگه URL بصورت زیر وارد کنیم نتیجه اینجوری میشه :
||http://tosinso.com/files/get/190a82d5-3dbb-4dcd-8cc6-61f41aae3416||
Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .
اگه این سری URL بصورت زیر وارد کنیم :
||http://tosinso.com/files/get/43a0aea9-3686-495b-895b-522977930044||
نتیجه اینه که کلی به ما خطا میده ، کدهای Bootstrap بصورت زیر ویرایش میکنیم تا دیگه بهمون خطا نده .
<php>
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>;
		}
	}	
}
<php>
تابع empty چک میکنه که آیا مقداری توی متغیر وجود داره یا نه . (با تابع isset فرق میکنه)
یه متغیر بنام method_name$ تعریف کردم و مقدار [1]url$ داخل میریزم و بعد با تابع method_exists چک میکنم که آیا تابعی با این نام (یعنی مقدار داخل method_name$) توی کلاس وجود داره یا نه ؟! اگه وجود داشت تابع رو فراخوانی میکنه وگرنه به ما خطای  method not found میده . (توی زبانهای برنامه نویسی دیگه زمانی که میخواستیم به توابعی از یه کلاس دسترسی داشته باشیم بعد از نام اون کلاس کاراکتر . میزاشتیم و بعد نام تابع، ولی اینجا به جای . از <- استفاده میشه)
خوب حالا اگه خواستیم یه مقدار به تابعی که توی کلاسمون ایجاد کردیم بدیم و اون تابع بر حسب مقداری که بهش دادیم اعمالی رو انجام بده باید کدهارو کمی تغییر بدیم :
تابع Aboutme یا بصورت زیر تغییر میدیم :
<php>
function AboutMe($str = false)
{
	if($str == true)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
یا هم بصورت زیر :
<php>
function AboutMe($str = '')
{
	if(empty($str) == false)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
کد Bootstrap :
<php>
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>;
	}
}
<php>
یه متغیر بنام parametr$ تعریف کردم، که اگه مقداری توی [2]url$ بود این مقدار ریخته میشه توی متغییر parametr$ و به عنوان پارامتر تابع استفاده میشه .
||http://tosinso.com/files/get/319f56be-af64-4676-8628-66cc8c1c6d49||

امیدوارم از این قسمت هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .

اگه این سری URL بصورت زیر وارد کنیم :

سلام به همگی توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه class استفاده میشه و زمانی که توی کلاسون میخوایم تابع سازنده داشته باشیم باید اسم اون تابع رو ()construct___ بزاریم، در ابتدا یه فایل بنام Bootstrap.php توی فولدر Libs میسازیم. و کدهای زیر توش مینویسیم (در واقع داریم کلاسی بنام Bootstrap ایجاد میکنیم، در ادامه نقش این فایل رو در وب سایتمون میفهمید)
<php>
<?php
class Bootstrap
{
	function __construct()
	{
	}
}
<php>
حالا کد های php که توی فایل index.php در قسمت قبلی نوشتیمو اضافه میکنیم به فایل Bootstrap و کدهای php صفحه index.php بصورت زیر ویرایش میکنیم :
کدهای Bootstrap :
<php>
<?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>
کدهای php صفحه index.php :
<php>
<?php

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>
اگه بخوایم کدهای یه فایل دیگه رو توی یه فایل دیگه استفاده کنیم از تابع require استفاده میکنیم و خط دوم هم یه شی از نوع کلاس Bootstrap میسازه به نام app$  .
خوب باید سه تابع دیگه بنام های Index,About,Login ایجاد کنیم، پس کدهای زیر توی فایل های Index.php , About.php , Login.php که توی فولدر Controllers هستن مینویسیم . (توی قسمتهای قبلی آموزش، این فایل هارو ایجاد کردیم)
کد About.php :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
}
<php>
کد Index.php :
<php>
<?php

class Index
{
	function __construct()
	{
		echo <br>Page Index ;
	}
}
<php>
کد Login.php :
<php>
<?php

class Login
{
	function __construct()
	{
		echo <br>Page Login ;
	}
}
<php>
خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :
||http://tosinso.com/files/get/521b30da-58fe-49d5-baf7-3b7e2f4e1884||
طبق کدی که من توی کلاس About نوشتم باید زمانی که صفحه about باز میشه متن Page About برام چاپ بشه ولی نشد، مشکل کجاست ؟
باید توی کلاس Bootstrap کدی بنویسیم تا برنامه بفهمه زمانی که توی URL آدرس صفحات سایت تایپ میشه، محتویات اون صفحه نمایش داده بشه .
بعد از آخرین دستور If ، یه else اضافه میکنیم که کدش بصورت زیر میشه :
<php>
if(!file_exists(Controllers/.$url[0]..php))
{
	echo Not Found Page;
}
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
}
<php>
کد بالا چک میکنه اگه URL ی بنویسیم که وجود نداره خطا بده، در غیر این صورت صفحه مورد نظر نشون بده و در اینجا مقدار [0]url$ برابر about هست، در نتیجه زمانی که کد اجرا میشه ()about بجای ()[0]url$ قرار میگیره و صفحه about نمایش داده میشه .
||http://tosinso.com/files/get/00994776-1b1a-4c34-8f02-39002764ba55||
میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه url ی وارد کنیم که صفحه ش وجود نداره بهمون خطا میده .
حالا اگه آخر کد Bootstrap و کد About بصورت زیر تغییر بدیم :
کد Bootstrap :
<php>
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
	$controller->$url[1]();	
}
<php>
کد About :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
	
	function AboutMe()
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
اگه URL بصورت زیر وارد کنیم نتیجه اینجوری میشه :
||http://tosinso.com/files/get/190a82d5-3dbb-4dcd-8cc6-61f41aae3416||
Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .
اگه این سری URL بصورت زیر وارد کنیم :
||http://tosinso.com/files/get/43a0aea9-3686-495b-895b-522977930044||
نتیجه اینه که کلی به ما خطا میده ، کدهای Bootstrap بصورت زیر ویرایش میکنیم تا دیگه بهمون خطا نده .
<php>
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>;
		}
	}	
}
<php>
تابع empty چک میکنه که آیا مقداری توی متغیر وجود داره یا نه . (با تابع isset فرق میکنه)
یه متغیر بنام method_name$ تعریف کردم و مقدار [1]url$ داخل میریزم و بعد با تابع method_exists چک میکنم که آیا تابعی با این نام (یعنی مقدار داخل method_name$) توی کلاس وجود داره یا نه ؟! اگه وجود داشت تابع رو فراخوانی میکنه وگرنه به ما خطای  method not found میده . (توی زبانهای برنامه نویسی دیگه زمانی که میخواستیم به توابعی از یه کلاس دسترسی داشته باشیم بعد از نام اون کلاس کاراکتر . میزاشتیم و بعد نام تابع، ولی اینجا به جای . از <- استفاده میشه)
خوب حالا اگه خواستیم یه مقدار به تابعی که توی کلاسمون ایجاد کردیم بدیم و اون تابع بر حسب مقداری که بهش دادیم اعمالی رو انجام بده باید کدهارو کمی تغییر بدیم :
تابع Aboutme یا بصورت زیر تغییر میدیم :
<php>
function AboutMe($str = false)
{
	if($str == true)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
یا هم بصورت زیر :
<php>
function AboutMe($str = '')
{
	if(empty($str) == false)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
کد Bootstrap :
<php>
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>;
	}
}
<php>
یه متغیر بنام parametr$ تعریف کردم، که اگه مقداری توی [2]url$ بود این مقدار ریخته میشه توی متغییر parametr$ و به عنوان پارامتر تابع استفاده میشه .
||http://tosinso.com/files/get/319f56be-af64-4676-8628-66cc8c1c6d49||

امیدوارم از این قسمت هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نتیجه اینه که کلی به ما خطا میده ، کدهای 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$ و به عنوان پارامتر تابع استفاده میشه .

سلام به همگی توی این قسمت میخوایم وارد بحث کلاسها بشیم و همینطور که پیش میریم با چندتا باگ دیگه برخورد میکنیم که بهتون میگم چه جوری برطرفش کنید .واسه تعریف کردن کلاس از کلمه class استفاده میشه و زمانی که توی کلاسون میخوایم تابع سازنده داشته باشیم باید اسم اون تابع رو ()construct___ بزاریم، در ابتدا یه فایل بنام Bootstrap.php توی فولدر Libs میسازیم. و کدهای زیر توش مینویسیم (در واقع داریم کلاسی بنام Bootstrap ایجاد میکنیم، در ادامه نقش این فایل رو در وب سایتمون میفهمید)
<php>
<?php
class Bootstrap
{
	function __construct()
	{
	}
}
<php>
حالا کد های php که توی فایل index.php در قسمت قبلی نوشتیمو اضافه میکنیم به فایل Bootstrap و کدهای php صفحه index.php بصورت زیر ویرایش میکنیم :
کدهای Bootstrap :
<php>
<?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>
کدهای php صفحه index.php :
<php>
<?php

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>
اگه بخوایم کدهای یه فایل دیگه رو توی یه فایل دیگه استفاده کنیم از تابع require استفاده میکنیم و خط دوم هم یه شی از نوع کلاس Bootstrap میسازه به نام app$  .
خوب باید سه تابع دیگه بنام های Index,About,Login ایجاد کنیم، پس کدهای زیر توی فایل های Index.php , About.php , Login.php که توی فولدر Controllers هستن مینویسیم . (توی قسمتهای قبلی آموزش، این فایل هارو ایجاد کردیم)
کد About.php :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
}
<php>
کد Index.php :
<php>
<?php

class Index
{
	function __construct()
	{
		echo <br>Page Index ;
	}
}
<php>
کد Login.php :
<php>
<?php

class Login
{
	function __construct()
	{
		echo <br>Page Login ;
	}
}
<php>
خوب حالا یه تست میکنیم ببینیم چه جوری اجرا میشه :
||http://tosinso.com/files/get/521b30da-58fe-49d5-baf7-3b7e2f4e1884||
طبق کدی که من توی کلاس About نوشتم باید زمانی که صفحه about باز میشه متن Page About برام چاپ بشه ولی نشد، مشکل کجاست ؟
باید توی کلاس Bootstrap کدی بنویسیم تا برنامه بفهمه زمانی که توی URL آدرس صفحات سایت تایپ میشه، محتویات اون صفحه نمایش داده بشه .
بعد از آخرین دستور If ، یه else اضافه میکنیم که کدش بصورت زیر میشه :
<php>
if(!file_exists(Controllers/.$url[0]..php))
{
	echo Not Found Page;
}
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
}
<php>
کد بالا چک میکنه اگه URL ی بنویسیم که وجود نداره خطا بده، در غیر این صورت صفحه مورد نظر نشون بده و در اینجا مقدار [0]url$ برابر about هست، در نتیجه زمانی که کد اجرا میشه ()about بجای ()[0]url$ قرار میگیره و صفحه about نمایش داده میشه .
||http://tosinso.com/files/get/00994776-1b1a-4c34-8f02-39002764ba55||
میبینید که جواب داد میتونید بقیه صفحه هارو هم امتحان کنید و اگه url ی وارد کنیم که صفحه ش وجود نداره بهمون خطا میده .
حالا اگه آخر کد Bootstrap و کد About بصورت زیر تغییر بدیم :
کد Bootstrap :
<php>
else
{
	$file = controllers/.$url[0]..php;
	require($file);
	$controller = new $url[0]();
	$controller->$url[1]();	
}
<php>
کد About :
<php>
<?php

class About
{
	function __construct()
	{
		echo <br>Page About ;
	}
	
	function AboutMe()
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
اگه URL بصورت زیر وارد کنیم نتیجه اینجوری میشه :
||http://tosinso.com/files/get/190a82d5-3dbb-4dcd-8cc6-61f41aae3416||
Aboutme بعنوان یکی از توابع کلاس About هست ، که اینجوری توی URL میشه بهش دسترسی داشت .
اگه این سری URL بصورت زیر وارد کنیم :
||http://tosinso.com/files/get/43a0aea9-3686-495b-895b-522977930044||
نتیجه اینه که کلی به ما خطا میده ، کدهای Bootstrap بصورت زیر ویرایش میکنیم تا دیگه بهمون خطا نده .
<php>
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>;
		}
	}	
}
<php>
تابع empty چک میکنه که آیا مقداری توی متغیر وجود داره یا نه . (با تابع isset فرق میکنه)
یه متغیر بنام method_name$ تعریف کردم و مقدار [1]url$ داخل میریزم و بعد با تابع method_exists چک میکنم که آیا تابعی با این نام (یعنی مقدار داخل method_name$) توی کلاس وجود داره یا نه ؟! اگه وجود داشت تابع رو فراخوانی میکنه وگرنه به ما خطای  method not found میده . (توی زبانهای برنامه نویسی دیگه زمانی که میخواستیم به توابعی از یه کلاس دسترسی داشته باشیم بعد از نام اون کلاس کاراکتر . میزاشتیم و بعد نام تابع، ولی اینجا به جای . از <- استفاده میشه)
خوب حالا اگه خواستیم یه مقدار به تابعی که توی کلاسمون ایجاد کردیم بدیم و اون تابع بر حسب مقداری که بهش دادیم اعمالی رو انجام بده باید کدهارو کمی تغییر بدیم :
تابع Aboutme یا بصورت زیر تغییر میدیم :
<php>
function AboutMe($str = false)
{
	if($str == true)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
یا هم بصورت زیر :
<php>
function AboutMe($str = '')
{
	if(empty($str) == false)
	{
		echo '<br>........'.$str.'..........<br>';
	}
	else
	{
		echo '<br>........About Me..........<br>';
	}
}
<php>
کد Bootstrap :
<php>
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>;
	}
}
<php>
یه متغیر بنام parametr$ تعریف کردم، که اگه مقداری توی [2]url$ بود این مقدار ریخته میشه توی متغییر parametr$ و به عنوان پارامتر تابع استفاده میشه .
||http://tosinso.com/files/get/319f56be-af64-4676-8628-66cc8c1c6d49||

امیدوارم از این قسمت هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

امیدوارم از این قسمت هم استفاده لازم برده باشید .

دوره آموزشی برنامه نویسی MVC در PHP قسمت پنجم

خوب طبق توضیحاتی که در قسمت اول آموزش دادم 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 ارث میبره)

خوب حالا یه تست میکنیم :

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<?php

	require("libs/Controller.php");

	require("libs/Bootstrap.php");	
	$app = new Bootstrap();
	
?>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه)

function __construct()
{
	parent::__construct();
	
	echo "<br>Page Login ";
}

متونستیم بجای اینکه بنویسیم

parent::__construct();

این کد رو بنویسیم (هیچ فرقی نمیکنه)

Controller::__construct();

خوب حالا یه بار دیگه تست میکنیم :

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

دیدید که برامون پیغام 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) باز میکنیم بصورت زیر نمایش داده میشه :

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت 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>&nbsp;
                <input type="text" id="txt_User" name="txt_User" />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
            &copy;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>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا باید تابع سازنده کلاس 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 اجرا میشن .

خوب حالا یه اجرا میگیریم .

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور 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");
}

خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :

سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همگی دوستان خوب طبق توضیحاتی که در قسمت اول آموزش دادم MVC دارای سه بخش Controller و View  و Model هست که تا حدودی قسمت Controller انجام دادیم، فقط باید یه کلاس بنام Controller بسازیم که این کلاس میشه والد و باید ارث بری انجام بدیم ، بعد از اینکه کلاس Controller ایجاد کردیم، میریم سر وقت دو قسمت دیگه که اونارو هم به وب سایتمون اضافه کنیم . در ابتدا یه فایل به نام Controller.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم :

<php>
<?php

class Controller
{
	function __construct()
	{
		echo <br>Main Controller<br>;
	}
}
<php>

متن Main Controller واسه تست گذاشتم که بعداً غیرفعالش میکنیم، سپس به ابتدای کد کلاسهای About,Index.Login ، کد زیر رو اضافه میکنیم (مثلاً ابتدای کد Login بصورت زیر میشه)

<php>
class Login extends Controller
<php>

توی php واسه ارث بری از کلمه extends استفاده میشه (کلاس Login از کلاس Controller ارث میبره)
خوب حالا یه تست میکنیم :
||http://tosinso.com/files/get/94e2fc3a-0457-4448-89a9-7d823756f156||
بهمون خطا میده، میگه نتونست کلاس Controller پیدا کنه حالا واسه رفع خطا باید کدهای php فایل Index.php بصورت زیر ویرایش کنیم :

<php>
<?php

	require(libs/Controller.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

فقط خط اول میخواد اضافه کنیم . حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/6007aab2-dc9a-414b-a93f-4fab66ef7a81||
این سری بهمون خطا نداد ولی خوب چیزی هم واسمون چاپ نکرد، باید پیغام Main Controller برامون چاپ میشد، مشکل اینجاست که ما توی کد کلاس Controller گفتیم موقعی که تابع سازنده این کلاس فراخوانی میشه این پیغام چاپ بشه ولی هنوز کدی واسش ننوشتیم که این کارو انجام بده، واسه اینکار باید کد زیر  رو توی تابع سازنده کلاسهای Index,Login,About بنویسیم (مثلاً کلاس سازنده Login بصورت زیر میشه) 

<php>
function __construct()
{
	parent::__construct();
	
	echo <br>Page Login ;
}
<php>

متونستیم بجای اینکه بنویسیم 

<php>
parent::__construct();
<php>

این کد رو بنویسیم (هیچ فرقی نمیکنه)

<php>
Controller::__construct();
<php>

خوب حالا یه بار دیگه تست میکنیم :
||http://tosinso.com/files/get/4e15de14-b3e6-4218-92b6-0f4b484c6f0a||
دیدید که برامون پیغام Main Controller چاپ کرد، کلاس Controller به این خاطر ساختیم چون میخوایم از تکرار کدهای که قرار درآینده توی کلاسهای About,Index,Login بنویسیم جلوگیری کنیم و کدهارو فقط توی کلاس Controller بنویسیم و کلاسهای About,Index.Login با استفاده از قابلیت ارث بری از این کدها استفاده کنن (اینجوری هم کدمون ساختار بهتری پیدا میکنه، هم خطایابیش بهتر میشه و هم کمتر میخواد کد بنویسیم)
خوب میخوایم قسمت view برای وب سایتمون بسازیم واسه اینکار ابتدا باید یه فایل دیگه به نام View.php توی فولدر libs بسازیم و کدهای زیرو توش بنویسیم (در واقع داریم یه کلاس بنام view ایجاد میکنیم)

<php>
<?php

class View
{
	function __construct()
	{
		echo <br>we are in page View;
	}
}
<php>

تابع سازنده کلاس Controller بصورت زیر ویرایش میکنیم :

<php>
function __construct()
{
	echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>

یه شی به نام view از نوع کلاس View میسازیم، زمانی که میخوایم یه متغیری تعریف کنیم که بتونیم توی جاهای دیگه ای از کدمون بهش دسترسی داشته باشیم، باید قبل از نام متغیر کلمه this$ قرار بدیم، خوب دوباره باید کدهای php صفحه Index.php بصورت زیر تغییر بدیم :

<php>

<?php

	require(libs/Controller.php);
	require(libs/view.php);

	require(libs/Bootstrap.php);	
	$app = new Bootstrap();
	
?>
<php>

و زمانی که یکی از صفحات سایتمون (مثلاً صفحه About) باز میکنیم بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/43ee1298-cfbc-43ea-b640-00ef432131b1||
طبق توضیحاتی که در آموزشهای قبلی دادم، توی قسمت View فقط کدهایی نوشته میشن که میخوایم اطلاعاتی یا چیزی به کاربر نمایش داده بشن (مثل قالب سایت یا تگها و ...) پس در نتیجه میایم توی فولدر Views، سه فولدر بنام های Index,About,Login میسازیم و توی هر فولدر یه فایل به نام Index.php میسازیم .
کد Index.php توی فولدر Login :

<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>
        <ul>
        	<li>
            	<label>نام کاربری : </label>&nbsp;
                <input type=text id=txt_User name=txt_User />
            </li>   
            <li>
            	<label>رمز عبور : </label>&nbsp;
                <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>
<php>

کد Index.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>

	...........Page Index...........

</body>
</html>
<php>

کد Index.php توی فولدر About :

<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>

	...........Page About...........

</body>
</html>
<php>

خوب حالا یه فایل Header.php  و  Footer.php هم توی فولدر Views میسازیم و کدهای منو سایت (با کمی تغییرات) از صفحه Index.php (فایل Index.php  که توی فولدر وب سایتمون هست) انتقال میدیم به Header.php (بصورت زیر) :
کد ویرایش شده Index.php (توی فولدر وب سایتمون) :

<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>

<php>

کد Footer.php :

<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>
            &copy;Copyright
        </div>
    </div>

</body>
</html>
<php>

کد Header.php :

<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>
<php>

حالا اگه یه خروجی از وب سایتمون بگیریم بصورت زیر بهمون نمایش داده میشه :
||http://tosinso.com/files/get/e2d63c97-597e-4529-968f-f8cfb97c26d4||
حالا باید تابع سازنده کلاس Controller بصورت زیر ویرایش کنیم :
<php>
function __construct()
{
	//echo <br>Main Controller<br>;
	
	$this->view = new View();
}
<php>
و سپس کلاس View رو هم بصورت زیر ویرایش کنیم :
<php>
<?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);
	}
		
}
<php>
یه تابع بنام Render تعریف میکنیم و زمانی که ابن تابع فراخوانی میشه، ابتدا کدهای Header.php اجرا میشه سپس کدهای فایلی که نامش داخل متغیر name$ هست اجرا میشه و در آخر هم کدهای Footer.php اجرا میشن .
خوب حالا یه اجرا میگیریم . 
||http://tosinso.com/files/get/7f081e79-f716-4eab-95d5-2cab2780d9c4||
باید ابتدا این پیغام ها غیر فعال بشن ، باید دستور echo رو توی تابع سازنده کلاسهای About,Index,Login غیر فعال کنیم و سپس یه خط کد به این تابع سازنده اضافه کنیم .
کد تابع سازنده کلاس About :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page About ;
	
	$this->view->Render(About/index);
}
<php>
کد تابع سازنده کلاس Index :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Index ;
	
	$this->view->Render(Index/index);
}
<php>
کد تابع سازنده کلاس Login :
<php>
function __construct()
{
	parent::__construct();
	
	//echo <br>Page Login ;
	
	$this->view->Render(Login/index);
}
<php>
خوب حالا یه خروجی میگیریم ببینیم چه جوری شد :
||http://tosinso.com/files/get/e7a4c7d4-836e-4f99-a5d6-73d9a54e3f18||
||http://tosinso.com/files/get/328491d3-270e-4430-a7e7-c5f765baec2d||
خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب میبینید که تا اینجا همه چی درسته فقط باید یه قالب کوچک براش بنویسیم تا بهتر بشه .امیدوارم از این قسمت هم استفاده لازم برده باشید، توی آموزش بعدی کار با دیتابیس آموزش میدم بهمراه ایجاد یه بخشی از قالب سایت با CSS و JQuery .

دوره آموزشی برنامه نویسی MVC در PHP قسمت ششم

یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های 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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </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 استفاده میکنیم .

در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

کد 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 تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن )

و حالا یه خروجی دیگه میگیریم :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا قسمت هایی رو باید تغییر بدیم :

#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}

با استفاده از خاصیت border-radius میتونیم گوشه های کادر رو هلال کنیم .

اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

که من مقدار 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 قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و حالا دوباره یه تغییر کوچیک میدیم :

#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> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .

یه خروجی میگیریم ببینیم چطور شد :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب این تکه کد باید تغییر بدیم :

#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 و خط زیر متن .

حالا یه خروجی دیگه میگیریم .

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :

#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;
}

حالا یه خروجی میگیریم ببینیم چطوری شد:

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

تمام کد هایی که تا الان توی فایل 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 یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

سه ستون بنامهای 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 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟

یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!

یوزر رو admin' or '0'='1 و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)

امتحان میکنیم....

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :

یوزر رو #'alaki' or '1'='1 و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)

کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .

سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همگی دوستداران ITPro یه تغییر کوچولو توی روند آموزش ها دادم، از این به بعد در نظر دارم تو همین حین که آموزش های PHP جلو میره یه آموزش کوچیک هم درباره css و jquery  به کارمون اضافه کنم چون php کارا به غیر از اینکه باید به php مسلط باشن باید یه آشنایی خوبی هم با css و jquery داشته باشن . خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟!  در ابتدا میایم یه فولدر بنام CSS توی پوشه اصلی وب سایتمون میسازیم و یه فایل بنام Login.css توش ایجاد میکنیم .کد Login.php (توی فولدر Login) بصورت زیر تغییر میدیم :
<htm>
<!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>&nbsp;
                </li>
                <li>
                    <label>رمز عبور : </label>&nbsp;
                </li>
            </ul>
        </div>
        
        <ul>
        	<li id=title>
                <div>
                    PHP-MVC  Login
                </div>
            </li>
        </ul>        
    </div>

</body>

</html>
<htm>
با استفاده از کد زیر (که در بالا اومده)
<htm>
<link rel=stylesheet type=text/css href=CSS/Login.css/>
<htm>
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
||http://tosinso.com/files/get/baa4a88b-2da0-4fa1-8a3f-8d4587e0f8e3||
کد Login.css :
<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;
}
<css>
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن ) 
و حالا یه خروجی دیگه میگیریم :
||http://tosinso.com/files/get/217befcb-8d0f-4f3c-bd43-06c9618cf017||
خوب حالا قسمت هایی رو باید تغییر بدیم :
<css>
#SingUp
{
	height: 90px;
	background-color: #6260b6;
}

#Login
{
	width: 550px;
	height: 200px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #999;
}
<css>
با استفاده از خاصیت border-radius میتونیم گوشه های کادر  رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
||http://tosinso.com/files/get/c38ce87b-4c19-49c1-b94b-50353575b8c2||
که من مقدار 6260b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
<css>
#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;
}
<css>
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).

یه خروجی میگیریم :
||http://tosinso.com/files/get/1891caf3-cfb8-4bb0-8203-d4c2a2e78566||
و حالا دوباره یه تغییر کوچیک میدیم :
<css>
#SingUp, #Login
{
	/*border: 1px solid;*/
	margin: 0 auto;
}
<css>
خوب حالا این کدهارو هم اضافه میکنیم :
<css>
#SingUp #Btn_SingUp
{
	background-color: #168500;
	border: 1px solid #999;
	width: 70px;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
<css>
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست . 
کد زیر به قسمت SingUp #title# اضافه میکینم :
<css>
text-shadow: 0.5px 0.5px 5px #000;
<css>
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
<css>
text-shadow: 0px 0px 10px #FFF;
<css>
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
<css>
#Login ul
{
	padding: 0;
}
<css>
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
||http://tosinso.com/files/get/b67f1d57-2b8d-4325-9887-8c6d1190e7a5||
خوب این تکه کد باید تغییر بدیم :
<css>
#SingUp li
{
	float: left;
	margin-top: 20px;
}
<css>
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
<css>
#Login #title
{
	border-bottom: 1px solid #999;
	margin: 0 20px 30px 20px;
}

#Login #title div
{
	color: #4d279c;
	font-weight: bold;
	padding-bottom: 5px;
}
<css>
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن  PHP-MVC Login . توی خط دوم میایم یه فاصله 20px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله 30px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله 5px میزاریم بین متن PHP-MVC Login و خط زیر متن . 
حالا یه خروجی دیگه میگیریم .
||http://tosinso.com/files/get/6efa6362-4b43-4889-a7ff-1620f2951d3c||
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
<css>
#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;
}
<css>
حالا یه خروجی میگیریم ببینیم چطوری شد:
||http://tosinso.com/files/get/4463dd9f-3b94-48e5-a867-a71de1752d18||
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
<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;
}
<css>

خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
<left>
http:////localhost//phpmyadmin 
<left>
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
||http://tosinso.com/files/get/0b200874-4a14-4f6e-9f44-8051148ed0cc||
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
||http://tosinso.com/files/get/6b5df272-55c3-4ead-abd8-80a6aa6772fb||
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
||http://tosinso.com/files/get/be0692d1-0208-428c-bee8-c905569bfeb1|| 
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو 32 گذاشتم و نام کاربری هم حداکثر باید 10 کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .  
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام  Login_Model.php توی فولدر Models ایجاد میکنیم و کلاس Login_Model توش تعریف میکنیم :
کد Login_Model.php :
<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();
	}
}
<php>
یه تابع بنام run ایجاد میکنیم که توی خط اولش با استفاده از تابع mysql_connect به phpmyadmin وصل میشیم (در اینجا root و mr__prog به ترتیب یوزر و پسورد اکانت من هست  که باهاش وارد phpmyadmin میشم)
که توی خط بعدی گفتم اگه نتونیم به phpmyadmin وصل بشیم بهمون خطا بده، با استفاده از تابع mysql_select_db هم دیتابیس انتخاب می کنیم که توی خط بعد از اینم گفتم اگه مشکلی با  ارتباط به دیتابیس بوجود اومد بهمون خطا بده .
یورز و پسوردی که از کاربر میگیریم رو توی متغیر میریزیم و پسورد رو هم MD5 میکنیم . خط بعدی هم Query نوشتیم که گفتیم توی جدول بگرده و نسبت به ورودی ها (یعنی همون یوزر و پسورد) به ما نتیجه رو برگردونه که باز توی خط بعدی هم گفتیم اگه مشکلی توی Query بود و نتونست Query اجرا کنه بهمون خطا بده، سپس توی خط بعدی با استفاده از تابع mysql_fetch_row نتیجه Query رو توی یه متغیر بنام row$ میریزیم (خروجی آرایه هست) حالا اگه Query چیزی برامون برگردوند که تابع mysql_fetch_row تمام رکوردها رو توی متغیر row$ میریزه وگرنه چیزی توی متغیر ریخته نمیشه پس اگه یوزر و پسورد درست باشه به ما پیغام Welcome و اگه اشتباه باشه به ما پیغام Invalid Username Or Password میده حالا میایم یه تست میکینم البته قبلش باید یه تغییر توی کلاس Login بدیم :
کد Login.php (توی فولدر Controllers) :
<php>
<?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();
	}
}
<php>
که من یه تابع بنام run نوشتم و توش یه شی از کلاس Login_Model ایجاد کردم و تابع run توی کلاس  Login_Model  فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
<htm>
<form id=form_login name=form_login method=post action=Login/run >
	<div id=Login>
    		.
            .
            .
	</div>
</form>
<htm>
 خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
||http://tosinso.com/files/get/23321b86-aa9e-48b8-8f4f-7f1026fb1600||
||http://tosinso.com/files/get/fc42ad59-c9e6-430a-9846-d0692a726583||
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
||http://tosinso.com/files/get/1a927b12-9d7a-478d-8895-a306ac5fa5fd||
||http://tosinso.com/files/get/f827d3da-928b-4ee6-9fe1-68855d2aea0b||
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟ 
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو   admin' or '0'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم....
||http://tosinso.com/files/get/f156b2da-42f0-4274-825d-6f540e0d3388||
||http://tosinso.com/files/get/9bdda32e-4ff7-49dc-bb7d-c035b62b7def||
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو   #'alaki' or '1'='1  و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
||http://tosinso.com/files/get/ae993aee-e753-4251-8c47-0631d93b37c1||
||http://tosinso.com/files/get/ac397c09-4c88-422d-a2e3-31746122b0b6||
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .امیدوارم از این قسمت هم استفاده لازم برده باشید، میخواستم تو این قسمت کمی درباره JQuery بگم ولی خوب آموزش خیلی طولانی شد، ایشالله توی آموزش بعدی هم این باگ رو برطرف میکنیم هم کمی درباره JQuery توضیح میدم .

دوره آموزشی برنامه نویسی MVC در PHP قسمت هفتم

خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه 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;
}

حالا یه خروجی میگیریم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان میایم یه قالب واسه منوها مینویسیم .

کد زیر رو به کدهای 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;
}

خروجی رو باهم میبینیم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا این کدهارو هم اضافه میکینم :

#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}

خروجی :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :

این کد رو به 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;
}

خروجی :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب میبینید که با موس روی منو "خانه" رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد 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;
}

خروجی میگیریم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .

میتونیم از تابعی به نام 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);
             .
             .
             .

خوب الان یه خروجی میگیریم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار 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);
                  .
                  .
                  .

و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع 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);
           .
           .
           .

خروجی :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع 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 دادیم رکوردی برای ما برگردونده .

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت) .

کد Index.php :

             .
             .
             .
require("libs/view.php");
	
require("libs/Model.php");

require("libs/Bootstrap.php");
             .
             .
             .

فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)

یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :

require("Libs/Database.php");

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :

require("Config/database.php");

خروجی میگیریم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .

در ابتدا کد 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();
}

کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)

خوب الان یه خروجی میگیریم :

سلام به همه دوستان خوب در ابتدا یه تغییراتی انجام میدیم، میخوایم این کادر بالای صفحه Login توی کل صفحات باشه به عنوان هدر سایت و در ادامه یه قالب واسه لیست منو ها مینویسیم .توی کد Index.php (توی فولدر Login) تگ div با id بنام SingUp داریم که این تگ رو انتقال میدیم به کدهای Header.php .البته به غیر از انتقال تگ ، یکمی هم کد header.php بصورت زیر تغییر میدیم .کد header.php :
<htm>
<!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>
<htm>
خوب حالا یه فایل بنام header.css توی فولدر CSS میسازیم و سپس کدهای CSS مربوط به تگ SingUp رو از فایل Login.css انتقال میدیم به فایل header.css (با کمی تغییرات) .

کد header.css :
<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;
}
<css>

کد Login.css :
<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;
}
<css>

حالا یه خروجی میگیریم :
||http://tosinso.com/files/get/c12e6551-a622-4583-8498-b8102150e264||
||http://tosinso.com/files/get/779059f9-849e-47d2-8e5f-52d9ae879ee5||

خوب الان میایم یه قالب واسه منوها مینویسیم .
کد زیر رو به کدهای header.css اضافه میکنیم :
<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;
}
<css>
خروجی رو باهم میبینیم :
||http://tosinso.com/files/get/c7717d97-50bc-4218-a8a9-78eafeda9bfc||

حالا این کدهارو هم اضافه میکینم :
<css>
#MainMenu a
{
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bdbbbb;
	background-color: #3f44a0;
	text-decoration: none;
	display: block;
	width: 80px;
	height: 30px;	
}
<css>
خروجی :
||http://tosinso.com/files/get/463ad652-3d1e-492e-9289-e1c8e7247776||
خوب حالا میخوایم زمانی که کاربر نشانگر موس رو روی منو ها میبره، رنگ پس زمینه منو ها عوض بشه :
این کد رو به header.css اضافه میکینم :
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/d10618d1-d962-47bd-b62e-03c61fc1872c||
خوب میبینید که با موس روی منو خانه رفتیم و رنگ پس زمینه عوض شد همچنین با استفاده از کد box-shadow یه سایه هم دور دکمه منو ها گذاشتیم ، بخاطر اینکه box-shadow روی browser های مختلف کار کنه در نتیجه به اول این کد moz و webkit و ms و o اضافه میکنیم . (این کد جز کدهای CSS3 هست) ولی خوب این قضیه 100% جواب نمیده یعنی با اینکه به ابتدای کدها ms یا moz اضافه کردیم ولی ممکنه بازم روی بعضی از browser ها کار نکنه .
moz واسه mozila 
webkit واسه google chrome 
ms واسه Internet Explorer
o واسه Opera

حالا میایم کدهایی رو بصورت زیر تغییر میدیم :
<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 #9b9b9b;
	text-align: center;
	line-height: 30px;
}
<css>
خروجی میگیریم :
||http://tosinso.com/files/get/6f0e52b6-49af-4352-8f69-5516128b9056||

خوب توی قسمت قبلی دیدیم که کدمون اشکال داشت و یه هکر راحت میتونست بدون اینکه یوزر و پسورد داشته باشه به سایت نفوذ کنه حالا میایم این باگ رفع میکنیم .
میتونیم از تابعی به نام  mysql__real__escape__string استفاده کنیم ابتدا قبل استفاده از این تابع، کد Login__Model.php بصورت زیر تغییر میدیم ( فقط یه تابع die اضافه میکنیم تا ببینیم مقادیری که وارد میکنیم به چه صورتی میشه )
<php>
             .
             .
             .
$user = $_POST[txt_User];
$pass = md5($_POST[txt_Pass]);
$sql = select * from tlb_UserPass where username='{$user}' and password='{$pass}';
		die($sql);
             .
             .
             .
<php>

خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/7f83a8f5-a715-43d1-b77a-8a973db1be50||
خوب توی عکس میبینید که با توجه به ورودی ما، برنامه زمانی خروجی برمیگردونه که یا یوزر برابر مقدار alaki باشه یا هم 1 برابر 1 ، پس همیشه نتیجه شرط درست میشه و هکر میتونه به سایت نفوذ کنه و بقیه دستورات بعد از کاراکتر # نیز نادیده گرفته میشه (یعنی بقیه دستورات بصورت کامنت یا توضیحات در نظر گرفته میشه)
حالا میایم یه مقدار کد تغییر میدیم و تابع mysql__real__escape__string اضافه میکنیم .
<php>
                  .
                  .
                  .
//$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);
                  .
                  .
                  .
<php>
و خروجی میگیریم ببینیم بازم میتونیم به سایت نفوذ کنیم یا نه ؟؟
||http://tosinso.com/files/get/cdef762c-38a4-45b0-a8ff-2f780d265331||
||http://tosinso.com/files/get/5f29e5df-c89e-4817-aaad-d7e74dd5f045||
خوب میبینید که دیگه اجازه نداد به سایت نفوذ کنیم، الان میایم از تابع die استفاده میکنیم ببینیم این تابع mysql__real__escape__string چه بلایی سر ورودی که ما بهش دادیم آورد که دیگه بهمون Welcome نداد (یعنی نتونستیم به سایت نفوذ کنیم)
کد بصورت زیر تغییر میدیم (فقط یه die بهش اضافه میکنیم) :
<php>
             .
             .
             .
//$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);
           .
           .
           .
<php>

خروجی :
||http://tosinso.com/files/get/6db43116-e261-404c-8bcc-86497d2d31b2||
خوب میبینید که کاراکتر های ' (تک کوتیشن) رو با استفاده از کاراکتر \ غیر فعال میکنه .

با این حال که باگ کد گرفتیم ولی بازم شاید یه هکر بتونه به سایت نفوذ کنه ، بهترین راه حل اینکه که از توابع PDO واسه اتصال به بانک اطلاعاتی و اجرای دستورات روی جداول استفاده کنیم اینجوری هم امنیت سایت بالا میره هم اینکه با استفاده از توابع PDO میتونیم به راحتی با تغییر خیلی کوچیک توی کدها، به انواع دیگه ای از بانکهای اطلاعاتی (مثلاً MSSql، SQLite و Oracle و...) متصل بشیم و ازشون استفاده کنیم ولی اگه از توابع PDO استفاده نکنیم زمانی که مثلاً دیگه نمیخوایم توی سایتمون از بانک Mysql استفاده کنیم و ترجیح میدیم از بانک Oracle استفاده کنیم در نتیجه مجبوریم خیلی از کدهایی که نوشتیمو تغییر بدیم که کلی دردسر داره و  وقت زیادی میبره ولی با استفاده از توابع PDO این کار خیلی راحت با تغییر چند خط کد انجام میشه ، پس حالا میایم یه تغییراتی توی کدهامون میدیم که بتونیم از توابع PDO استفاده کنیم .
یه فولدر میسازیم بنام Config و یه فایل بنام database.php توش میسازیم ، حالا این کدهارو توش مینویسیم .
<php>
<?php
define(DB_TYPE, mysql);
define(DB_HOST, localhost);
define(DB_NAME, ITPro);
define(DB_USER, root);
define(DB_PASS, mehdi!1230);
<php>
تابع define یه متغیر میسازه و یه مقدار داخلش میزاره، که میتونیم همه جای سایت به این متغیر دسترسی داشته باشیم و مقدارش هم ثابت هست (یعنی قابل تغییر نیست) .
الان میایم یه فایل دیگه بنام Database.php توی فولدر Libs میسازیم و کدهای زیر توش قرار میدیم (میخوایم یه کلاس بنام Database ایجاد کنیم که از PDO ارث میبره و میتونیم از توابع PDO استفاده کنیم توی سایتمون)
<php>
<?php
class Database extends PDO
{
	function __construct()
	{
		parent::__construct(DB_TYPE.:host=.DB_HOST.;dbname=.DB_NAME, DB_USER, DB_PASS);
	}
}
<php>
ورودی تابع سازنده PDO به ترتیب نوع بانک اطلاعاتی، هاست، نام دیتابیس، یوزر و پسورد هست که با استفاده از متغیرهایی که ساختیم مقدار دهی کردیم .
الان با این خط کد به بانک اطلاعاتی متصل شدیم حالا از این کلاس استفاده میکنیم توی فایل Login_Model.php  .
ابتدا یه کلاس دیگه هم تولید میکنیم و کدهایی که مشترک هستن واسه کار با دیتابیس رو اونجا مینویسیم و سپس بقیه کلاس ها از این کلاس ارث میبرن .
یه فایل بنام Model.php توی فولدر Libs میسازیم و کدهای زیر توش مینویسیم (میخوایم کلاس Model ایجاد کنیم تا بقیه کلاسها که عملیاتی روی دیتابیس انجام میدن از این کلاس ارث ببرن)
<php>
<?php

class Model
{
	function __construct()
	{
		$this->db = new Database();
	}
}
<php>
یه شی از نوع کلاس Database میسازه (و تابع سازنده اش فراخوانی میشه) و مقدار برگشتی رو توی یه متغیر به نام db میریزه که بعداً از این متغیر استفاده میکنیم .
حالا میایم کد Login_Model.php کمی تغییر میدیم بصورت زیر (فقط کاری میکنیم که این کلاس از کلاس Model ارث ببره و تابع سازنده کلاس Model فراخوانی میکنیم)، در ضمن کدهای اتصال به دیتابیس و MYSql غیر فعال میکنیم (یا بهتر که حذفشون بکنیم) چون دیگه این کدهارو توی کلاس Databese نوشتیم و دیگه نیازی بهشون نداریم .
کد Login_Model.php :
<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;
		}
	}
}
<php>
توضیح کدهای بالا، Query که مینویسیم رو توی تابع prepare قرار میدیم و تابع execute میاد Query که نوشتیمو اجرا میکنه و اگه این Query باید ورودی بگیره توی تابع execute ورودی هارو بصورت آرایه بهش میدیم (که اینجا من ورودی هارو بصورت آرایه به Query دادم) و سپس با تابع rowcount چک میکنیم که اگه بزرگتر از صفر بود یعنی Query با موفقیت اجرا شده و یه رکورد برای ما (به عنوان خروجی) برگردونده ولی اگه کمتر از صفر باشه یعنی نتونست نسبت به شرط و مقداری که به Query دادیم رکوردی برای ما برگردونده .
||http://tosinso.com/files/get/097a2b03-9f31-4553-9319-c376c0a773e4||
||http://tosinso.com/files/get/89b1c566-a9d5-4fcd-8c64-8a477a273417||
خطا میده ، میگه نتونست کلاس Model پیدا کنه ، پس ما باید با دستور require این خطا رو برطرف کنیم، کد زیر رو اضافه میکنیم به فایل Index.php (توی پوشه اصلی سایت)  .
کد Index.php :
<php>
             .
             .
             .
require(libs/view.php);
	
require(libs/Model.php);

require(libs/Bootstrap.php);
             .
             .
             .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Index.php هست)
یه بار دیگه که امتحان کنیم به این خطا برخورد میکنیم :
||http://tosinso.com/files/get/7b93b03e-c632-417a-89dc-053407360393||
این سری کلاس Database پیدا نکرد در نتیجه همون کاری که بالا انجام دادیم واسه کلاس Database هم انجام میدیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Libs/Database.php);
<php>

همین جوری هی خروجی میگیریم تا ببینیم به چه خطاهایی برخورد میکنیم و اونارو رفع کنیم :
||http://tosinso.com/files/get/27493487-3c66-496f-8f84-84a24b7764d8||
این خطا هم میگه که نتونست اون متغیرهایی که با دستور define تعریف کردیمو پیدا کنه پس این خطا رو هم مثل بالا رفعش میکنیم، کد زیر به Index.php اضافه میکنیم :
<php>
require(Config/database.php);
<php>
خروجی میگیریم :
||http://tosinso.com/files/get/5bbc2f64-e4ce-45b4-803b-ce302cff829f||
میبینید که الان جواب داد ، حالا میایم یه تغییرات دیگه هم به کدهای سایتمون میدیم .
در ابتدا کد Bootstrap.php بصورت زیر تغییر میدیم .
<php>
                 .
                 .
                 .
$controller = new $url[0]();
$controller->loadModel($url[0]);

if(!empty($url[1]))
                 .
                 .
                 .
<php>
فقط خط دوم به کدها اضافه میکنیم (مابقی خطها توی Bootstrap.php هست)، یه تابع فراخوانی میکنیم بنام loadModel و مقدار [0]url$ بهش میدیم (در ادامه این تابع توی کلاس Controller تعریف میکنیم)
کد Controller.php بصورت زیر تغییر میدیم :
<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();
		}
	}	
}
<php>
تابع loadModel یه ورودی میگیره که این ورودی اولین خانه آرایه url هست (یعنی [0]url$) و این ورودی رو به model.php__ و /models میچسبونه و یه مقدار جدید (که میشه یه فایل بهمراه مسیرش) درست میشه و توی متغیر path$ قرار میگیره و سپس چک میکنه که اگه این فایل با همچین مسیری وجود داشت که یه شی ازش میسازه (که در نتیجه تابع سازندش فراخوانی میشه) و سپس نتیجه رو توی متغیر model میریزه که بعداً توی کلاس Login ازش استفاده میکنیم . (این کد رو واسه این نوشتیم چون در آینده توی فولدر Models یا Controllers کلاس های دیگه ای به غیر از Login__Model یا Login اضافه میکنیم و بخاطر اینکه از تعداد خط های کد اضافی بکاهیم این تابع رو نوشتیم اگه این تابع رو نمی نوشتیم باید توی هر کلاسی که (در آینده) توی فولدر Models یا Controlers تعریف میکنیم چند خط کد بنویسیم (مثلاً همین کدی که توی تابع run از کلاس Login نوشتیم) و اینجوری هم تعداد خط کد بالا میره هم بیشتر پیچیده میشه در نتیجه خطا یابیش مشکل تر میشه) .
خوب طبق چیزایی که در بالا گفتم باید تابع ()run توی کلاس Login بصورت زیر تغییر بدیم :
<php>
function run()
{
	//require(models/Login_Model.php);
	
	//$L_M = new Login_Model();
	//$L_M->run();
	
	$this->model->run();
}
<php>
کدهای قبلی رو غیر فعال کردم و بجاش فقط خط آخر اضافه میکنم . (که پیچیدگی کمتر بشه و خطایابیش سریع تر انجام بگیره)
خوب الان یه خروجی میگیریم :
||http://tosinso.com/files/get/e14ef9a0-04c2-46fe-97b9-4a380c1c6c2a||
میبینید که داره درست جواب میده .

امیدوارم این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که داره درست جواب میده .

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

توی این قسمت و قسمت بعدی میخوام درباره 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="نام" />&nbsp;
                            <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>

خروجی :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان میایم یه فایل بنام 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;
}

خروجی :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این خط کد رو به Register# اضافه میکنیم :

text-align:right;

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)

تغییر در کد Index .php (توی فولدر Index) :

                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id="fn_ln">
	<input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" />&nbsp;
                        .
                        .
                        .

فقط "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;
}

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب میبینید که توی عکس 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;
}

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .

#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;
}

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا میایم یه خورده استایل دو خط متنی که زیر دکمه "ثبت نام" قرار داره رو تغییر میدیم :

#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;
}

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و یه خورده هم متن "عضویت در سایت ...!" تغییر میدیم و یه فاصله بین 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;
}

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .

#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}

توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left. و right. بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه استایل هم به 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;
}

نتیجه :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب باید ارتفاع RegNews# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت RegNews# (توی کد register.css) اضافه میکنیم .

height: 600px;

خوب الان یه بار دیگه نتیجه رو میبینیم :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن 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;

یه خروجی از نتیجه کارمون میگیریم :

با سلام به تمامی دوستان *ITPro* ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت |JQuery::http://jquery.com/download/| مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                          .
                          .
                          .
<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>
                          .
                          .
                          .
<htm>
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
<js>
<script> type=text/javascript src=http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js></script >
<js>
یا 
<js>
<script> type=text/javascript   src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script >
<js>
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید . 

خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
<js>
$(function()
{
       دستورات ...
});

<js>
قواعد دستوری در JQuery بصورت زیر هست :
<js>
$(selector).action();
<js>
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
<js>
$(#message).hide();
<js>
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
<php>
$(selector).event(function()
{ 
      دستورات ... 
});
<php>
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { }  مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت |JQuery::www.jquery.com| برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون . 

تغییر در کد Index .php (توی فولدر Index) :

<htm>
                        .
                        .
                        .
<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=نام />&nbsp;
                            <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>
<htm>

خروجی :
||http://tosinso.com/files/get/d638ffc3-142b-4136-b823-50656e6a57bb||
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
<htm>
                     .
                     .
                     .
<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>
                     .
                     .
                     .
<htm>
فقط تگ <link> اضافه کردم .
کد register.css :
<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;
}
<css>

خروجی :
||http://tosinso.com/files/get/cf70721d-8b37-4372-9ebd-154eb32efdef||
این خط کد رو به Register# اضافه میکنیم :
<css>
text-align:right;
<css>
نتیجه :
||http://tosinso.com/files/get/734cc14c-4138-4563-acb6-de1cc8a9b358||
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
<htm>
                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id=fn_ln>
	<input type=text name=txt_Name id=txt_Name value=نام class=borderstyle />&nbsp;
                        .
                        .
                        .
<htm>
فقط  id=fn_ln  اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
<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;
}
<css>
نتیجه :
||http://tosinso.com/files/get/ec4635c0-3d46-40cf-916c-77846545b038||
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
<htm>
class=borderstyle
<htm>
کد Index.php (شبیه زیر):
<htm>
                        .
                        .
                        .
                        <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>
                           .
                           .
                           .
<htm>
حالا تکه کد زیر به register.css اضافه میکنیم :
<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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/abd70185-a9ad-4caf-94e1-87138f2ff8bf||
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/2998a6c2-58d8-481f-9da9-27faefca0e8f||
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه ثبت نام قرار داره رو تغییر میدیم :
<css>
#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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/ef4f9697-3f10-48f7-b094-e3b33c64b508||
و یه خورده هم متن عضویت در سایت ...! تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
<css>
.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;
}
<css>

نتیجه :
||http://tosinso.com/files/get/0d04ecd1-1235-48c3-a43a-478fbbfdd3c6||
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}
<css>
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left.  و  right.  بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :
||http://tosinso.com/files/get/9b459bb1-e603-46bf-864c-d58ad2e45b16||
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
<htm>
                        .
                        .
                        .
<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>
                        .
                        .
                        .
<htm>
کد Footer.css :
<css>
#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}
<css>

نتیجه :
||http://tosinso.com/files/get/79aef1d0-6ee2-49bf-b04b-8affbd5097d9||
خوب باید ارتفاع Reg_News# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت Reg_News# (توی کد register.css) اضافه میکنیم .
<css>
height: 600px;
<css>
خوب الان یه بار دیگه نتیجه رو میبینیم :
||http://tosinso.com/files/get/79851cb5-4e6e-4169-b64f-9394e34cd6bb||
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه)  .
کد زیر به Footer.css اضافه میکنیم :
<css>
#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}
<css>
حالا عرض قسمت Register# تغییر میدیم .
<css>
width:530px;
<css>
عرض قسمت News# هم تغییر میدیم .
<css>
width:450px;
<css>

یه خروجی از نتیجه کارمون میگیریم :
||http://tosinso.com/files/get/af89fb9d-6d1c-408d-a505-202d69eeea95||
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:

1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم.

دوره آموزشی برنامه نویسی MVC در PHP قسمت نهم

توی قسمت قبلی یه فرم ثبت نام درست کردیم حالا میخوایم این فرم تکمیل کنیم با کمک 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;

تمام فایلهایی که تا الان واسه وب سایت درست کردیم آپلود کردم میتونید از این لینک دانلود کنید .

خروجی :

سلام به همه دوستان توی قسمت قبلی یه فرم ثبت نام درست کردیم حالا میخوایم این فرم تکمیل کنیم با کمک JQuery .خوب در ابتدا مثل همیشه یه تغییر کوچیک توی سایت میدیم، فاصله بین منوی درباره و دکمه ثبت نام کمی بیشتر میکنیم . تغییر width در قسمت Reg_News# در فایل Register.css :
<css>
width: 1100px;
<css>
تغییر width در قسمت SingUp# در فایل Header.css :
<css>
width: 1200px;
<css>
تغییر margin-left در قسمت SingUp #title# در فایل Header.css :
<css>
margin-left: 10px;
<css>
تغییر width در قسمت MainMenu# در فایل Header.css :
<css>
width: 1200px;
<css>
تغییر width و padding در قسمت Register# در فایل Register.css :
<css>
padding: 22px;
width:490px;
<css>
تغییر width در قسمت News# در فایل Register.css :
<css>
width: 430px;
<css>
تمام فایلهایی که تا الان واسه وب سایت درست کردیم آپلود کردم میتونید از این |لینک::http://www.mediafire.com/download/w3o0sturc30m4em/ITPro.ir.rar| دانلود کنید .
خروجی :
||http://tosinso.com/files/get/136013da-580a-419b-a144-a78d72b312b4||
الان میخوایم زمانی که روی textbox ها کلیک میکنیم متن داخل هر کدوم پاک بشه .یه فابل بنام Register.js توی فولدر Index میسازیم و لینکش میکنیم به فایل Index.php  (توی فولدر Index) بصورت زیر و شروع میکنیم به کد نویسی.
<htm>
<script> type=text/javascript src=views/index/register.js></script>
<htm>
<js>
$(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();
		}
	});		
});
<js>
کد بالا به ما میگه زمانی که فکوس میکنیم توی تگهایی که نام کلاسشون borderstyle هست، رنگ کادر به رنگ darkgrey (یعنی خاکستری) تغییر کنه (این تغییر واسه اینه که در ادامه میخوایم کدی بنویسیم که زمانی که فوکوس میکنیم به textbox ی و چیزی توش نمی نویسیم و فوکوس ازش میگیریم میخوایم رنگ کادر قرمز بشه پس بخاطر همینه که اینجا رنگشو به خاکستری تغییر میدیم) و رنگ متن هم از رنگ خاکستری (که بصورت پیشفرض گذاشتیم) به رنگ سیاه تغییر کنه .این شرط هم به ما میگه که زمانی که فوکوس میکنیم به شی، اگه اسم اون شی مثلاً  txt_Name  بود یعنی فوکوس کردیم به کادر متنی که میخوایم توش نام وارد کنیم و حالا اگه مثلاً حاوی نام بود یعنی هنوز توی کادر نام چیزی وارد نکردیم درنتیجه هر چی توی کادر نام هست پاک میکنه .واسه اینکه بخوایم با JQuery استایل بدیم به اشیا، بصورت زیر عمل میکنیم .
<htm>
$(tag name).css(Property , value);
<htm>
با استفاده از تابع ()prop توی JQuery میتونیم به خاصیت های تگها دسترسی داشته باشیم .با استفاده از تابع ()val میتونیم مقداری بریزیم توی شی یا مقدارشو بگیریم ( اشیایی مثل textbox ) . خوب حالا اگه فوکوس از شی برداریم میخوایم کاری کنیم که اگه مقداری توش ننوشتیم دور کادر متن قرمز بشه .
<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_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);
	}
});
<js>
کد بالا به ما میگه زمانی که فکوس از یه شی برمیداریم کادر متن به رنگ قرمز تغییر کنه (البته اگه در ادامه شرط اینکه مقداری باید داخل textbox ها باشه درست باشه رنگ کادر به خاکستری تغییر میکنه)، شرط ها شبیه شرط های هستن که در بالاتر توضسح دادم با این تفاوت که این شرط ها طمانی درست هستن که متنی داخل textbox نباشه زمانی که فوکوس برمیداریم، بعضی جاها کدی مثل کد پایی آوردم . 
<js>
$(this).prop(type, text);
<js>
این کد واسه اینه که مبخوایم به خاصیت type یه شی دسترسی داشته باشیم و مقدارشو به text تغییر بدیم، این خط کد هم واسه کادر های رمزعبور هست که میخوایم زمانی که فوکوس میکنیم به کادر رمزعبور مقدار این خاصیت password بشه (واسه امنیت کلمه عبور) و اگه مقداری توی کادر رمزعبور وارد نکردیم این مقدار به text تغییر کنه .
در جاهایی هم کد زیر رو آوردم :
<js>
$(this).prop(dir, rtl);
<js>
این کد هم واسه کادر ایمیل هست و واسه اینه که میخوایم زمانی که فوکوس برمیداریم از این کادر متن (زمانی که حاوی مقدار نیست)، مقدار  dir (مخفف direction یعنی جهت) برابر rtl بشه (یعنی جهت نوشتن از راست به چپ) چون زمانی که فوکوس میکنیم میخوایم این مقدار به ltr (یعنی جهت نوشتن از  چپ به راست) تغییر کنه .اون else آخر کار هم واسه اینه که میخوایم زمانی که فوکوس از یه کادر متن برمیداریم و این کادر متن حاوی مقداریست، دیگه رنگ دور کادر متن قرمز نباشه .خوب حالا می یایم کدمونو کمی بهتر میکنیم، میخوایم زمانی که فوکوس از کادر رمزعبور برمیداریم اگه مقدار دو کادر متن باهم یکی نبود قرمز بشه .  کدهای زیرو به ادامه کدهای قسمت else (که در بالا بود)، اضافه میکنیم .
<js>
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);
		}
	}
}
<js>
شرط اول توی کد بالا به ما میگه اگه کادر متنی که فوکوس کردیم بهش، کادر رمز اولی هست و شرط دوم هم میگه اگه کادر رمز دومی مقدارش تکرار رمز عبور  نبود (یعنی مقداری توی کادر رمز دومی وارد کردیم) در نتیجه این دو مقدار باهم مقایسه میشن حالا اگه این دو مقدار باهم برابر بودن که دور کادر رمزعبور اولی خاکستری میشه (یعنی همه چی درسته) در غیر این صورت دور کادر رمز اولی قرمز میشه .کدهای else if هم تقریباً به همین صورت هست فقط برعکس بالایی .خوب حالا میخوایم زمانی که فوکوس میکنیم به کادر رمز عبور، خاصیت type این کادر برابر password بشه .
<js>
$(#_txt_pass).focusin(function()
{
	$(this).prop(type, password);
});

$(#_txt_pass2).focusin(function()
{
	$(this).prop(type, password);
});
<js>
الان میخوایم زمانی که فوکوس میکنیم به کادر ایمیل، خاصیت dir این کادر برابر ltr بشه .
<js>
$(#txt_Email).focusin(function()
{
	$(this).prop(dir, ltr);
});

$(#txt_Email2).focusin(function()
{
	$(this).prop(dir, ltr);
});
<js>
بعد از این کارا میخوایم کدی بنویسیم تا زمانی که کاربر ایمیل وارد میکنه، سایت چک بکنه که این ایمیل یه ایمیل معتبر هست .شرطی که واسه چک کردن ایمیل مینویسیم اینه که ایمیل باید حداقل کاراکترهای لازم داشته باشه یعنی قبل و بعد از کاراکتر @ باید حتماً یک کاراکتر باشه، بعد از کاراکترهایی که بعد @ میاد باید کاراکتر . بیاد و بعد از این کاراکتر باید حداقل دوتا کاراکتر بنویسیم (یعنی ایمیل سه قسمت داره) به صورت زیر :
<php>
[One Character Or More]@[One Character Or More].[Two Character Or More]
<php>
خوب یه کدی با php مینویسیم که این کارا واسمون انجام بده ، یه فایل بنام CheckEmail.php توی فولدر Libs ایجاد میکنیم و کدهای زیر توش مینویسیم .
<php>
<?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);
	}
	
?>
<php>
شرط IF اولی چک میکنه همچین متغیری بنام Email با متد POST فرستاده شده یا نه، سپس اگه وجود داشت مقدارشو توی متغیر Email$ میریزه .متغیر chrList_Email$ هم واسه ایمیل هست، که یه شرط میزاریم و چک میکنیم کاراکترهایی که واسه ایمیل وارد میکنیم با مقدار این متغیر تناقضی وجود نداشته باشه، حالا مفهوم این مقدارا چیه؟
<php>
$chrList_Email = '/\A([^@\s]+)@(([a-z0-9]+\.)+[a-z]{2,})\Z/i';
<php>
واسه نوشتن باید در ابتدا یه کاراکتر // بیاریم و در آخر هم یه // بیاریم که در اینجا من در آخر i/  نوشتم یعنی نمیخوایم به حروف کوچیک و بزرگ حساس باشه.سپس شروطی که میخوایم بنویسیم بین A\ و Z\ مینویسیم. اگه بخوایم از یه یا چند کاراکتر جلوگیری کنیم (یعنی این کاراکتر ها جز کاراکترهایی باشن که باعث میشن شرط درست نشه) از کاراکتر ^ استفاده میکنیم.
s\@^ : یعنی هرکاراکتری توی قسمت اول میتونه بیاد ولی نمیخوایم کاراکتر @ و فاصله توی قسمت باشه .
کاراکتر + یعنی حداقل یک کاراکتر باید بیاد .
a-z : فقط کاراکتر کوچیک a تا z .
0-9 : فقط کاراکتر 0 تا 9 .
واسه اینکه تعداد کاراکتر توی شرط هامون بزاریم باید بصورت زیر عمل کنیم .
<php>
{min , max}
<php>
مثلاً زمانی که اینجوری مینویسیم :
<php>
{2, 5}
<php>
یعنی باید حداقل 2 کاراکتر و حداکثر 5 کاراکتر وارد کنیم .
و اگه اینجوری ینویسیم :
<php>
{3 , }
<php>
یعنی حداقل باید سه کاراکتر بنویسیم و اینجا دیگه حداکثر کاراکتر نداریم (یعنی بینهایت کاراکتر)
میتونید از این |سایت::http://www.rubular.com/| کمک بگیرید .با استفاده از تابع ()preg__match چک میکنیم که آیا مقدار Email$ با chrList__Email$ همخوانی داره یا نه ، اگه نداشت که با استفاده از تابع ()json__encode  مقدار Invalid برمیگردونیم و گرنه valid برمیگردونه .خوب الان باید یه کد JQuery بنویسیم که رجوع کنه به این کدهای PHP ، پس کد های زیر در ادامه کدهای Else ی که در بالا نوشتیم مینویسیم :
<js>
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......................//
}

<js>
کد اول واسه کادر ایمیل اولی هست که با استفاده از متد post رجوع میکنه به فایل CheckEmail.php توی فولدر libs .مقدار txt_Email# توی متغیر Email میریزیم تا این مقدار با متد post بفرستیم به فایل CheckEmail.php .با استفاده از شرط IF چک میکنیم که اگه مقدار برگشتی ( که توی متغیر data برگشت داده میشه ) برابر Invalid باشه یعنی ایمیل معتبر نیست پس دور کادر قرمز میشه در غیر اینصورت یعنی ایمیل معتبر هست که اینجا یه شرط دیگه میزاریم که اگه مقدار کادر ایمیل دومی برابر تکرار آدرس پست الکترونیکی نبود یعنی مقداری وارد کردیم و باز یه شرط دیگه میزاریم که اگه ایمیل اول با دوم برابر نبود کادر قرمز بشه در غیر اینصورت خاکستری بشه . کد دومی (که واسه کادر ایمیل دوم هست) هم برعکس کد اولیه .فایلهایی که تا الان واسه وب سایت درست کردیم بهمراه کارایی که تو این آموزش انجام دادیم آپلود کردم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید .توی قسمت بعدی یه جدول توی دیتابیس میسازیم واسه ذخیره اطلاعات کاربرانی که ثبت نام میکنن ، امیدوارم از این آموزش هم استفاده لازم برده باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

الان میخوایم زمانی که روی 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 باشه یعنی ایمیل معتبر نیست پس دور کادر قرمز میشه در غیر اینصورت یعنی ایمیل معتبر هست که اینجا یه شرط دیگه میزاریم که اگه مقدار کادر ایمیل دومی برابر &quot;تکرار آدرس پست الکترونیکی&quot; نبود یعنی مقداری وارد کردیم و باز یه شرط دیگه میزاریم که اگه ایمیل اول با دوم برابر نبود کادر قرمز بشه در غیر اینصورت خاکستری بشه .

کد دومی (که واسه کادر ایمیل دوم هست) هم برعکس کد اولیه .فایلهایی که تا الان واسه وب سایت درست کردیم بهمراه کارایی که تو این آموزش انجام دادیم آپلود کردم میتونید از این |لینک::http://www.mediafire.comdownload274xa4r479vq987/ITPro.irPart2.rar| دانلود کنید .توی قسمت بعدی یه جدول توی دیتابیس میسازیم واسه ذخیره اطلاعات کاربرانی که ثبت نام میکنن ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام 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 ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای 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;
}

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

از سمت چپ یه فاصله به 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;
}

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان یه استایل به 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;
}
سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :

margin: 0;

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .

حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin# .

border-bottom: 1px solid #5d26a0;

یه خروجی میگیریم .

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

:-( مثل اینکه یه جای کارمون درست انجام ندادیم .

این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .

min-width: 1200px;
سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

:-) درست شد .

خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 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 میزاریم .

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .

#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}

یه بار دیگه خروجی میگیریم :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .

border: 2px solid green;

کد زیر رو اضافه میکنیم .

#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا که متوجه شدید این دو تا 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;

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .

padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،

کد زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .

border-radius: 50px;
margin: 20px 12px 0 0;

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .

display: none;

خروجی :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <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="http://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 برابر # قرار دادیم .

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .

خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :

سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
سلام به همه دوستداران  ITPro  ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/274xa4r479vq987/ITPro.ir_Part2.rar| دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا |دانلود::http://www.mediafire.com/download/b3vnn69nn8e4r1c/pic.rar| کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
در بالا میبینید که من یه تگ div بنام  WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
||http://tosinso.com/files/get/ef6d99a4-8d05-42fb-993d-3b8198fbccd5||
خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
خروجی :
||http://tosinso.com/files/get/0f0b0620-8b93-42c7-ac39-226c94443074||
از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
<css>
margin-left: 20px;
<css>
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
<css>
margin-left: 70px;
<css>
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
<css>
#WhoLogin li
{
	line-height: 40px;
}
<css>
بوسیله کد زیر رنگ و فونت و رنگ لینکهای ورود و ارسال مطالب عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
<css>
#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;
}
<css>
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
<css>
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
<css>
خروجی :
||http://tosinso.com/files/get/b169c2dc-764a-47d8-bfd3-0e846e70d3b4||
خوب الان یه استایل به textbox (جستجو) و  لینک نام کاربری میدیم ، کدهای زیر اضافه میکنیم .
<css>
#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;
}
<css>
||http://tosinso.com/files/get/076a30a9-99f3-4c5d-a02e-aff001a65d90||
واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
<css>
margin: 0;
<css>
خروجی :
||http://tosinso.com/files/get/f779506d-b225-4696-9b70-668e083d573c||
خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
||http://tosinso.com/files/get/8645571a-b0d1-403a-a96a-18cf647de673||
خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin#  .
<css>
border-bottom: 1px solid #5d26a0;
<css>
یه خروجی میگیریم .
||http://tosinso.com/files/get/f8c6daf3-5808-4587-bb59-e07fb8f87cfa||
دوباره میایم زوم میکنیم ببینیم این بارم جواب میگیریم یا نه!!
||http://tosinso.com/files/get/f957292f-b6e8-4cf0-87c7-ef5dc635becb||
:-(  مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/a53f4d5a-250b-476a-8f97-431bd6e7996d||
:-)  درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
<htm>
                      .
                      .
                      .
</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>
                      .
                      .
                      .
<htm>
دو تگ <div> بنامهای  Num__Letter  و  Num__Message  میسازیم که توشون یه label میزاریم .
خروجی :
||http://tosinso.com/files/get/7d3924d4-947b-42a5-8246-30269f65d0b7||
خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
<css>
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
<css>
یه بار دیگه خروجی میگیریم :
||http://tosinso.com/files/get/e3779315-5d34-4e33-a8c7-ff2d1dd1ca6f||
دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
border: 2px solid green;
<css>
کد زیر رو اضافه میکنیم .
<css>
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
<css>
||http://tosinso.com/files/get/6400ee62-426b-4a42-864c-ea42ffb09252||
حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter  و  Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
<css>
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
<css>
خروجی :
||http://tosinso.com/files/get/42292834-e4e5-4ff0-b537-7ee7121c7da0||
کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
<css>
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
<css>
خروجی :
||http://tosinso.com/files/get/6676bf60-d3d2-42c6-8dbf-1d1f0d474d27||
خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
 کد زیر رو به ادامه قسمت  WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
border-radius: 50px;
margin: 20px 12px 0 0;
<css>
خروجی :
||http://tosinso.com/files/get/6a5b8cb9-823d-4919-9760-0e4b08ed912e||
الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message#  اضافه میکنیم .
<css>
display: none;
<css>
خروجی :
||http://tosinso.com/files/get/4a4a7a26-c53c-4f26-a1ce-fc01d7b58f71||
عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<htm>
<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=http://tosinso.com>انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
<htm>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
<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;
}
<css>
تغییر قسمت SingUp #title# بصورت زیر :
<css>
margin-right: 650px; 
margin-left: 60px;
<css>
تغییر در header.php بصورت زیر :
<htm>
                     .
                     .
                     .
<div id=WhoLogin>
    	<div>
        	<ul>
                <li class=Right id=Login>
                    <a href=Login>ورود</a>
                </li>
                <li class=Right id=Username>
                    .
                    .
                    .
<htm>
href دکمه ورود برابر Login قرار دادیم .
<htm>
                     .
                     .
                     .
<div id=MainMenu>
            <ul>
                <li>
                    <a href=Index>خانه</a>
                </li>
                <li>
                    <a href=#>انجمن</a>
                </li>
                     .
                     .
                     .
<htm>
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href  برابر # قرار دادیم .
||http://tosinso.com/files/get/d0e0ea97-7ba1-414b-b088-b8c5bf8b964c||

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/iov86jzsm631k7a/ITPro.ir_Part3.rar| دانلود کنید . 
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
||http://tosinso.com/files/get/9ca65a18-20db-415c-bf3e-e8adbebab3ee||
||http://tosinso.com/files/get/4aa3434b-6d9c-4ecc-88b1-2f5cbb32807e||
من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
<sql>
CREATE DATABASE ITPro COLLATE=utf8_persian_ci
<sql>

<sql>
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
<sql>

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی ، امیدوارم از این آموزش هم استفاده لازم برده باشید .

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

من واسه راحتی کار دستور 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

میخواستم توی این قسمت با جدول که در بالا ساختیم کار کنیم که آموزش خیلی طولانی شد، میزاریمش واسه قسمت یعدی

دوره آموزشی برنامه نویسی MVC در PHP قسمت یازدهم

خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .

خروجی :

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که مشکل برطرف شد .

یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .

min-width: 1200px;
سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

اینم درست شد.

قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .

تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .

کد زیر رو به 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;
}
سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .

<a href="#" class="Username">نام کاربری</a>

یه کلاس اضافه میکنیم .

تغییر تکه کد زیر :

#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .

در بالا (خط اول) فقط Username. به بعد از a اضافه میکنیم .

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

الان میایم یه استایل به لینکها میدیم :

#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :

#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 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه خورده عرض منو رو بزرگتر میکنیم ، پس 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 در بالا تغییر دادم .

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .

یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (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");

خوب الان یه خروجی میگیریم ببینیم چطور شد .

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .

سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا میخوایم زمان ورود به سایت به جای نمایش "نام کاربری" نام کاربری کسی که وارد سایت شده نمایش داده بشه .

تابع 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";
}
سلام به همه دوستان خوب در ابتدا بیایم مشکلات سایتو حل کنیم، یکی از مشکلاتی که توی سایت وجود داره اینه که زمانی که روی ورود کلیک میکنیم خروجی بصورت زیر نمایش داده میشه :
||http://tosinso.com/files/get/04016ce2-3a8b-49c3-8c11-da5a3cc33952||
این بخاطر اینه که هم توی Index.php (توی فولدر Login) تگی با id بنام Login داریم هم توی Header.php تگ با id بنام Login داریم، پس واسه رفع این مشکل باید یکی از این تگ ها اسمش با اون یکی تفاوت داشته باشه، من میایم اسم تگی که توی Index.php (در فولدر Login) بنام Login بود رو به Login__page تغییر میدم و توی Login.css هم این تغییر باید انجام بشه .
خروجی :
||http://tosinso.com/files/get/c8386c27-dfd7-4144-9d9d-bada05c63c79||
میبینید که مشکل برطرف شد .
یه مشکل دیگه توی Footer سایت هست که در زمان زوم کردن، عرض footer کمتر از عرض header سایته .
||http://tosinso.com/files/get/5467408b-1a5c-4bc5-89fe-2db70d93b93c||
که اینم با استفاده از کد زیر حل میکنیم ، تکه کد زیر رو به قسمت Footer# (توی فایل footer.css) اضافه میکنیم .
<css>
min-width: 1200px;
<css>
||http://tosinso.com/files/get/7ce4b9b7-98ff-4572-bec6-f8a8b694a9d4||
اینم درست شد. 
*قبل از شروع هر قسمت جدید، سایت چک میشه و اگه مشکلاتی وجود داشته باشه رفع میشه، دوستان هم اگه مشکلی توی سایت دیدید بهم اطلاع بدید تا توی قسمت بعدی این مشکلات هم حل بشه .*
تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/qytbk6ddzwqcc7b/ITPro.ir_Part4.rar| دانلود کنید . خوب الان میایم یه منو کوچیک درست میکنیم تا زمانی که کاربر روی نام کاربری خودش (در بالا) کلیک میکنه این منو نمایش داده بشه .
کد زیر رو به header.php اضافه میکنیم :
<htm>
                 .
                 .
                 .
<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>
                 .
                 .
                 .
<htm>
تگ <div> با id بنام MenuDropDown ایجاد کردیم و توی این تگ چندتا تگ دیگه .
سپس قالبشو مینویسیم (کدهای زیر رو به header.css اضافه میکنیم) :
<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;
}
<css>
||http://tosinso.com/files/get/4fa7f137-3953-4d4d-b98f-70abb3d496e2||
یه تغییر توی کد میدیم تا بتونیم رنگ تگهای <a> (توی منوی ایجاد شده بالا) رو به سیاه تغییر بدم .
<htm>
<a href=# class=Username>نام کاربری</a>
<htm>
یه کلاس اضافه میکنیم .
تغییر تکه کد زیر :
<css>
#WhoLogin #Username a.Username
{
	text-decoration: none;
	color: #CCC;
                  .
                  .
                  .
<css>
در بالا (خط اول) فقط  Username.  به بعد از  a  اضافه میکنیم .
||http://tosinso.com/files/get/f93599ee-1d76-4ad4-bf5d-0561a8989e7e||
الان میایم یه استایل به لینکها میدیم :
<css>
#Username #MenuDropDown a
{
	height: 30px;
	padding-right: 15px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
<css>
||http://tosinso.com/files/get/9b0f9721-cf69-4232-8e85-a0c44787879f||
حالا میخوایم یه خورده استایل این منو رو بهتر کنیم :
<css>
#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);
}
<css>
یه border میزاریم و سپس با استفاده از  25b8\ یه مثلث ایجاد میکنیم، سپس 90 درجه می چرخونیمش و از بالا و راست تنظیمش میکنیم .
||http://tosinso.com/files/get/0dd3a358-02f7-4a9e-b790-2cd04dfbf5fd||
یه خورده عرض منو رو بزرگتر میکنیم ، پس width قسمت Username #MenuDropDown# تغییر میدیم :
<css>
width: 140px;
<css>
میخوایم زمانی که روی لینکهای منو میریم رنگ پس زمینه اش و رنگ لینک عوض بشه، یه سایه هم میزاریم .
<css>
#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;
}
<css>
چون بالای لینک اول و و پایین لینک سوم منو بصورت حلال هست واسه همین مقدار border-radius در بالا تغییر دادم .
||http://tosinso.com/files/get/1a7704bf-8ed5-4363-8647-2b5bd4936efe||
توی شکل میبینید که با موس روی لینک تنظیمات رفتم و استایلش تغییر کرد .
یه خورده دیگه روش کار میکنیم، میخوایم موقعی که روی لینک ها میریم آروم رنگشون تغییر کنه (500 میلی ثانیه) پس کد زیر به قسمت  Username #MenuDropDown a#  اضافه میکنیم . 
<css>
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;
<css>
خوب باید کدی بنویسیم تا موقعی که روی نام کاربری کلیک میکنیم این منو نمایش داده بشه پس در ابتدا منو مخفی میکنیم، کد زیر به قسمت  Username #MenuDropDown#  اضافه میکنیم تا منو نمایش داده نشه .
<css>
display: none;
<css>
سپس با استفاده از JQuery کار رو تکمیل میکنیم .
کد زیر رو به header.php اضافه میکنیم :
<js>
<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>
<js>
کد بالا به ما میگه اگه کاربری روی لینکی با class ی بنام Username کلیک کرد، اگه تگی با id بنام  MenuDropDown فعال نبود (یعنی محتوای این تگ در حال نمایش نبود) نمایشش بده وگرنه مخفیش کن (منظور اینه که اگه کاربر روی نام کاربری کلیک کرد منو رو نمایش بده وگرنه مخفیش کنه)
<js>
if ($(#Username #MenuDropDown).is(:visible) == false)
<js>
این شرط چک میکنه که الان منو مخفی هست یا داره نمایش داده میشه .
<js>
$(document).click(function(e)
{
       if(!$(e.target).is('a.Username')) 
             {
                     $(#Username #MenuDropDown).css(display,none);
              }
});
<js>
این تکه واسه بستن منوی باز شده است که چک میکنه اگه کاربر هر جای دیگه ای به غیر از نام کاربری کلیک کرد منو مخفی بشه .خوب الان میخوایم موقعی که کاربر لاگین میکنه به سایت، یه Session براش درست کنیم و دیگه دکمه لاگین ، ثبت نام ، فرم ثبت نام نمایش داده نشه و بجاش نام کاربری اون شخص در بالای صفحه نمایش داده بشه.پس میایم یه فایل بنام Session.php توی فولدر libs میسازیم و کدهای زیر توش مینویسیم.
<php>
<?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();
	}
}
<php>
یه تابع بنام ()init ایجاد میکنیم و میخوایم زمانی که Session ی تولید میکنیم، در ابتدا این تابع رو فراخوانی کنیم، زمانی که میخوایم Session ی ایجاد کنیم باید اول تابع ()session_start فراخوانی بشه (یعنی Session استارت میکنیم) .این Static که گذاشتم واسه اینه که میخوایم توابع داخل کلاس بدون ایجاد شی از اون کلاس، به راحتی قابل دسترسی باشن، مثلاً به صورت زیر :
<php>
Session::init();
<php>
ولی اگه Static نزاریم با خطا روبرو میشیم و واسه اینکه به خطا برنخوریم باید هرجایی که بخوایم از توابع هر کلاسی استفاده کنیم باید یه شی ارش بسازیم ، مثلاً اگه بخوایم تابع ()init فراخوانی کنیم باید بصورت زیر بنویسیم :
<php>
$obj = new Session(); 
$obj->init();
<php>
تابع ()IsLogin چک میکنه اگه Login ی وجود داشت که true برمیگردونه وگرنه false برمیگردونه .
تابع ()LoginDo واسه ایجاد کردن Session هست .تابع ()Logout تمام session هارو حذف میکنه با استفاده از تابع ()session_destroy  .کد زیر رو به ابتدای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
	<?php if(Session::IsLogin()) { ?>
    
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        
    <? } else { ?>
<php>
یه چند تا تگ <br> گذاشتم واسه ایجاد یه فاصله بین header و Footer (این تگها موقعتی هستن تا زمانی که سایتمونو تکمیلتر کنیم)کد زیر رو به انتهای کدهای داخل تگ <body> توی index.php (توی فولدر Index) اضافه میکنیم :
<php>
<?php } ?>
<php>
یه تغییر هم باید توی header.php بدیم :
<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>
فقط چند خط کد php اضافه کردم بقیه کدها تکراری هستن .
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
                     .
                     .
                     .
if($count > 0)
{
	//echo <br>welcome;
	Session::LoginDo(Login, success);
	header(location: ../index);
}
else
{
	//echo <br>Invalid Username Or Password;
	header(location: ../login);				
}
                    .
                    .
                    .
<php>
باید فایل session.php رو هم توی سایت لود کنیم، کد زیر به فایل Index.php (توی فولدر اصلی سایت) اضافه میکنیم :
<php>
require(libs/Session.php);
<php>
خوب الان یه خروجی میگیریم ببینیم چطور شد .
||http://tosinso.com/files/get/bc3bafaf-c8e9-4d96-80be-e46ebead4dfa||
الان وارد سایت میشیم و روی نام کاربری کلیک میکنیم .
||http://tosinso.com/files/get/0c09745b-1b0d-4488-8307-0b76e71ff3a0||
حالا میخوایم زمان ورود به سایت به جای نمایش نام کاربری نام کاربری کسی که وارد سایت شده نمایش داده بشه .
تابع LoginDo بصورت زیر تغییر میدیم :
<php>
public static function LoginDo($key, $value, $username)
{
	Session::init();
	$_SESSION[$key] = $value;
	
	$_SESSION[Uname] = $username;
}
<php>
و تابع زیر اضافه میکنیم :
<php>
public static function GetUserLogin()
{
	return $_SESSION[Uname];
}
<php>
تکه کد مربوط به نام کاربری توی فایل header.php رو بصورت زیر تغییر بدید :
<php>
<a href=# class=Username><?php echo Session::GetUserLogin(); ?></a>
<php>
شرط زیر رو توی فایل  Login__Model.php  پیدا کنید و بصورت زیر تغییرش بدید .
<php>
if($count > 0)
{
	Session::LoginDo(Login, success, $user);
	header(location: ../index);
	//echo <br>welcome;
}
<php>
||http://tosinso.com/files/get/24c37bf2-0ce3-451c-9b67-bfbf5f1d77b3||
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . 

امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .*

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .

دوره آموزشی برنامه نویسی MVC در PHP قسمت دوازدهم

تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد 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";

یه خروجی از کارمون میگیریم .

با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 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>
                     .
                     .
                     .
با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه استایل کوچیکم بهش میدیم .

کدای زیرو به فایل 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;
}
با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .

کدای زیرو به ابتدای کدای فایل 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();
}
                       .
                       .
                       .

یه نام کاربری که وجود نداره وارد میکنیم .

با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا میایم یه نام کاربری که وجود داره وارد میکنیم .

با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و حالا هم هیچی وارد نمیکنیم در نتیجه اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .

با عرض سلام به تمامی دوستداران *ITPro* ، تو این چند هفته به مشکل برخوردم نتونستم آموزش ها جلو ببرم، ولی ایشالله از این به بعد مرتب آموزشها ادامه داره .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/4w6jk7fou65m511/ITPro.ir_Part5.rar| دانلود کنید . خوب بریم سر آموزش، تو این قسمت و چند قسمت بعدی میخوایم چند تا جدول توی دیتابیس ایجاد کنیم ، کاربر بتونه ثبت نام کنه و وارد پروفایل خودش بشه.کد sql جدول استان :
<sql>
CREATE TABLE tbl_Province(Name VARCHAR(30) NOT NULL,NO VARCHAR(2) NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci
<sql>
کد sql جدول شهر :
<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>
کد sql جدول تنظیمات کاربر :
<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
<sql>
خوب حالا میخوایم کدای فرم ثبت نام کاربر بنویسیم، در ابتدا باید چک کنیم که این نام کاربری که کاربر میخواد ثبت کنه آیا وجود داره یا نه؟! که اینکارو با استفاده از کدایی که توی فایل checkuser.php مینویسیم (در ادامه این فایل ایجاد میکنیم ) انجام میدیم و بعد از اینکه مطمئن شدیم وجود نداره اطلاعات میفرستیم به فایلی بنام Index__Model.php (در ادامه این فایل هم میسازیم) و از طریق این فایل به دیتابیس وصل میشیم و اطلاعات کاربر ذخیره میکنیم .در فرم ثبت نامی که قبلاً درست کردیم یادمون رفت کادر نام کاربری ایجاد کنیم، واسه همین ابتدا اینکارو انجام میدیم، کد زیرو به فایل Index.php (توی فولدر Index) اضافه میکنیم .
<htm>
<li>
    <input type=text name=txt_username id=txt_username value=نام کاربری class=borderstyle />
</li>
<htm>
قسمتهای از کد register.js تغییر میدیم و بصورت زیر مینویسیم، فقط خط 16 اضافه شده : (به خاطر نام کاربری)
<js>
$(.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();
		}
	});
<js>
در کد زیر ، فقط خط 12 تا 16 اضافه شده مابقی کدا تکراری هستن. (کدای register.js)
<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()==)
		{
                         .
                         .
                         .
<js>
در کد زیر ، خط 10 تا 29 اضافه شده مابقی کدا تکراری هستن. (کدای register.js) 
<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)
{
                             .
                             .
                             .
<js>
یه فایل بنام checkuser.php (توی فولدر libs) ایجاد میکنیم و کدای php اونجا مینویسیم .
<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;
<php>
یه خروجی از کارمون میگیریم .
||http://tosinso.com/files/get/dae3c8de-874f-4cc9-a33d-cc7105b98858||
||http://tosinso.com/files/get/cf465b75-e18a-4c6f-9e67-3a64c952ca88||
یه سری نام کاربری وارد میکنیم که توی جدول نیست که به ما پیغامی میده که این نام کاربری وجود نداره و سپس نام کاربری وارد میکنیم که توی جدول وجود داره و این سری به ما میگه که نام کاربری وجود داره . نمونه کدای بالا تو آموزشهای قبلی بوده پس دیگه اینجا توضیح نمیدم . فقط اشکالی که اینجا وجود داره اینه که نمیخوایم زمان که نام کاربری وجود داره یا وجود نداره اینجوری بهمون پیغام بده . در کد زیر ، خط 6 تا 9 اضافه شده مابقی کدا تکراری هستن. ( کدای index.php (توی فولدر index) ) 
<htm>
                      .
                      .
                      .
<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>
                     .
                     .
                     .
<htm>
||http://tosinso.com/files/get/b23b6270-3633-44f8-a865-abab13cf85e4||
یه استایل کوچیکم بهش میدیم .
کدای زیرو به فایل Register.css اضافه میکنیم .
<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;
}
<css>
||http://tosinso.com/files/get/bade2bea-d6fe-4f51-b6ca-b01a89ef08a3||
حالا میخوایم زمانی که کاربر وجود داره یا نداره ، این دوتا نمایش داده بشن .
کدای زیرو به ابتدای کدای فایل register.js اضافه میکنیم .
<js>
$(#Exist).hide();
$(#NotExist).hide();
<js>
ابتدا مخفیشون میکنیم و زمانی که لازمشون داریم نمایششون میدیم .کدای زیرو به فایل register.js اضافه میکنیم . (فقط 6 و 7 و  13 و 14 اضافه شده و خط 9 و 16 بصورت کامنت دراوردیم و مابقی تکراری هستن )
<js>
                       .
                       .
                       .
if(response == NotExist)
{
	$(#Exist).hide();
	$(#NotExist).show();
	
	//alert($(#txt_username).val()+ Is NotExist);
}
else
{
	$(#NotExist).hide();
	$(#Exist).show();
	
	//alert($(#txt_username).val()+ Is Exist);
}
                         .
                         .
                         .

<js>
این کدو هم اضافه میکنیم ، فقط خط 9 و 10 اضافه شده مابقی تکراریست .
<js>
                       .
                       .
                       .
else if($(this).prop(name) == txt_username && $(this).val()==)
{
	$(this).val(نام کاربری);
	$(this).css(color , darkgrey);
	
	$(#Exist).hide();
	$(#NotExist).hide();
}
                       .
                       .
                       .
<js>
یه نام کاربری که وجود نداره وارد میکنیم .
||http://tosinso.com/files/get/f4646b7a-3b1b-4b81-9caf-e8b1244f877c||
حالا میایم یه نام کاربری که وجود داره وارد میکنیم .
||http://tosinso.com/files/get/c3b973fb-3c88-45bd-afa3-238785998c4b||
و حالا هم هیچی وارد نمیکنیم در نتیجه  اگه پیغامی نمایش داده باشه ، پیغام پاک میشه .
||http://tosinso.com/files/get/c5c95875-1685-473c-93f9-cecff7defcfd||
سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .
کد زیرو به register.css اضافه میکنیم .
<css>
#Register #txt_username
{
	width: 330px;
}
<css>

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

سایز کادر نام کاربری کوچیکه، یه خورده بزرگش میکنیم .

کد زیرو به register.css اضافه میکنیم .

#Register #txt_username
{
	width: 330px;
}

تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .

دوره آموزشی برنامه نویسی MVC در PHP قسمت سیزدهم

تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن "سوال امنیتی" کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن "سوال امنیتی" برمی داره این تصویر مخفی بشه .کنار کادر متن "سوال امنیتی" یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک 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;
}

خروجی از کارمون :

تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت 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 درجه عکسو میچرخونیم .

تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 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();
});
تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن "سوال امنیتی" ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .

$("#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 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .

تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن سوال امنیتی کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن سوال امنیتی برمی داره این تصویر مخفی بشه .کنار کادر متن سوال امنیتی یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک JQuery ) انجام میدیم و زمانی که روی دکمه ریفرش کلیک میکنیم عکس رفریش میچرخه  و زمانی که کاربر، تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز در میاد که کارمونو قشنگتر میکنه .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/quncy4fjh3ieysz/ITPro.ir_Part6.rar| دانلود کنید . چند تا عکس میزارم دانلودشون کنید تو طراحی سایت لازمشون داریم، عکسارو بعد از دانلود بزارید توی فولدر Pic .|لینک دانلود عکس::http://www.mediafire.com/download/ep17dop17uo7ibb/Pic2.rar|
در ایتدا میایم یه کادر درست میکنیم ( جایی که تصویر امنیتی بهمراه دکمه رفرش اونجا قرار میگیره ).
کد زیرو اضافه میکنیم به Index.php (توی فولدر Index) :
<htm>
                         .
                         .
                         .
	<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>
                        .
                        .
                        .
<htm>
فقط خط های 8 تا 11 اضافه شدن .حالا نوبت استایل دهی میرسه ، در ابتدا رنگ background سایتمونو خاکستری روشن میکنیم که سایت بهتر بنظر برسه و بعدش استایل تگ های بالارو مینویسیم . کد زیرو به header.css اضافه میکنیم .
<css>
body
{
	background:#EEE;
}
<css>
سپس کدای زیرو هم به register.css اضافه میکنیم .
<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;
}
<css>
خروجی از کارمون :
||http://tosinso.com/files/get/8248395b-66c5-458c-9fd3-4530cc41cb8f||
یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت  Register .refresh#  اضافه میکنیم .  
<css>
	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;
<css>
کد بالارو واسه این گذاشتیم چون میخوایم چرخش عکس 700 میلی ثانیه طول بکشه .
کدای زیرو هم به قسمت  Register #canvas#  اضافه میکنیم .
<css>
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;
<css>
سپس کدای زیرو اضافه میکنیم .
<css>
#Register .refresh:hover
{
	/* Safari */
	-webkit-transform: rotate(360deg);
	
	/* Firefox */
	-moz-transform: rotate(360deg);
	
	/* IE */
	-ms-transform: rotate(360deg);
	
	/* Opera */
	-o-transform: rotate(360deg);
}
<css>
360 درجه عکسو میچرخونیم .
||http://tosinso.com/files/get/8783248c-2410-4b4c-a9f4-60a2b5fb975b||
خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 8 کاراکتر تشکیل میشه که شامل این کاراکترها میشه (دو کاراکتر اول عدد هست، کاراکتر بعدی حرف کوچیک انگلیسی، کاراکتر بعدیش حرف بزرگ انگلیسی، سه کاراکتر بعدی دوباره عدد هست و کاراکتر آخر هم حرف کوچیک انگلیسی هست .)واسه تولید این کد یه تابع مینویسیم به نام  ()CreateSecurityCode  :
<js>
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;
	}
<js>
با استفاده از تابع آماده جاوا اسکریپت بنام ()fromCharCode ، کد اسکی بهش میدیم و کاراکتر برمیگردونه .
یه تابع دیگه هم باید بنویسیم که واسمون اعداد تصادفی تولید کنه ، این تابع در بالا فراخوانی کردیم، بنام ()GetRandom :
<js>
	function GetRandom(MinNumber, MaxNumber)
	{
		return Math.floor(Math.random()*(MaxNumber - MinNumber + 1) + MinNumber)
	}
<js>
خوب حالا میخوایم زمانی که روی دکمه ریفرش کلیک میکنیم تابع ()CreateSecurityCode  فراخوانی بشه ، سپس زمانی که این تابع یه کد امنیتی بهمون برگردوند این کد تبدیل به یه عکس کنیم و یعد این عکس به کاربر نمایش بدیم .
<js>
$(.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);
});
<js>
اون تگ canvas  که توی Index.php درست کردیم اینجا هم میزاریم چون میخوایم زمانی که کاربر روی دکمه ریفرش کلیک میکنه این تگ حذف بشه و دوباره ایجاد بشه (اینجوری کد امنیتی قبلی که نمایش داده شده رو  پاک میکنیم ) ، با استفاده از تابع append ( جز توابع آماده jquery) میتونیم تگ (یا کد html) به صفحه اضافه کنیم .با استفاده از find میتونیم هر تگی پیدا کنیم، که در اینجا ما به دنبال تگی با id بنام canvasid هستیم ، با استفاده از تابع fillStyle ( جز توابع آماده jquery) رنگ متن (یا همون رنگ متن تصویر امنیتی) تنظیم میکنیم .  با استفاده از تابع fillText  (جز توابع آماده jquery) کد امنیتی بصورت تصویر درمیاریم .
کدای که بالا گفتم توی فایل register.js مینویسیم ( تقریباً در ابتدای کدای فایل register.js ، یعنی بعد از خط   } ()function)$  )، سپس از کارمون خروجی میگیریم، مشکلی که اینجا وجود داره اینه که زمانی که صفحه رو ریفرش میکنیم چیزی نمایش داده نمیشه مگر اینکه روی دکمه رفریش عکس بزنیم تا تصویر امنیتی نمایش داده بشه ولی ما اینجوری نمیخوایم، پس باید کدی بنویسیم که تا زمانی که صفحه لود میشه یا فرم ثبت نام لود میشه اون موقع یه تصویر امنیتی واسه ما درست کنه و نمایش بده و هر وقت هم روی دکمه ریفرش عکس کلیک میکنیم یه تصویر جدید بهمون بده در نتیجه کد زیر به ادامه کدای بالا اضافه میکنیم .
<js>
$(#Register .refresh).load(function(){
	$(.refresh).click();
});
<js>
||http://tosinso.com/files/get/303367c6-40b2-4390-a545-dac78794fbdc||
حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن سوال امنیتی ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
<js>
$(#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);
					}
				}
			}
		}
	});       
});
<js>
کد بالا میگه تگ canvas (یا همون تصویر امنیتی) نمایش داده بشه اگه کاربر فوکوس کرد روی کادر متن سوال امنیتی و زمانی تصویر امنیتی مخفی بشه که کاربر هرجایی کلیک کنه به غیر از دکمه ریفرش تصویر امنیتی ، کادر متن سوال امنیتی و تصویر امنیتی . الان میایم با کد زیر تصویر امنیتی مخفی میکنیم و هر زمان که فوکوس کنیم به کادر متن ، تصویر امنیتی نمایش داده میشه .کدر زیرو به قسمت  Register #canvas#  اضافه میکنیم .
<css>
display: none;
<css>
حالا باید کدی بنویسیم تا چک کنیم ببینیم کاربر این تصویر امنیتی درست وارد کرده یا نه، اگه درست وارد کنه، رنگ دور کادر متن به رنگ سبز تغییر میکنه وگرنه رنگش قرمز میشه .کد زیرو اضافه میکنیم .
<js>
                            .
                            .
                            .
		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)
                               .
                               .
                               .
<js>
با استفاده از تابع toLowerCase (جز توابع آماده جاوا اسکریپت) تمام حروف کوچیک میکنیم، چون نمیخوایم به حروف بزرگ کوچیک حساس باشه .فقط خطهای 12 تا 24 و خط 26 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

||http://tosinso.com/files/get/e876d57e-bbaf-4e69-b75d-01f2834bb07c||
||http://tosinso.com/files/get/d61d4dd0-1f7f-4f81-9555-bfa66fc20815||
میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
||http://tosinso.com/files/get/abfd834e-3e4e-4ed3-9578-31ed63ce51d8||
||http://tosinso.com/files/get/fa5bad51-3b11-40e1-aa2c-96175cfabc0c||
و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، *ITPro باشید .* 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید

دوره آموزشی برنامه نویسی MVC در PHP قسمت چهاردهم

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

کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):

                       .
                       .
                       .
	$(".refresh").click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css("border-color" , "#c30009");
		}
		
		$("#canvas #canvasid").remove();
                       .
                       .
                       .

فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .

با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

این مشکل واسه این بوجود میاد چون ما از تگهای <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;
با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر کدای این تابع ()a.Username").click")$ (که توی فایل header.php نوشتیم) این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )

return false;
با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

یه فایل براتون میزارم که توش توابع آماده 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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id="province">
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id="city">
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id="DetailAddress">
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .

با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل 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="http://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>
با عرض سلام به تمامی دوستان ، تو این قسمت از آموزش در ابتدا میایم مشکلات سایت برطرف میکنیم و بعدش صفحه پروفایل کاربری طراحی میکنیم .تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این |لینک::http://www.mediafire.com/download/7ggewmt924ev9g4/ITPro.ir_Part7.rar| دانلود کنید . طبق کدی که در قسمت قبل نوشتیم، اگه کاربر تصویر امنیتی درست وارد کنه رنگ دور کادر متن سوال امنیتی به رنگ سبز تغییر میکنه  و اگه بعدش کاربر به اشتباه روی دکمه ریفرش کلیک کنه کد امنیتی تغییر میکنه که کاربر باید کدی که نوشته پاک کنه و کد جدید وارد کنه، حالا اگه کاربر اینکارو انجام نده (یعنی روی کادر متن کلیک نکنه) رنگ دور کادر متن سوال امنیتی همچنان سبز رنگ باقی میمونه انگار کد درست تایپ شده که این خودش یه باگ به حساب میاد، واسه رفع این مشکل باید کدی بنویسیم تا زمانی که کاربر روی دکمه ریفرش کلیک میکنه رنگ دور کادر متن قرمز بشه . 
کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):
<js>
                       .
                       .
                       .
	$(.refresh).click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css(border-color , #c30009);
		}
		
		$(#canvas #canvasid).remove();
                       .
                       .
                       .
<js>
فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .یه مشکل دیگه که توی سایت دیده میشد این بود که بعد از چند بار ریفرش کردن صفحه Index ، یه خورده استایل صفحه می ریخت بهم، یعنی یه فاصله بین کادر فرم ثبت نام با اجزای داخل فرم ثبت نام ایجاد میشد .
||http://tosinso.com/files/get/1c58b8a1-9ea1-4372-91b7-08527ce963bf||
||http://tosinso.com/files/get/14eeeed2-ac90-4688-841d-0d099b3ccffa||
این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .در ابتدا توی قسمت Register#  کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .
<css>
padding: 25px 35px;
<css>
و بجای کد بالا، کد زیرو مینویسیم :
<css>
width:540px;
<css>
تو قسمت News# هم یه خورده عرضو زیاد میکنیم :
<css>
width: 520px;
<css>
خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :
<css>
#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}
<css>
یه تغییر هم توی قسمت Reg_News#  میدیم :
<css>
#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}
<css>
حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :
<css>
padding: 0;
margin: 0 0 7px 0;
<css>
و بجای کدای بالا ، کد زیر مینویسیم :
<css>
margin-bottom: 7px;
<css>
||http://tosinso.com/files/get/e44d76cd-723a-463d-9a90-dff2f21245f5||
مشکل سایتمون برطرف شد .

اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر  کدای این تابع ()a.Username).click)$ (که توی فایل header.php نوشتیم)  این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )
<js>
return false;
<js>
||http://tosinso.com/files/get/ee1edd46-1289-42f9-b52d-9c7451f142f3||
یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .|لینک دانلود::http://www.mediafire.com/download/6569g570m6appnn/jquery.tools.min.js|
خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم . یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :
<php>
<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render(Profile/index);
		}
	}
<php>
خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک صفحه شخصی که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم . تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .
<php>
                     .
                     .
                     .
<div id=MenuDropDown>
    <ul>
        <li class=EditProfile><a href=Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>>صفحه شخصی</a></li>
                     .
                     .
                     .
<php>
حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .فایل Index.php باز کنید و کدای زیرو توش بنویسید .
<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>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id=family>
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <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>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id=province>
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id=city>
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id=DetailAddress>
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <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>
<php>
||http://tosinso.com/files/get/66869076-277c-48b0-a12b-5a96c28bffa9||
توی عکس میبینید که زمانی که با موس روی لینک صفحه شخصی رفتیم آدرس به این صورت تغییر پیدا کرد که در پایین عکس نشون داده شده، حالا روی صفحه شخصی کلیک میکنیم .
||http://tosinso.com/files/get/d85616c9-8143-42c2-a961-873bafda1532||
ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :
<php>
<?php

	define(path, http://127.0.0.1/PHP-MVC/);
<php>
باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .
<php>
require(Config/define.php);
<php>
خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم :  (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )
<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 />
<php>
کد header.php :
<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=http://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>
<php>
||http://tosinso.com/files/get/0fae9bd6-0ab9-4cf2-b116-fe8479f9c60d||
استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .
تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این |لینک::http://www.mediafire.com/download/1pgj1q66908ejce/ITPro.ir_Part8.rar| دانلود کنید . 
امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید . 

نویسنده : مهدی رزمجویی
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه) .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید


مهدی رزمجویی
مهدی رزمجویی

توسعه دهنده SQL و PHP علاقه مند به مهندسی معکوس

توسعه دهنده C# ، ++C ، PHP ، SQL ، محقق بدافزار ، توسعه دهنده آنتی ویروس پادویش ، توسعه دهنده آزمایشگاه بدافزار ، علاقمند به مهندسی معکوس

نظرات