فرم ثبت نام حرفه ای با PHP/jQuery به صورت AJAX

تبلیغات
کانال تلگرام فتولیا

سلام :)

در این مبحث اگر موافق باشید می خواهیم روی یک فرم با شمایل فیبر کربن ! کار کنیم که دارای ارتقاهای اساسی می باشد.یعنی بتواند بدون جاوااسکریپت و css (مخصوصا در خانواده محبوب IE) کار کند و نیز مجهز به نمایی زیبا و دلفریب که حاصل ضرب jQuery و CSS به علاوه Ajax است.

از خصوصیات مهم آن اعتبار سنجی ورودی های فرم به صورت tooltip (آژاکسی) و نیز بقای اسکریپت در زمان غیر فعال بودن جاوااسکریپت هست.

 

قدم ۱ – XHTML

اولین قدم شامل ایجاد یک ستون فقرات از جنس xhtml برای فرم مان است

demo.html
<div id="carbonForm">
	<h1>Signup</h1>

	<form action="submit.php" method="post" id="signupForm">

		<div class="fieldContainer">
			<div class="formRow"></div>
			<!-- Two more formRow divs -->
		</div>

		<div class="signupButton">
			<input type="submit" name="submit" id="submit" value="Signup" />
		</div>

	</form>
</div>

دیو carbonForm نگهدارنده اصلی فرم است.این عنصر توسط خصیصه margin در css ، درست رد وسط صفحه قرار می گیرد و نیز با استفاده از جی کوئری به صورت عمودی نیز در مرکز قرار می گیرد.

در داخل آن ما یک تگ heading ویک فرم با fieldContainer داخلش داریم.در داخل آن نیز ۳ دیو formRow خواهیم داشت با کدهایی شبیه زیر :

demo.html
<div class="formRow">
	<div class="label">
		<label for="name">نام:</label>
	</div>

	<div class="field">
		<input type="text" name="name" id="name" />
	</div>
</div>

همینطور که می بینید ،هر label و input در داخل دیو نگهدارنده خودش قرار دارد که در سمت راست ، شناور(float) شده اند.نکته مهم این است که در ورودی های متن، خصیصه name باید با id مساوی باشد زیرا برای نمایش tooltip خطای رخ داده از این روش استفاده خواهیم کرد که در ادامه می بینید

قدم ۲ – CSS

فرم ما برای اینکه حالت فیبر کربنی پیدا کند شدیدا نیازمند css است.در کد پایین از تعدادی عنصر css3 نیز استفاده شده است که موجب گردیده افکت های خوبی را ایجاد کنیم که قبل از این فقط در نرم افزارهای گرافیکی مثل فتوشاپ امکان ایجادشان بود.در اینجا فقط تعدادی از سبک های جالب css را می آوریم و فایل کامل styles.css را در سورس آموزش می توانید پیدا کنید

#carbonForm{
	/* The main form container */
	background-color:#1C1C1C;
	border:1px solid #080808;
	margin:20px auto;
	padding:20px;
	width:500px;

	-moz-box-shadow:0 0 1px #444 inset;
	-webkit-box-shadow:0 0 1px #444 inset;
	box-shadow:0 0 1px #444 inset;
}

.fieldContainer{
	/* The light rounded section, which contans the fields */
	background-color:#1E1E1E;
	border:1px solid #0E0E0E;
	padding:30px 10px;

	/* CSS3 box shadow, used as an inner glow */
	-moz-box-shadow:0 0 20px #292929 inset;
	-webkit-box-shadow:0 0 20px #292929 inset;
	box-shadow:0 0 20px #292929 inset;
}

#carbonForm,.fieldContainer,.errorTip{
	/* Rounding the divs at once */
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

.formRow{
	height:35px;
	padding:10px;
	position:relative;
}

.label{
	float:right;
	padding:0 20px 0 0;
	text-align:right;
	width:70px;
}

label{
	font-family:Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
	font-size:11px;
	letter-spacing:1px;
	line-height:35px; /* Neat line height trick */
}

.field{
	float:right;
}

.field input{
	/* The text boxes */
	border:1px solid white;
	color:#666666;
	font-family:Arial,Helvetica,sans-serif;
	font-size:22px;
	padding:4px 5px;
	background:url("img/box_bg.png") repeat-x scroll left top #FFFFFF;
	outline:none;
}

