درس دوم- ساخت فرم و انتقال داده از فرم به برگه نمایش

          سینا خرسند 
            بازدید : 462
          جمعه 12 تیر 1394
           نظرات (0)
        

درس دوم- ساخت فرم و انتقال داده از فرم به برگه نمایش

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

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

برای انجام این مهم دو کار ضروری است٬ یکی ساخت خود فرم و دیگری نوشتن کد پی اچ پی برای گرفتن و پردازش داده های ارسالی فرم.

از آنجایی که پیش نیاز این درس اچ تی ام ال و آگاهی کمی از سی اس اس است، ما وارد جزییات چگونگی ساخت فرم نخواهیم شد اما در یک مثال شما این فرم را در اختیار خواهید داشت. هر فرم اچ تی ام ال با برچسب <form action="form.php" method="post"> آغاز شده و با </form> پایان می پذیرد. در داخل این فرم دو ویژگی وجود دارد که در زیر به دلیل استفاده از آنها اشاره می کنیم:

- action: این ویژگی تعیین می کند که داده ها به کدام فایل که کد پی اچ پی در آن قرار دارد ارجاع داده شود.

- method: این نحوه عملکرد در ارسال داده ها را تعیین می کند که در زمان خود به آن بیشتر می پردازیم.

در داخل این برچسب فرم٬ المان های دیگری نظیر textbox و radio button و select menu و غیره قرار می گیرند. این المان ها براساس نیاز و در جای مشخص خود واقع می شوند. اما نکته مهم نامی است که شما برای آنها انتخاب می کنید که کد پی اچ پی با آن نام ها، آنها را شناسایی می کند.

مشخصات ویژگی های method در فرم
دو انتخاب برای این ویژگی وجود دارد که در زیر به آنها پرداخته می شود:

- GET: وقتی از این ویژگی استفاده می کنیم٬ داده ها به صورت نام = مقدار به مرورگر شما داده می شود به طوری که شما در نشانی مرورگر خود این داده ها را مشاهده می کنید.

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

خوبی این کار این است که کاربر می تواند این صفحه را برای خود نشان گذاری یا Bookmark کند و یا با کمک دکمه عقب (Back)٬ به عقب برگردد.

نگران نباشید! زمانی که فرم را با هم ساختیم، به صورت عملی این مورد را کاملا خواهید دید.

نکته ۱: به خاطر پدیدار شدن داده ها در محل نشانی مرورگر، ما از ویژگی get در مواردی که امنیت در درجه بسیار بالای باشد به هیچ وجه استفاده نمی کنیم.

نکته ۲: در اندازه مقدار داده شده به متد get محدودیت وجود دارد.

- POST: به طور کلی از این ویژگی برای زمانی استفاده می کنیم که امنیت بیشتری لازم داریم؛ چرا که این متد، داده ها را در مرورگر نشان نمی دهد. مثلا فرض کنید می خواهید مقداری را در پایگاه داده ها ثبت کنید و یا می خواهید رایانامه ای را ارسال کنید.

نکته: در استفاده از این متد هیچ محدودیتی برای اندازه داده ارسالی نداریم.

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

ابتدا فایلی با نام form.php ساخته و در پوشه www/php که قبلا در پوشه برنامه WampServer ساخته اید قرار دهید. حال برنامه را اجرا کرده و به آدرس http://127.0.0.1/php/form.php بروید و یا از طریق آیکون برنامه، Localhost را انتخاب کنید. فعلا یک برگه سفید بیش نیست اما در ادامه این برگه را با فرم خود پر می کنیم.

نکته: همانطور که در بالا گفتیم برای این قسمت ما دو مرحله کار داریم: ساخت فرم و نوشتن کد پی اچ پی. نکته قابل توجه این است که ما می توانیم به دو شکل این کار را انجام دهیم. یکی گذاشتن هر دو قسمت یعنی فرم و کدهای پی اچ پی در داخل یک فایل و دیگری جدا کردن این دو قسمت به صورتی که فرم در یک فایل باشد و کد پی اچ پی در فایل دیگر. ابتدا ما به شکل دو فایل که کار را ساده تر می کند این کار را انجام می دهیم و در آینده به شکل تک فایل.

