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

و

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

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

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

خروجی :

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

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

نویسنده : مهدی رزمجویی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#شی_گرایی_در_php #آموزش_mysql #تابع_json_encode #آموزش_گام_به_گام_php #آموزش_jquery #آموزش_css #آموزش_php #آموزش_پی_اچ_پی #تابع_preg_match #آموزش_mvc_در_php
عنوان
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 نظر

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

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

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