#submit{
	/* The submit button */
	border:1px solid #f4f4f4;
	cursor:pointer;
	height:40px;
	text-indent:-9999px;
	text-transform:uppercase;
	width:110px;

	background:url("img/submit.png") no-repeat center center #d0ecfd;

	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

#submit.active{
	/* Marking the submit button as active adds the preloader gif as background */
	background-image:url("img/preloader.gif");
}

input:hover,
input:focus{
	/* CSS3 glow effect */
	-moz-box-shadow:0 0 8px lightblue;
	-webkit-box-shadow:0 0 8px lightblue;
	box-shadow:0 0 8px lightblue;
}

قدم ۳ -jQuery

بعد از الحاق کتابخانه jQuery و فایل script.js می توانیم برویم سراغ کد نویسی جاوااسکریپت و جان تازه ای در کالبد فرم بدمیم :)

script.js
$(document).ready(function(){
	// $(document).ready() is executed after the page DOM id loaded

	// Binding an listener to the submit event on the form:
	$('#signupForm').submit(function(e){

		// If a previous submit is in progress:
		if($('#submit').hasClass('active')) return false;

		// Adding the active class to the button. Will show the preloader gif:
		$('#submit').addClass('active');

		// Removing the current error tooltips
		$('.errorTip').remove();

		// Issuing a POST ajax request to submit.php (the action attribute of the form):
		$.post($('#signupForm').attr('action'),
			$('#signupForm').serialize()+'&fromAjax=1',function(response){

			if(!response.status)
			{
				// Some kind of input error occured

				// Looping through all the input text boxes,
				// and checking whether they produced an error
				$('input[type!=submit]').each(function(){
					var elem = $(this);
					var id = elem.attr('id');

					if(response[id])
						showTooltip(elem,response[id]);
				});
			}
			else location.replace(response.redirectURL);

			$('#submit').removeClass('active');
		},'json');

		e.preventDefault();
	});

	$(window).resize();
});

