درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
مهدی رزمجویی
امتیاز: 8194
رتبه:73
0
17
2
36
توسعه دهنده C# ، ++C ، PHP ، SQL ، محقق بدافزار ، توسعه دهنده آنتی ویروس پادویش ، توسعه دهنده آزمایشگاه بدافزار ، علاقمند به مهندسی معکوس پروفایل کاربر

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

تاریخ 54 ماه قبل
نظرات 0
بازدیدها 1090
تو این قسمت از آموزش میخوایم یه تصویر امنیتی درست کنیم و زمانی که کاربر میخواد ثبت نام کنه باید این تصویرو به درستی وارد کنه .میخوایم موقعی که کاربر روی کادر متن "سوال امنیتی" کلیک میکنه (یعنی فوکوس میکنه) این تصویر امنیتی نمایش داده بشه و هر وقت فوکوس از کادر متن "سوال امنیتی" برمی داره این تصویر مخفی بشه .کنار کادر متن "سوال امنیتی" یه دکمه واسه ریفرش کردن تصویر امنیتی قرار میدیم که با کلیک بر روی این دکمه یه تصویر جدید تولید بشه بدون اینکه خود صفحه ریفرش بشه .اینکارو فقط و فقط با جاوا اسکریپت (البته با کمک 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;
}
خروجی از کارمون :
دوره آموزشی برنامه نویسی MVC در PHP قسمت سیزدهم

یه سایه به کادرمون میدیم و میخوایم زمانی که کاربر با موس روی دکمه ریفرش رفت، عکس ریفرش بچرخه .کدای زیرو به قسمت 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 درجه عکسو میچرخونیم .
دوره آموزشی برنامه نویسی MVC در PHP قسمت سیزدهم

خوب میریم سر کد تولید تصویر امنیتی با استفاده از جاوا اسکریپت .کد امنیتی ما از 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();
});
دوره آموزشی برنامه نویسی MVC در PHP قسمت سیزدهم

حالا میخوایم کد امنیتی زمانی نمایش داده بشه که فوکوس کردیم به کادر متن "سوال امنیتی" ، در نتیجه کدای زیر اضافه میکنیم به ادامه کدای بالا .
$("#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 اضافه شدن و مابقی خطوط تکراری هستن .امتحان میکنیم ببینیم چطوری شد، در ابتدا تصویر امنیتی درست وارد میکنیم .

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

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

میبینید که دور کادر به رنگ سبز دراومد یعنی کاربر تصویر امنیتی درست وارد کرده و این سری میایم اشتباه وارد میکنیم .
دوره آموزشی برنامه نویسی MVC در PHP قسمت سیزدهم

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

و این بار هم چون غلط وارد کردیم دور کادر به رنگ قرمز دراومد .تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید . امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید .

نویسنده : مهدی رزمجویی
منبع : جزیره طراحی و توسعه وب وب سایت توسینسو
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
برچسب ها
ردیف عنوان
1 دوره آموزشی برنامه نویسی MVC در PHP قسمت اول
2 دوره آموزشی برنامه نویسی MVC در PHP قسمت دوم
3 دوره آموزشی برنامه نویسی MVC در PHP قسمت سوم
4 دوره آموزشی برنامه نویسی MVC در PHP قسمت چهارم
5 دوره آموزشی برنامه نویسی MVC در PHP قسمت پنجم
6 دوره آموزشی برنامه نویسی MVC در PHP قسمت ششم
7 دوره آموزشی برنامه نویسی MVC در PHP قسمت هفتم
8 دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم
9 دوره آموزشی برنامه نویسی MVC در PHP قسمت نهم
10 دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم
11 دوره آموزشی برنامه نویسی MVC در PHP قسمت یازدهم
12 دوره آموزشی برنامه نویسی MVC در PHP قسمت دوازدهم
13 دوره آموزشی برنامه نویسی MVC در PHP قسمت سیزدهم
14 دوره آموزشی برنامه نویسی MVC در PHP قسمت چهاردهم
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید