ساخت فرم و مدیریت اطلاعات آن با php
سایتهای امروزی سایتهایی پویا هستند که بر اساس ورودیهای دریافت شده از کاربران واکنشهای لازم را به انجام میرسانند. روش استاندارد و پایه برای ارسال اطلاعات کاربران به سرور با کمک فرمهای HTML است. در این نوشته روش دریافت و پردازش اطلاعات کاربران را که در فرمهای HTML پر شدهاند بررسی میکنیم.
در این نوشته فرض بر این است که تا حدودی با کدنویسی HTML آشنایی دارید ولی سعی میکنیم نکات لازم در خصوص ساخت فرمهای HTML را نیز مرور نماییم.
۱- ساخت فرم در HTML
برای ساخت فرم لازم است تا از تگ form استفاده کنیم. شیوهی نوشتن این تگ به صورت زیر است:
1 2 3 |
<form action="server.php" method="POST"> <!-- فیلدها اینجا قرار میگیرند --> </form> |
دو ویژگی یا attribute با نامهای action و method در قطعه کد بالا مشاهده میشوند.
- ویژگی action مشخص میکند که اطلاعات پر شده توسط کاربر به چه آدرسی ارسال شود. در اینجا ما نام یک فایل php را نوشتیم که میبایست در شاخهی فایل فعلی واقع شده باشد.
- ویژگی method مشخص میکند که اطلاعات با چه نوع کدگذاری به سرور ارسال شوند. دو مقدار GET و POST قابل انتخاب هستند. در شیوهی GET اطلاعات به صورت قابل مشاهده در انتهای نام فایل دیده میشوند و در حالت POST این اطلاعات در سرآمد درخواست ارسال میشوند که توسط کاربر به صورت ساده قابل مشاهده نیست.
هنگامی که قصد داریم اطلاعات حساس مانند رمزهای عبور یا اطلاعات حجیم مثل متن اخبار و مقالات را به سرور بفرستیم معمولا از حالت POST استفاده میشود و هنگامی که میخواهیم آدرسهای منحصر به فرد برای کاربر ایجاد کنیم مثلا هنگامی که نتایج جستجوی یک عبارت را نمایش میدهیم، از حالت GET استفاده میکنیم.
۲- اضافه کردن فیلد متنی به فرم
انواع مختلفی از فیلدها شامل فیلدهای متنی، رمز، عدد، checkbox، دکمه و … میتوانند به فرم اضافه شوند. دو فیلد پرکاربرد، فیلدهای متنی و دکمهی ارسال هستند که در کد زیر مشاهده میکنید:
1 2 3 4 |
<form action="server.php" method="POST"> <input type="text" name="fname"> <input type="submit" value="ثبت نام"> </form> |
در قطعه کد بالا ابتدا یک فیلد متنی با نام fname و سپس یک دکمه با عنوان «ثبت نام» قرار دادیم. نکات زیر در هنگام ساخت فرمهای HTML ضروری است.
- اطلاعات هر فیلدی که دارای ویژگی name باشد به سرور ارسال میشود. در نتیجه در فرم نمونه بالا، فقط مقدار fname به سرور ارسال میشود. با اضافه کردن ویژگی name به دکمهی submit، مقدار «ثبت نام» هم به سرور فرستاده میشود.
- اگر میخواهید فیلد متنی دارای مقدار پیشفرض باشد، لازم است تا به ویژگی value آن مقدار دهید: <input type=”text” name=”fname” value=”default”>
- بیشتر فیلدهای قابل استفاده از فرم با تگ input ساخته میشوند. آنچه مشخص میکند که این فیلد از چه نوعی باشد، ویژگی «type» است. فهرست کامل مقادیر قابل قبول برای type را اینجا ببینید.
- ساخت دکمهی ارسال اطلاعات علاوه بر روش بالا با استفاده از روشهای دیگر مثل تگ button و همچنین تعیین type=image نیز امکانپذیر است.
- تگ input تگی بدون نیاز به بسته شدن است و نیازی نیست که به صورت ضمنی یا صریح آن را ببندید.
۳- دریافت اطلاعات فیلد متنی در سمت php
پس از آنکه کاربر فیلد متنی بالا را پر کند و دکمهی «ثبت نام» را کلیک کند، اطلاعات به فایل server.php ارسال میشود. محتویات این فایل میتواند به صورت زیر باشد.
1 2 3 4 5 6 |
<?php if( isset( $_POST[ 'fname' ] ) ) { echo 'Welcome ' . $_POST[ 'fname' ]; } else { echo 'اطلاعات به درستی ارسال نشده است'; } |
در خصوص کد بالا به نکات زیر توجه کنید:
- به دلیل اینکه هنگام ساخت فرم ویژگی method را برابر POST قرار دادیم، اطلاعات ارسالی کاربر به صورت خودکار در متغیر $_POST قرار میگیرد. اگر نوع method را برابر GET قرار میدادیم، اطلاعات کاربر در متغیر $_GET قرار میگرفت.
- پیش از استفاده از مقدار ارسالی کاربر با استفاده از دستور isset بررسی کردیم که آیا چنین متغیری به سرور ارسال شده است یا نه. در صورتی که این بررسی انجام نشود، ممکن است یک خطا در اجرای اسکریپت پیش بیاید.
- رعایت نکات امنیتی دیگری نیز برای چاپ اطلاعات کاربر یا ذخیرهی آن در پایگاه داده لازم است. دو خطای متداول امنیتی XSS یا Cross-Site Scripting و SQL Injection است. در ادامه اصلاحات لازم برای جلوگیری از XSS را در کدها به انجام میرسانیم:
1 2 3 4 5 6 |
<?php if( isset( $_POST[ 'fname' ] ) ) { echo 'Welcome ' . htmlspecialchars( $_POST[ 'fname' ] ); } else { echo 'اطلاعات به درستی ارسال نشده است'; } |
همان طور که مشاهده میکنید با کمک تابع htmlspecialchars، مقادیر غیرمجاز کاربر را به صورت ایمن در صفحه چاپ کردیم. برای روشنتر شدن خطر XSS فرض کنید کاربر در فیلد نام، عبارت زیر را تایپ کند:
1 |
<script>alert( 'you are hacked' );</script> |
بدون استفاده از تابع htmlspecialchars عین این عبارت که یک کد جاوااسکریپت است در صفحه چاپ میشود و فرد مهاجم میتواند به کلیه اطلاعات خصوصی کاربر که در مرورگر ذخیره شده دسترسی پیدا کند. همچنین میتواند از طرف او درخواستهایی ناخواسته به سایت ما ارسال کند و اطلاعات کاربر را سرقت نماید.
با استفاده از تابع htmlspecialchars، کلیه حروف غیرمجاز به صورت HTML Entity تبدیل میشوند و دیگر امکان درج اسکریپت به جای نام کاربر در صفحه وجود نخواهد داشت.
۴- اضافه کردن فیلد متن طولانی و گذرواژه به فرم
فیلد متنی ساده که در قسمت قبل به آن پرداختیم برای متنهای کوتاه کاربرد دارد و برای متنهای طولانی مثل متن مقالات و همچنین ارسال گذرواژه به سرور مناسب نیست. برای این دو منظور از کدهای زیر استفاده میکنیم:
1 2 |
<textarea name="article"></textarea> <input type="password" name="password"> |
- شیوهی دریافت اطلاعات این دو فیلد دقیقا مشابه فیلد متنی ساده است. تنها در سمت html از کدهای متفاوتی استفاده میشود.
- تگ textarea بر خلاف تگ input میبایست به صورت صریح بسته شود و همچنین مقداری که به صورت پیش فرض در این فیلد مشاهده میشود بین تگهای باز و بسته textarea قرار میگیرد: <textarea name=”article”>default text</textarea>
- هنگامی که در فرم از فیلد password استفاده میکنید، دقت کنید که فرم شما حتما در حالت POST ارسال شود. در غیر این صورت رمزهای وارد شده توسط کاربر ممکن است به آسانی مشاهده و سرقت شوند.
برای مثال در حالت GET رمز کاربر به این صورت دیده میشود: server.php?password=123456
۵- اضافه کردن عنصر label به ورودیها
هر فیلد که به کاربر نمایش میدهید باید دارای یک توضیح باشد تا کاربر به راحتی بتوند تشخیص بدهد که این فیلد برای چه منظوری درج شده است. این کار با عنصر label انجام میشود. برای مثال به فرم نظرسنجی زیر دقت کنید:
1 2 3 4 5 6 7 8 9 |
<form action="survey.php" method="POST"> <label for="subject">موضوع نظرسنجی:</label> <input type="text" id="subject" name="subject"> <br> <label for="message">متن نظرسنجی:</label> <textarea id="message" name="message"></textarea> <br> <button type="submit">ارسال نظرسنجی</button> </form> |
نکات لازم برای استفاده صحیح از label
- استفاده از for
همیشه از for در تگ label برای اتصال آن به فیلد ورودی مربوطه استفاده کنید. این مقدار مشابه id فیلدی است که label مربوط به آن فیلد است. اتصال label و فیلد به این شکل در مرورگرها دارای مزیتهایی برای کاربران است و همچنین در موتورهای جستجو هم برای درک بهتر صفحه کاربرد دارد. - متن واضح
متن label باید واضح و گویا باشد تا کاربر به طور دقیق بداند که چه اطلاعاتی باید در فیلد ورودی مربوطه وارد کند.
ادامه دارد…