// Centering the form vertically on every window resize:
$(window).resize(function(){
	var cf = $('#carbonForm');

	$('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)
});

// Helper function that creates an error tooltip:
function showTooltip(elem,txt)
{
	// elem is the text box, txt is the error text
	$('<div class="errorTip">').html(txt).appendTo(elem.closest('.formRow'));
}

با این کد کلیک کردن دکمه ثبت نام یا فشار دادن دکمه enter موجب ارسال فرم می شود.همچنین برای اینکه فمر به صورت معمولی ارسال نشود یک تابع به نام ()e.preventDefault داریم که از اینکار جلوگیری می کند و یه جایش یک درخواست Ajax به submit.php می فرستد.

در همین رابطه :   آموزش انتخابگر ها (Selectors) در CSS

پاسخی که برگشت داده میشود به صورت JSON(یک شی جاوااسکریپت) خواهد بود که شامل یک خصیصه مهم وضعیت است.در واقع بوسیله این مقدار است که اسکریپت خطای مربوط به هر کدام از فیلد ها را برایش نمایش می دهد یا به آدرس تعیین شده در آن ریدایرکت میشود.

یک نمونه از پاسخ برگشتی خطا

{
	"status"	: ۰,	// Indicates that the response is an error
	"email"		: "Please fill in a valid email!",		// Error message
	"pass"		: "Please fill in a valid password!"	// Error message
}

خطاهای فرم که به صورت tooltip هستند ،به وسیله اسکریپت ایجاد می شوند به این صورت که یک حلقه بین تمام فیلد های فرم ایجاد می کند و هربار چک می کند که آیا id فیلد ها به عنوان خصیصه در جواب برگشتی موجود است یا نه .اگر این طور باید یک tooltip بوسیله تابع ()showTooltip ایجاد میشود.

همچنین دقت کنید که چطور در خط ۱۸ از تابع ()serialize برای ارسال یکجای فیلدها استفاده کرده ایم.نیز در همان خط ۱=fromAjax را ست کردیم تا php پاسخ را به صورت JSON برگشت دهد.

حالا اجازه دهید ببینیم چگونه پاسخ ایجاد می شود و ورودی ها اعتبارسنجی می شوند.

 

قدم ۴ – PHP

یکی از قابلیت های خوب این فرم این است که بدون جاوا اسکریپت نیز کار می کند.این کار کردن ، به خاطر خصیصه action فرم است که روی submit.php تنظیم شده است.این به این معنی است که ما تنها نیاز به پیاده کردن اعتبار سنجی داریم و مهم نیست فمر چطور ارسال میشود

<?php
// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// This is the URL your users are redirected,
// when registered succesfully:

$redirectURL = 'http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html';

$errors = array();

// Checking the input data and adding potential errors to the $errors array:

if(!$_POST['name'] || strlen($_POST['name'])<3 || strlen($_POST['name'])>50)
{
	$errors['name']='لطفا فیلد ایمیل را پر کنید<br />باید بین ۳ تا ۵۰ کاراکتر باشد !';
}

if(!$_POST['email'] || !preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email']))
{
	$errors['email']='لطفا فیلد ایمیل را پر کنید !';
}

if(!$_POST['pass'] || strlen($_POST['pass'])<5)
{
	$errors['pass']='لطفا فیلد کلمه عبور را پر کنید !<br />باید بیشتر از ۵ کاراکتر باشد.';
}

// Checking whether the request was sent via AJAX
// (we manually send the fromAjax var with the AJAX request):

if($_POST['fromAjax'])
{
	if(count($errors))
	{
		$errString = array();
		foreach($errors as $k=>$v)
		{
			// The name of the field that caused the error, and the
			// error text are grouped as key/value pair for the JSON response:
			$errString[]='"'.$k.'":"'.$v.'"';
		}

		// JSON error response:
		die	('{"status":0,'.join(',',$errString).'}');
	}

	// JSON success response. Returns the redirect URL:
	echo '{"status":1,"redirectURL":"'.$redirectURL.'"}';

	exit;
}

// If the request was not sent via AJAX (probably JavaScript
// has been disabled in the visitors' browser):

if(count($errors))
{
	echo '<h2>'.join('<br /><br />',$errors).'</h2>';
	exit;
}

// Directly redirecting the visitor:

header("Location: ".$redirectURL);
?>

حالا تمام خطاهای رخ داده به آرایه errors$ اضافه خواهند شد.همچنین تعیین اینکه خطاها به صورت json بازگشت داده شوند و یا مستقیما نمایش داده شوند بوسیله fromAjax تعیین می شود که قبلا گفتیم.

در همین رابطه :   ايجاد افكت fade با jquery و animate

خوب دیگه فرم کربنی ما تمام شد !

منبع

27 Comments

  1. سلام
    یه سوال من اگر بخواهم یه فرم درست کنم که به این صورت باشه که:
    دوتا کادر داشته باشیم که یکی از آنها برای انتخاب استان و دیگری برای انتخاب شهرستان و کاد رشهرستان غیر فعال باشه و تا زمانی که استان را انتخاب نکنیم ان کادر غیر فعال باشه و زمانی که استان انتخاب شد کادر شهرستان فعال و شهرستان های آن استان را به ما نشان بده
    من برای درست کردن این کادر چکار باید بکنم؟؟؟
    اگر امکانش است از طریق ایمیل به من جواب بدهید

  2. سلام من طراحی تازه شروع کردم یه نمونه کار دیدم مثلا روی ورود که کلیک میکردی بدون رفرش صفحه یه صفحه دیگه میومد وسط فرم لاگین نمایش داده میشد میخواستم بدونم اسمش چیه کاری به رفرش صفحه ندارم میدونم با ایجکس هست این که صفحه دیگه میاد بالا میخوام بدونم اسمش چیه؟

  3. کاش یه دموی آنلاین روی گیت هاب میذاشتید تا بشه بهتر با آموزش به اصطلاح ور رفت و یادگیری بهتر رو به ارمغان آورد.
    سپاس

  4. سلام
    یه سوال دارم من دارم یه فرم ثبت سفارش درست میکنم و به جای فیلد textاز select استفاده کردم ولی پیقامی نمایش داده نمیشود. لطفا راهنمایی کنید:
    این هم کدی که در قسمت demo.html قرار دادم

    ۰/۵ لیتری
    ۱/۵ لیتری

    این هم کدی که درقسمت submit.php قرار دادم
    if(!$_POST[‘name’])
    {
    $errors[‘name’]=’لطفا فرمت مورد نظر را انتخاب کنید!’;
    }
    }

  5. سلام
    کسی هست مطلب یا توضیحاتی واسه پروژه ساخت یک فرم ثبت نام که وقتی کاربر فرم رو پر کرد با زدن دکمه تایید یه ایمیل واسه مدیر سایت بیاد و پس از تایید کردن وارد سایت بشه
    ahmad.reza360@yahoo.com
    اگه فایلی pdfیا هر چی در این مورد داشتین ممنون دارتون میشم واسم ایمیل کنین

  6. سلام.
    ممنون با بابا این مطلب زیبا.
    من می خوام این فرم رو توی یه برگه ی جدا در قالبم ( از وردپرس استفاده می کنم)
    قرار بدم.
    من چطور کد های php وردپرس رو وارد کنم یا چه طور بتونم همچین فرم عضویت یا ورود بسازم( بدون استفاده از پلاگین)
    هر چی سرچ می کنم آموزشی برای ساخت فرم عضویت پیدا نمی کنم.
    ممنون میشم کمکم کنید تا بتونم یه فرم عضویت و ورود کاربران رو خودم بسازم.
    البته php بلد نیستم.ولی اگه آموزشی هست بفرمایید.
    بازم ممنون

    1. سلام
      ممنون . پلاگین های خیلی زیادی برای وردپرس هستن که می تونن فرم تماس بسازن . وردپرس خودش هم فرم ثبت نام و ورود کاربر رو داره . به صورت جدا دقیقا اطلاع ندارم ولی فک کنم راهی بود که فایل های php رو تو تب اجرا می کردن

    1. سلام
      تا جایی که می دونم باید یه افزونه بنویسید تا با وردپرس مچ بشه گرچه افزونه های مثل contact form 7 هم تقریبا همین کارو می کنن

    1. سلام نیما جان
      نه ایمیل که نمیشه .اگه تو خط ۴۹ و ۶۵ کد php دقت کنی اگه خطایی نبود سعی می کنه به یه آدرسی redirect کنه ، حالا می تونی بالای اون خط ها کدهای مربوط به ریختن تو دیتابیس رو بزاری

    1. سلام
      نفرمودید کجاش مشکل دارید ولی احتمالا می خواهید تو دیتابیس ذخیره کنید ولی اینکه کجا رو باید تغییر داد رو دقیق نمی دونید اگه اینطوره یه توضیح کوچیک می دم شاید کمکتون کرد
      این اسکریپت دو نوع کارکرد داره .یکی وقتی به صورت ajax کار می کنه ویکی وقتی به صورت معمولی(جاوااسکریپت غیرفعال)
      در مورد اول کدهای خط ۳۲ تا ۵۲ کار می کنه.اگر خطایی بود کدهای ۳۴ تا ۶۴ اجرا میشن وگرنه کدهای ۴۹ تا ۵۱.پس اگه می خواید ورودی ها رو تو دیتابیس ذخیره کنید ، می تونید اونجا قرار بدید
      در مورد دوم که بدون آژاکس هست کدهای خط ۵۷ تا ۶۵ اجرا میشن و اگر خطایی نبود در خط ۶۵ نتیجه برگشت داده میشه که باز می تونید اونجا کار ذخیره تو دیتابیس رو انجام بدید.
      البته برای حجیم نشدن برنامه می تونید یک تابع بنویسید و اون رو در این دو محل فراخوانی کنید.
      اگه مشکل از جای دیگه ای بود باز بفرمایین

      موفقیت

  7. سلام
    خوبین ؟
    میشه ترتیب قرار دادن این ها رو هم بگید ؟
    من دارم یه پروژه برا واحد دانشگاهیم با php می نویسم
    و چیزی سر در نمیارم ، خیلی .
    لطفا تو قرار دادن این فرم در طراحی وب سایت کمکم کنید

    ممنون

    :)

    1. سلام
      ممنونم ، خوب لازم نیست کدها رو از تو پست کپی کنید ، می تونید فایل zip رو که شامل همه کدهای پروژه هست رو از آخر بحث دانلود کنید.
      هر کجاش هم مشکل دارید بفرمایید بتونم راهنمایی می کنم حتما
      موفقیت :)

  8. سلام علی جون این تیکه رو خوب اومدی ( خانواده محبوب IE ) پدرمونو در آورده
    یه سایت خبری دارم می نویسم واسه همین سرم شلوغه

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in CSS, JavaScript
آموزش شروع کار با AngularJS

Angularjs یک فریم ورک جاوا اسکریپت است که توسط Google ایجاد شده و پشتیبانی می شود . هدف Angularjs بست...

Close