در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

دوره آموزشی برنامه نویسی 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;
}

خروجی از کارمون :

دوره آموزشی برنامه نویسی 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 قسمت چهاردهم رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....