درس ششم- ساخت و کار با فرم ها (پیشرفته)

در درس های قبلی با ساخت فرم آشنا شدیم و دیدیم که چطور می شود داده های فرم را به برگه دیگری انتقال داد.

در درس امروز می خواهیم این کار را به طور پیشرفته تری و با انجام این عمل در یک فایل انجام دهیم. منظور این است که گاهی شما نیاز دارید که داده ها را به برگه دیگری بفرستید اما زمانی هم است که بخواهید در یک برگه این داده ها را گرفته و نسبت به آن واکنشی نشان دهید. مهمتر از داشتن یک برگه یا دو برگه، شیوه واکنش به این داده ها براساس خود داده ها است و این هم می تواند تعریف دیگری از داشتن تارنمای پویا باشد.

 

کار با فرم در یک برگه
منظور از این نوع عملکرد در ساخت فرم، داشتن «فرم» و «بررسی کننده» آن در یک برگه است. این عمل فوایدی در بر خواهد داشت که در ادامه با آنها آشنا می شویم. نکته مهم در داشتن هر دو فاکتور در یک برگه استفاده از یک تابع شرطی برای ارزیابی عملکرد و نحوه کار با آن است. مثلا این تابع انتخاب می کند که داده ها را نمایش دهد یا خود فرم را و این انتخاب را تحت چه شرایطی بگیرد. در زیر به ساختار این تابع شرطی توجه کنید:

if ( /*  فرم ارسال شد */){
//  دستورات بررسی کننده فرم
} else {
//  نمایش فرم
}

همانطور که مشاهده می کنید این شرطی، دو گزینه دارد. نخست اینکه آیا فرم ارسال شده که اگر ارسال شده باشد آن را بررسی می کند و دستورات داخل قطعه ابتدایی را انجام می دهد؛ دوم در صورت عمل ارسال فرم، به سراغ قطعه دوم رفته و فرم را نمایش می دهد. داشتن این شرطی برای ساخت فرم در یک برگه همراه بررسی و نمایش داده ها ضروری است.

 

شرط  «فرم ارسال شد»
اگر یادتان باشد در درس های قبلی فرمی داشتیم که داده ها را به برگه دیگر انتقال می داد، اما چه زمانی این انتقال صورت می گیرد؟

در داخل هر فرم «دکمه ای» با نام ارسال یا  Submit وجود دارد. «اگر فرم ارسال شد» یعنی اگر کاربر دکمه «ارسال» را بعد از پر کردن فرم فشار داد.

مثلا شرط مقابل را در نظر بگیرید:

