خوب تو این قسمت میخوایم یه دیتابیس با یه جدول واسه سایتمون ایجاد کنیم و با صفحه لاگین سایت وارد وب سایتمون بشیم و بعدش سایت رو از نظر امنیتی تست میکنیم ببینیم قابل نفوذ هست یا نه؟! در ابتدا میایم یه فولدر بنام 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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="CSS/Login.css"/><title>Login</title></head><body> <div id="SingUp"> <ul> <li id="title"> PHP-MVC </li> <li> <input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" /> </li> </ul> </div> <br /><br /> <div id="Login"> <div id="textbox"> <ul> <li> <input type="text" id="txt_User" name="txt_User" /> </li> <li> <input type="text" id="txt_Pass" name="txt_Pass" /> </li> <li> <input type="submit" id="btn_Login" name="btn_Login" value="ورود" /> </li> </ul> </div> <div id="label"> <ul> <li> <label>نام کاربری : </label> </li> <li> <label>رمز عبور : </label> </li> </ul> </div> <ul> <li id="title"> <div> PHP-MVC Login </div> </li> </ul> </div></body></html> |
با استفاده از کد زیر (که در بالا اومده)
|
۱
|
<link rel="stylesheet" type="text/css" href="CSS/Login.css"/> |
از کدهای Login.css توی Login.php استفاده میکنیم .
در ابتدا یه خروجی میگیریم (فعلاً هیچ قالبی ننوشتیم) :
کد Login.css :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
|
#SingUp, #Login{ border: 1px solid; margin: 0 auto;}#SingUp{ height: 90px;}#Login{ width: 550px;}#SingUp ul, #Login ul{ list-style: none;}#SingUp li{ float: left;} |
توی خط اول کد گفتم که یه کادر واسه دو تگ <div> بنامهای SingUp, #Login# بزاره و خط دوم هم margin برابر مقدار auto 0 قرار دادم چون میخوایم این دو تگ وسط صفحه قرار بگیرن .
زمانی که از تگ <ul> استفاده میکنیم، کنار مقادیر توی این تگ، یه مربع یا دایره قرار میگیره و چون نمیخوایم این مربع یا دایره نمایش داده بشن باید خاصیت list-style برابر none قرار بدیم .
اگه خواستیم مقادیر تگ <ul> بصورت افقی نمایش داده بشن باید خاصیت float تنظیم کنیم . ( که من این خاصیت برابر left تنظیم کردیم یعنی مقادیر از سمت چپ به راست بصورت افقی نمایش داده بشن )
و حالا یه خروجی دیگه میگیریم :
خوب حالا قسمت هایی رو باید تغییر بدیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
|
#SingUp{ height: 90px; background-color: #6260b6;}#Login{ width: 550px; height: 200px; border: 1px solid; border-radius: 5px; border-color: #999;} |
با استفاده از خاصیت border-radius میتونیم گوشه های کادر رو هلال کنیم .
اگه خواستید رنگهایی اختصاصی توی قالب سایت استفاده کنید میتونید برنامه فوتوشاپ باز کنید و رنگ خودتونو انتخاب کنید به صورت شکل زیر :
که من مقدار ۶۲۶۰b6 (که توی شکل معلومه) واسه خاصیت background-color قرار دادم .
سپس کدهای زیر رو اضافه میکنیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
|
#SingUp #title{ font-size: 30px; font-weight: bold; color: #FFF; margin-right: 40px; margin-left: 100px;}#Login #textbox{ position: absolute; margin: 45px 0 0 170px; }#Login #label{ position: absolute; margin: 50px 0 0 80px;} |
با استفاذه از خاصیت margin یه فاصله میزارم سمت راست و چپ متن PHP-MVC (مقدار PHP-MVC توی تگ <div> با id بنام title قرار داده، توی کدایی که نوشتین معلومه).
یه خروجی میگیریم :
و حالا دوباره یه تغییر کوچیک میدیم :
|
۱
۲
۳
۴
۵
|
#SingUp, #Login{ /*border: 1px solid;*/ margin: 0 auto;} |
خوب حالا این کدهارو هم اضافه میکنیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
|
#SingUp #Btn_SingUp{ background-color: #168500; border: 1px solid #999; width: 70px; height: 30px; color: #FFF; font-weight: bold; cursor: pointer;} |
خط آخر کد واسه این هست که هر وقت کاربر اشاره گر موس روی دکمه ثبت نام بگیره شکل اشاره گر (از شکل پیشفرض خودش یعنی فلش) تغییر کنه به شکل دست .
کد زیر به قسمت SingUp #title# اضافه میکینم :
|
۱
|
text-shadow: 0.5px 0.5px 5px #000; |
کد زیر به قسمت SingUp #Btn_SingUp# اضافه میکینم :
|
۱
|
text-shadow: 0px 0px 10px #FFF; |
زمانی که بخوایم واسه متن سایه بزاریم از text-shadow استفاده میکنیم .
این تکه کد به کدهامون اضافه میکنیم :
|
۱
۲
۳
۴
|
#Login ul{ padding: 0;} |
کد بالا تمام فاصله های درون تگ <ul> (فاصله از بالا ، پایین ، چپ و راست) صفر میکنه .
یه خروجی میگیریم ببینیم چطور شد :
خوب این تکه کد باید تغییر بدیم :
|
۱
۲
۳
۴
۵
|
#SingUp li{ float: left; margin-top: 20px;} |
حالا کدهای زیرو هم به کدامون اضافه میکنیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
|
#Login #title{ border-bottom: 1px solid #999; margin: 0 20px 30px 20px;}#Login #title div{ color: #4d279c; font-weight: bold; padding-bottom: 5px;} |
با استفاده از خط اول، یه خط زیر میزازیم واسه پایین متن PHP-MVC Login . توی خط دوم میایم یه فاصله ۲۰px میزاریم از چپ و راست و از بالا فاصله صفر میزاریم و از پایین هم فاصله ۳۰px میزاریم .
بعدش با استفاده از خاصیت padding-bottom یه فاصله ۵px میزاریم بین متن PHP-MVC Login و خط زیر متن .
حالا یه خروجی دیگه میگیریم .
خوب حالا این کدهارو هم اضافه میکنیم به کدهایی که تا الان نوشتیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
|
#Login label{ color: #615f64;}#Login #label li{ margin-bottom: 5px;}#Login #textbox #txt_Pass{ margin-top: 5px;}#Login #textbox #btn_Login{ margin-top: 12px; background-color: #005caa; border: 1px solid #000; color: #FFF; width: 50px; height: 27px; font-weight: bold; margin-left: 3px;} |
حالا یه خروجی میگیریم ببینیم چطوری شد:
تمام کد هایی که تا الان توی فایل Login.css نوشتیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
|
#SingUp, #Login{ /*border: 1px solid;*/ margin: 0 auto;}#SingUp{ height: 90px; background-color: #6260b6;}#SingUp #Btn_SingUp{ background-color: #168500; border: 1px solid #999; width: 70px; height: 30px; color: #FFF; font-weight: bold; cursor: pointer; text-shadow: 0px 0px 10px #FFF;}#SingUp #title{ font-size: 30px; font-weight: bold; color: #FFF; margin-right: 40px; margin-left: 100px; text-shadow: 0.5px 0.5px 5px #000;}#SingUp ul, #Login ul{ list-style: none;}#SingUp li{ float: left; margin-top: 20px;}#Login{ width: 550px; height: 200px; border: 1px solid; border-radius: 5px; border-color: #999;}#Login #textbox{ position: absolute; margin: 45px 0 0 170px; }#Login #label{ position: absolute; margin: 50px 0 0 80px;}#Login ul{ padding: 0;}#Login #title{ border-bottom: 1px solid #999; margin: 0 20px 30px 20px;}#Login #title div{ color: #4d279c; font-weight: bold; padding-bottom: 5px;}#Login label{ color: #615f64;}#Login #label li{ margin-bottom: 5px;}#Login #textbox #txt_Pass{ margin-top: 5px;}#Login #textbox #btn_Login{ margin-top: 12px; background-color: #005caa; border: 1px solid #000; color: #FFF; width: 50px; height: 27px; font-weight: bold; margin-left: 3px;} |
خوب تا اینجا یه قالب در حد معمولی واسه صفحه Login.php درست کردیم، حالا میایم کدهایی مینویسیم واسه وصل شدن به دیتابیس و استفاده از داده های جداول دیتابیس.
روی Wamp (کنار ساعت سیستم) کلیک میکنیم (البته اگه از برنامه Wamp استفاده میکنید) و PhpMyAdmin انتخاب میکنیم یا لینک زیر توی url وارد میکنیم و enter میزنیم .
یه دیتابیس به نام ITPro میسازیم و فعلاً یه جدول هم بنام tlb_UserPass هم واسه جدول نام کاربری و پسورد میسازیم بصورت زیر .
بعد از اینکه صفحه phpmyadmin باز کردیم به تب database میریم :
بصورت بالا یه دیتابیس به نام ITPro ایجاد میکنیم، سپس روی نام ITPro در سمت چپ کلیک میکنیم :
جدولی به نام tlb_UserPass با سه ستون ایجاد میکنیم .
سه ستون بنامهای id , username , password ایجاد میکینم که چون میخوایم پسوردهایی که توی دیتابیس ذخیره میشه MD5 بشن بخاطر همین طولشو ۳۲ گذاشتم و نام کاربری هم حداکثر باید ۱۰ کاراکتر باشه (که این اختیاری هست) و مقدار collation هم گذاشتم utf8_persian، تا مقادیر فارسی هم بتونیم توی جدول وارد کنیم .
خوب دیتابیس و جدولمونو ساختیم میریم سر وقت کدنویسی.
در ابتدا یه فایل بنام LoginModel.php توی فولدر Models ایجاد میکنیم و کلاس LoginModel توش تعریف میکنیم :
کد Login_Model.php :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
|
<?phpclass 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) :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
|
<?phpclass Login extends Controller{ function __construct() { parent::__construct(); $this->view->Render("Login/index"); } function run() { require("models/Login_Model.php"); $L_M = new Login_Model(); $L_M->run(); }} |
که من یه تابع بنام run نوشتم و توش یه شی از کلاس LoginModel ایجاد کردم و تابع run توی کلاس LoginModel فراخوانی کردم .
حالا باید یه تغییراتی هم توی کد Index.php (که توی فولدر Login هست) بدیم، یه تگ <form> باز میکنیم و تگ <div> با id بنام Login رو توش قرار میدیم بصورت زیر :
|
۱
۲
۳
۴
۵
۶
۷
|
<form id="form_login" name="form_login" method="post" action="Login/run" > <div id="Login"> . . . </div></form> |
خوب حالا کدهای کلاس Login_Model رو بصورت زیر تغییر میدیم :
دقت کنید زمانی که کاربر یوزر و پسورد خودشو وارد میکنه و روی دکمه ورود کلیک میکنه، تابع run از کلاس Login فراخوانی میشه یعنی اطلاعات (یوزر و پسورد) به این تابع فرستاده میشه .
در ضمن قبل از اجرای کدها، phpmyadmin رو باز کنید و توی جدول tlb_userpass یک یا چندتا یوزر و پسورد ذخیره کنید و پسوردی هم که ذخیره میکنید باید قبلش تبدیلش کنید به MD5 بعد ذخیرش کنید، خوب حالا میایم یه تست میکنیم ببینیم جواب میده یا نه ؟!!
یوزر و پسورد وارد میکنیم و حالا میبینید که بهمون welcome داد پس یعنی همه چی درسته حالا پسورد اشتباه میدم ببینم چطور میشه :
میبینید که بهمون پیغام Invalid Username Or Password داد پس داره درست کار میکنه ولی اینجا یه سوالی پیش میاد که آیا این کدی که من الان نوشتم به درد بخور هست یا نه؟
یعنی یه هکر میتونه سایت منو هک کنه یا نمیتونه؟!!!!
یوزر رو admin’ or ‘0’=’1 و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
امتحان میکنیم….
چی شد؟؟ هکر راحت تونست بدون اینکه پسورد منو بدونه تنها با در دست داشتن یوزر من وارد سایت بشه!! حتی هکر یه جور دیگه هم میتونه اطلاعات رو وارد کنه یعنی بدون اینکه یوزر منو داشته باشه وارد سایت بشه بصورت زیر :
یوزر رو #’alaki’ or ‘1’=’1 و پسورد رو هرچی خواستید وارد کنید (مثلاً alaki)
کاراکتر # یعنی هرچی بعد از این کاراکتر میاد به عنوان Comment یا توضیحات در نظر بگیر .
میبییند که بازم وارد سایت شدیم حتی با اینکه نه یوزر داشتم نه پسورد، به این روش هک SqlInjection میگن که البته این یه نمونه از sqlinject بود که بهتون گفتم، راه های دیگه ای هم وجود داره که در آموزش های بعدی با باگهای دیگه هم آشنا میشیم و رفعشون میکنیم .