در فایل فرم خود کدهای زیر را وارد کنید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش ساخت فرم اچ تی ام ال</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head> <body>

<form action="form_handler.php" method="get">
<fieldset>
<legend align="right">لطفا فرم زیر را پر کنید</legend>
<label> نام</label>
<input type="text" name="name" />
<label> رایانامه </label>
<input type="text" name="email" />
<label>دیدگاه</label>
<textarea name="comments" ></textarea>
</fieldset>
<input type="submit" name="submit" value="ارسال" class="submit"/>
</form>
</body>
</html>

حال فرم خود را در مرورگر نظاره کنید.

قسمت بعدی فایلی است که کدهای پی اچ پی در آن قرار دارد. فایل دیگری با نام form_handler.php بسازید. این فایل کار دریافت و سازماندهی داده ها را انجام می دهد. اطلاعات زیر را در داخل آن بنویسید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> پاسخ </title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div id="contain">
<?php // چاپ داده های ارسالی
$name = $_GET['name'];
$email = $_GET['email'];
$comments = $_REQUEST['comments'];
echo 'با سپاس <br /><span> ' . $name . '</span><br />برای این نوشته <br />' ;
?>
<div class="comment"> <?php echo $comments ; ?> </div><br />
ما با شما تماس می گیریم توسط این رایانامه <br />
<div class="email">
<?php echo $email . '<br /><br />' ;?>
</div>
<a href="form.php">برگشت</a>
</div>
</body>
</html>

قبل از امتحان کدها یک کار دیگر هم باید انجام دهیم تا داده ها همان طور که ما می خواهیم نمایش داده شوند. فایل دیگری بسازید و نام آن را style.css بگذارید و کدهای زیر را در داخلش بنویسید.

body { background-color:#fff; text-align: center; color:#333;}
/* قسمت فرم */
form { width:700px; margin:100px auto auto;}
fieldset{border:1px solid #ddd;}
label, input, textarea{margin:5px 10px 0px auto; text-align: right; clear: both; float:right;width:60%;}
input{margin:5px 10px 10px auto}
textarea{width:80%; height:150px;}
.submit{float: none; text-align: center; border:1px solid #ddd; color:#039;}

/* قسمت پی اچ پی */
#contain{ border:1px solid #ddd; width:60%; margin:150px auto auto auto; overflow: hidden;}
span{color: GREEN;}
.email{color:#960;}
.comment{color:#09C; width:80%; border:1px solid #eee; margin: auto;}

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

نکته ۱: هر سه این فایل ها باید در داخل یک پوشه قرار گیرند.

نکته ۲: ما از متد GET و REQUEST برای ارسال داده ها استفاده کردیم٬ لطفا نگاهی هم به نشانی مرورگر بعد از فشردن دکمه ارسال بیاندازید. چه می بینید؟ بله داده ها به صورت نام و مقدار در داخل نشانی مرورگر دیده می شوند. حال در دو فایل فرم و پی اچ پی هر جا که GET یا REQUEST می بینید، آنها را با POST عوض کنید. حال چه شد؟ اثری از داده ها در مرورگر نیست. بعد از استفاده از POST دیگر داده ها در مرورگر فرستاده نمی شوند.

نکته ۳: اگر در فایل form_handler.php دقت کنید ما از متغیری با نام $_REQUEST به صورت آنچه در زیر می بینید استفاده کردیم.

$comments = $_REQUEST['comments'];

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

نکته ۴: کدهای داده شده در این درس قبلا امتحان شده است٬ پس اگر احیانا به خطایی برخورد کردید، ممکن است که شما کدها را اشتباه وارد کرده باشید. اما اگر از کار خود مطمئن هستید لطفا مورد خطا را در پرسشکده و در تالار مربوط به این دوره اطلاع دهید تا مشکل را حل کنیم.

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

نکته ۵: اگر به جای نوشته هایی مثل نام و... مطلبی نبود، این یعنی که متغیر خالی است و مشکلی در انتقال داده به متغیر اتفاق افتاده است.

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

تا بعد...