if ( isset( $_POST['submit'] ) ) {
// دستورات کار با داده های فرم
} else {
// نمایش فرم }

تابع isset( $_POST['submit'] ) بررسی می کند که آیا دکمه ارسال یا Submit فشار داده شده است یا نه. از این تابع برای بررسی انتخاب یا عدم انتخاب دکمه ارسال فرم استفاده می شود.

بهتر است با ساخت فرمی این مفهوم را بیشتر بررسی کنیم. این فرم درست مانند فرم های درس های قبلی است با این تفاوت که از این فن جدید در آن استفاده می کنیم.

برای اینکه از داشته هایمان تا به امروز هم استفاده کنیم، ساخت این فرم را در ادامه درس قبلی و در قالب اضافه کردن یک برگه که حامل فرم است انجام می دهیم. فرم ثبت نام در تارنما را حتما قبلا دیده اید؛ بیایید در اینجا یک فرم ثبت نام ساده بسازیم و به تارنمایی که در درس قبل داشتیم اضافه کنیم.

در درس قبل تارنمایی درست کردیم از چند بخش به شرح زیر:

• سربرگ header.html
• پایین برگ footer.html
• صفحه اصلی index.php
• فایل شیوه style.css

حال به این تارنما یک برگه دیگر به نام «ثبت نام» اضافه می کنیم و در آن برگه فرم ثبت نام را نمایش می دهیم. در کنار آن، بررسی کننده فرم ثبت نام را هم در همان برگه می گنجانیم تا پاسخ ها یا هشدارها در همان برگه ثبت نام در بالا یا پایین فرم، به نمایش درآیند.

پوشه جدیدی به نام ثبت نام = register بسازید و محتوای پوشه ای که در درس قبل با نام Including Files ساختیم را در آن رونویسی و بازنویسی کنید.

حال باید در پوشه register یک پوشه به نام include شامل سربرگ، پایین برگ و فایل شیوه، و فایلی به نام index داشته باشید. فایل جدیدی در کنار فایل index به نام register.php بسازید. در ادامه با کدهایی که باید در آن قرار دهیم و همین طور تغییراتی که باید به باقی فایل ها بدهیم، اشاره می کنیم.

برگه ثبت نام
ابتدا کدهای زیر را در داخل این فایل رونویسی و بازنویسی کنید:

<?php  $page_title = 'ثبت نام';
include ('includes/header.html'); ?>
<h1>  ثبت نام </h1>
<?php
  if (isset($_POST['submit'])) {
$name = $_POST['name'] ;
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
if ( !empty($name) && !empty($username) && !empty($password) && !empty($email) ){
$respond = 'ثبت نام شما با موفقیت انجام شد'; }
else { $respond = ' لطفا تمام گزینه ها را پر کنید'; }
echo $respond ; }?>
<!-- کد برای ساخت فرم - form.html -->
<form action="register.php" method="post">
<fieldset> <legend align="right">لطفا فرم زیر را پر کنید</legend>
<label> نام کامل </label>
<input type="text" name="name" />
<label> شناسه </label> <input type="text" name="username" />
<label> رمز </label>  <input type="text" name="password" />
<label> رایانامه </label> <input type="text" name="email" />
</fieldset>
<input type="submit" name="submit" value="ارسال" class="submit"/>
</form>
<?php include ('includes/footer.html'); ?>

شرح کدهای این برگه
اکنون این برگه شامل هر دو بخش فرم و بررسی کننده آن است.

در ابتدا با ساختن متغیری نام هر برگه را در آن ذخیره کردیم تا در زمان وارد کردن سربرگ از آن استفاده کنیم. این کار به ما اجازه می دهد که نام هر برگه را با توجه به عملکرد آن برای تیتر برگه در مرورگر بفرستیم. این متغییر در سربرگ استفاده خواهد شد، تنها نکته این است که باید قبل از وارد کردن سربرگ در این برگه، این متغییر مقداردهی شود.

بعد از آن سربرگ را وارد کردیم که از تابع include استفاده شده است.

حال نوبت شرطی است که بررسی انتخاب یا عدم انتخاب دکمه ارسال از طرف کاربر را برایمان انجام می دهد. در داخل این شرط ابتدا داده های ارسالی را به داخل متغیرهایی می ریزیم که استفاده کردن از آنها را در ادامه برایمان راحت تر کنند.

حال شرط دیگری را در داخل شرط قبلی می گذاریم که از پر بودن تمام متغیرها مطمئن شویم. اگر تمام متغیرها پر بود، این یعنی تمام موارد توسط کاربر نوشته شده است و پیام «ثبت نام شما با موفقیت انجام شد» را در متغیری دیگری بنام respond می گذاریم.

در غیر این صورت در آن متغیر پیام «لطفا تمام گزینه ها را پر کنید» گذاشته می شود تا به کاربر هشدار دهد که باید تمام موارد را بنویسد و بعد از آن متغیر را چاپ می کنیم که بسته به نسبت به پر بودن یا نبودن موارد، مقدارش متفاوت است.

حال نوبت خود فرم است، البته این فرم مانند همان فرم های قبلی است با این تفاوت که مقدار گزینه action به نام همین فایل است. چرا که ما می خواهیم بررسی داده ها توسط همین فرم انجام شود.

در آخر هم فایل بالای برگه را وارد کردیم.

برگه سربرگ header
برای اینکه برگه جدید «ثبت نام» در تارنما قابل دیدن باشد، باید پیوند آن را به قسمت ناوبری تارنما «navigation bar» اضافه کنیم. پس تغییراتی در این فایل می دهیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"  charset= "utf-8" />
<title> <?php echo $page_title; ?> </title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>
<div id="header">
<h1> درسنامه </h1>
<div id="navigation">
<ul>
<li><a href="index.php"> خانه</a></li>
<li><a href="register.php">  ثبت نام </a></li>
</ul>
</div>
</div>
<div id="content">

شرح برگه
این برگه درست مانند برگه درس قبلی است البته با چند تغییر.

ابتدا که در <title> <?php echo $page_title; ?> </title> از متغییری که در قسمت قبلی شرح دادیم استفاده کردیم تا تیتر در مرورگر با توجه به عمل برگه نمایش یابد.

نکته بعدی اضافه کردن پیوند به برگه «ثبت نام» است که به صورت زیر انجام می شود.

<li><a href="register.php">  ثبت نام </a></li>

این تکه کد یک دکمه دیگر به ناوبری تارنما اضافه می کند که مقصد این گزینه به برگه ثبت نام ختم می شود.

بعد از انجام این تغییرات اگر به تارنما نگاه کنید این دکمه را خواهید دید.

برگه شیوه
برچسب های لازم در این برگه قبلا در درس های دیگر آورده شده است. کافی است که آنها را در این برگه وارد کنید. برای این کار کدهای درس Including Files و کدهای درس Form را وارد این برگه کنید. البته تنها تغییر در انتخابگر ارسال است که در زیر می بینید.

.submit {text-align:center; border:1px solid #ddd; color:#039; width:20%; margin:auto 20px auto auto;}

از آنجایی که هدف این درس آموزش سی اس اس نیست و پیش فرض ما هم دانش این شیوه نویسی از طرف کارآموزان است، در اینجا بیشتر به این بخش نمی پردازیم. اما شما می توانید شیوه نمایش را به سلیقه خود تغییر دهید. تنها کافیست که مقادیر انتخابگرها را تغییر دهید.

نتیجه کار باید چیزی شبیه تصویر زیر گردد.

 

فرم (چسبنده) حفظ کننده مقدار Sticky Form
فرم چسبنده در همان فرم استاندارد در اچ تی ام ال است منتها با این تفاوت که در این فرم قابلیت نگهداری مقادیر نوشته شده در کادر اضافه می شود.

فرض کنید که کاربر تارنمای شما در هنگام ثبت نام دچار خطا شود و سیستم پیغام بازگشت و درست کردن آن مقدار را بدهد. خب کاربر باید دوباره تمام موارد را بنویسد اما با استفاده از فرم چسبنده سیستم می تواند موارد را در خود حفظ کرده و در قسمت های نوشته شده دوباره نمایش دهد. آنگاه در صورت بروز خطا، کاربر فقط قسمت های مشکل دار را دوباره نویسی می کند.

بهتر است این کار را با فرم ساخته شده در همین درس انجام دهیم. به کدهای زیر توجه کنید:

<form action="register.php" method="post">
<fieldset>
<legend align="right">لطفا فرم زیر را پر کنید</legend>
<label> نام کامل </label>
<input type="text" name="name" value="<?php if (isset($_POST['name'])){ echo $_POST['name'];} ?>" />
<label> شناسه </label>
<input type="text" name="username" value="<?php if (isset($_POST['name'])){ echo $_POST['username'];} ?>" />
<label> رمز </label>
<input type="text" name="password" />
<label> رایانامه </label>
<input type="text" name="email" value="<?php if (isset($_POST['name'])){ echo $_POST['email'];} ?>" />
</fieldset>
<input type="submit" name="submit" value="ارسال" class="submit"/>
</form>

این قسمت فرم در برگه ثبت نام است. اگر توجه کنید می بینید که در داخل برچسب های input  المان جدیدی با نام  value وارد شده است. value در اصل مقدار پیش فرض است که در داخل کادر نمایان می شود. با کمک value و شرطی که داخل آن می گذاریم ما می توانیم در صورت نوشته شدن کلمه ای، آن را دوباره در داخل کادر نمایش دهیم تا کاربر نیاز به دوباره نویسی نداشته باشد.

نکته: معمولا این کار در مورد قسمت «رمز» به دلیل رعایت نکات امنیتی انجام نمی شود.

اجازه بدهید یک نگاه دقیق تری به یکی از این المان ها بی اندازیم.

<input type="text" name="name" value="<?php if (isset($_POST['name'])){ echo $_POST['name'];} ?>" />

همانطور که مشاهده می کنید، در این کد که یک کادر متنی اضافه می کند، المان جدیدی اضافه شده است: value

در داخل این المان یک شرط نیز گذاشته شده است:

if ( isset($_POST['name']) ) {  echo $_POST['name']; }

که می گوید: اگر نوشته ای وارد این کادر شد، آن نوشته را در همین کادر چاپ کن. فکر می کنیم حال به قدرت و کاربری شرطی ها بیشتر اعتقاد پیدا کرده اید، نه؟

در اینجا این درس هم به پایان می رسد. در درس آینده به سراغ توابع و چگونگی ساخت آنها می رویم.