طراحی سایت با لاراول – اعتبار سنجی فرم

طراحی سایت با لاراول – اعتبار سنجی فرم

در قسمت قبل دیدم که چطور با استفاده از موتور قالب بندی Blade صفحه اصلی (Home) را طراحی کنیم. در این قسمت هم قرار است بقیه صفحات یعنی About و Contact را طراحی کنیم، پس بدون هیچ مقدمه ای کار را شروع می کنیم.

 

ساخت الگو Blade برای صفحه About

 

حال زمان تمرین است، سعی کنید خودتان صفحه about.blade.php را ایجاد کنید! بسیار هم راحت است:

 

 

از آنجایی که ما قبلا layout.blade.php را ساخته ایم، تنها کافیست که از @extends برای نمایش استفاده کنیم و مقداری محتوا تزریق کنیم. توجه داشته باشید که بعد از انجام این مرحله فایل routes.php را ویرایش کنید:

 

 

تا اینجا ما فقط صفحه about را با استفاده از موتور Blade در کمتر از یک دقیقه ایجاد کردیم:

 

طراحی سایت موتور قالب بندی blade

 

ایجاد controller برای فرم تماس

 

ابتدا با استفاده از وارد کردن دستور زیر در خط فرمان یک controller ایجاد کنید. این controller مسئول نشان دادن فرم، اعتبارسنجی ورودی ها (validating)، ارسال ایمیل ما است. البته در قسمت بعد با ارسال ایمیل آشنا می شویم!

 

 

این دستور باعث می شود در آدرس /app/controllers یک فایل جدید با نام ContactController.php ساخته شود. البته که می توانید بجای دستور فوق بطور دستی خودتان فایل را ایجاد کنید!

 

حال فایل جدید را بصورت زیر ویرایش کنید:

 

 

 

ساخت الگو Blade برای صفحه Contact

 

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

 

در اینجا می خواهیم یک فرم تماس با ما برای وب سایت خود طراحی کنیم تا کاربران از طریق ایمیل با ما در ارتباط باشند. لاراول فوق العادست! میانبرهای متعددی برای ساخت فرم ها ارائه می دهد. ما می توانیم برچسب ها، دکمه ها، ورودی های متن و تمام آنچه را که برای ساخت فرم نیاز داریم را در اختیار داشته باشیم. ما هنوز هم می توانیم از HTML ساده برای ساخت فرم خود استفاده کنیم، اما راه ساده و آسان و تمیز این است که از روش Laravel استفاده کنیم. اجازه دهید یک قالب با نام contact.blade.php ایجاد کنیم، آنگاه مقداری کد درون آن قرار دهیم تا فرم ما را شکل دهد:

 

 

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

 

اجازه دهید کدهای فوق را به بخش های کوچکتر تقسیم کنم تا عملکرد آنها را متوجه شوید. شاید فرم ما کمی پیچیده باشد اما همانطور که مشاهده می کنید ما از کلاس های Bootstrap برای ظاهر فرم خود استفاده کرده ایم، مثل کلاس های col-md-* یا row یا container.

 

تنها با چند خط می توانیم فرم خود را ایجاد کنیم. برای ایجاد تگ باز form، ما از متد Form::open() استفاده می کنیم. این متد تنها یک آرایه را به عنوان پارامتر قبول می کند:

 

 

در مثال فوق ما از کلید URL استفاده کرده ایم، جایی که می توانیم مسیری را که می خواهیم به آن لینک شویم را مشخص کنیم. این دستور باعث می شود که کد زیر را به عنوان HTML جنریت کند:

 

 

همانطور که مشاهده می کنید فرم ما آدرس /contact را هدف گرفته است و بطور پیشفرض از درخواست POST استفاده می کند. از آنجایی که این آموزش لاراول در قالب پروژه است، ما از Bootstrap استفاده می کنیم تا سایت ما ظاهر جذابی داشته باشد. پارامتر دوم آریه باعث می شود که فرم ما از کلاس آماده bootstrap استفاده کند.

 

تا اینجا تگ form را باز کرده ایم! حال باید در آخر آن تگ را ببندیم. برای این کار از Form::close() استفاده می کنیم. همانطور که می دانید از </form> نیز برای انجام این کار می شود استفاده کرد.

 

حال به برچسب هایی نیاز داریم تا کاربران بدانند چه مقداری را دارند وارد می کنند. Label ها می توانند با استفاده از متد Form::label() ساخته شوند:

 

 

همانطور که واضح است، برای ساخت فیلدهای ورودی (Text) از متد زیر استفاده می شود:

 

 

اولین پارامتر برای Form::text() نام ویژگی برای این عنصر را مشخص می کند، مثال زیر را مشاهده کنید تا به خوبی درک کنید:

 

 

دومین پارامتر اختیاری است، اگر می خواهید فیلد شما بطور پیشفرض مقداری داشته باشد از این پارامتر می توانید استفاده کنید. که در این مثال مقدار با Enter your name مقدار دهی شده است.

 

ساخت فیلد textarea بسیار شبیه به تابع ساخت فیلد text می باشد. اولین پارامتر برای نام attribute عنصر است و دومین پارامتر مقدار پیشفرض برای ورودی را مشخص می کند.

 

 

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

 

به عنوان مثال برای ایجاد فیلد ورودی text بصورت زیر استفاده کرده ایم:

 

 

خوب همانطور که مشخص است به لطف HTML5 می توانیم از برخی از ویژگی های آن استفاده کنیم. در اینجا آرایه ای را برای پارامتر سوم در نظر گرفته ایم که، اولین پارامتر آن برای اضافه کردن کلاس آماده form-control استفاده می شود و پارامتر دوم باعث می شود از ویژگی placeholder برای نمایش مقدار پیشفرض ورودی استفاده شود، خوب حالا این چه فرقی با روش قبلی که در مثل های قبل استفاده کردیم دارد؟ placeholder باعث می شود یک مقدار در ورودی قرار گیرد که وقتی کاربر آماده است مقدار خودش را در آن وارد کند، مقدار قبلی که ما مشخص کرده بودیم از بین می رود!

 

خوب حالا به یک دکمه submit برای ارسال مقادیر فرم نیاز داریم که با استفاده از متد زیر این دکمه جنریت می شود:

 

 

حال چیزی که باقی می ماند این است که، هر چند ما یک متد را در کنترولر ContactController تعریف کرده ایم و نمای فرم ما را نشان می دهد، اما هنوز مسیری به کنترولر را مشخص نکرده ایم. برای این کار به app/routes.php رفته و مسیر زیر را به آن اضافه کنید:

 

 

اولین پارامتر اشاره به آدرس http://localhost:8000/contact است. دومین پارامتر به route می گوید که از متد showForm از کنترولر ContactController استفاده کند.

 

بنابراین حالا ما Controller و View را برای route تنظیم کرده ایم. خوب حالا چطور آن را مشاهده کنیم?!

 

احتمالا اگر حالا بخواهید برای مشاهده فرم تماس خود به آدرس localhost:8000/contact مراجعه کنید با خطای زیر روبرو می شوید که می گوید کلاس Form پیدا نشده است:

 

طراحی سایت blade

 

خوب در اینجا باید بگویم که کلاس Form در نسخه Laravel 5 حذف شده است و شما باید بطور دستی این کلاس را به پروژه خود اضافه کنید، برای اینکار فایل composer.json در ریشه پروژه خود را باز کرده و “laravelcollective/html”: “~5.0” را بصورت زیر به آن اضافه کنید:

 

 

حال برگردید به خط فرمان و به سادگی با دستور composer update این کلاس را به پروژه اضافه می کنیم.

 

صبر کنید هنوز تموم نشده، به آدرس config/app.php مراجعه کنید و 'Collective\Html\HtmlServiceProvider' را بصورت زیر به providers اضافه کنید:

 

طراحی وب سایت با laravel

 

بعد از این کار در همین فایل config/app.php به چند خط پایین تر اسکرول کنید تا به aliases برسید، حال خط های زیر را به انتهای آن اضافه کنید:

 

 

خوب، بالاخره می توانید به آدرس http://localhost:8000/contact مراجعه کنید تا زحمت خود را مشاهده کنید. 🙂

 

طراحی فرم تماس با ما با لاراول

 

فقط توجه داشته باشید که هنوز دکمه Send کار نمی کند! بله ظاهر جذابی فعلا ندارد، اما همانطور که گفتم در ادامه فریم ورک Bootstrap را به پروژه اضافه می کنیم تا UI ما شیک و تمیز شود. 😉

 

گرفتن ورودی از فرم

 

از آنجایی که فرم ما از متد POST استفاده می کند، اگر form را submit کنیم یک درخواست POST به سرور با داده های وارد شده در فیلدهای فرم صورت می گیرد. اما هنوز هیچ مسیری را مشخص نکرده ایم تا درخواست POST را هندل کند.

 

در app/routes.php دستور زیر را اضافه کنید:

 

 

این دستور باعث می شود متدی را که قبلا در controller ساخته ایم را فراخوانی کند، هرگاه درخواست POST در آدرس http://localhost:8000/contact صورت گیرد متد handleFormPost فراخوانی می شود.

 

توجه داشته باشید که تا الان باید فایل routes.php شما بصورت زیر باشد:

 

 

بازیابی داده های ورودی کاربر و اعتبارسنجی آن

 

در app/controllers/Contactcontroller.php ما می خواهیم متد handleFormPost() تنها داده های پست شده name، email و msg بازیابی کند تا هکرها نتوانند برنامه های بد را ارسال کنند.  😈 شما که دوست ندارید هکر شوید؟ هان؟ 🙂

 

خوب حالا متد را بصورت زیر ویرایش کنید:

 

 

متد Input::onli($params) این تضمین را می کند که تنها پارامترهایی که مشخص کرده ایم را در قالب آرایه به ما برگرداند. برای تمرین می توانید خودتان تعدادی داده را پر کنید و ارسال کنید.

 

اعتبار سنجی داده ها و نمایش خطاها

 

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

 

ابتدا بخش هایی از فایل contact.blade.php را بصورت زیر ویرایش کنید:

 

 

حال از ContactController.php متد handleFormPost را ویرایش کنید:

 

 

کد فوق اساسا یک اعتبار سنج ساده را ایجاد می کند و ورودی ها را مشخص می کند و همچنین با تعریف قوانین خود ورودی ها اعنبار بررسی می کنیم. برای اطلاعات بیشتر validation مطالعه کنید.

 

در مرحله بعدی ما متد fails() از شی validator را فراخوانی کرده ایم، این متد بطور خودکار اجرا می شود و تمام ورودی ها را طبق قوانین مشخص شده بررسی می کند و در صورت معتبر یا نامعتبر بودن ورودی ها، یک مقدار boolean بر می گرداند. اگر ورودی ها نامعتبر بود کاربر را همراه با پیغام های رخ داده به آدرس فرم تماس (contact) منتقل می کند. اساسا این خطاها یک session هستند و بعد از هر درخواست جدید از بین می روند.

 

در حال حاضر ما باید به نحوی جایی را برای نمایش این پیام های خطاها به کاربر در contactform.blade.php مشخص کنیم. در اینجا از سینتکس Blade استفاده می کنیم.

 

این چیزی است که باید انجام دهیم:

 

 

اضافه کردن فریم ورک Bootstrap به پروژه

 

همانطور که قول داده بودم می خواهیم از بوت استراپ برای UI استفاده کنیم تا ظاهر وب سایت آراسته باشد. ما قبلا از کلاس های بوت استراپ برای فرم تماس خود استفاده کرده ایم، حال می خواهیم این فرم ورک را اضافه کنیم. توجه داشته باشید که در این آموزش ما فعلا از CDN برای اضافه کردن CSS و JavaScript بوت استراپ استفاده می کنیم تا پس طولانی نشود! اما بعدها از یک روش بهتر این کار را انجام خواهیم داد.

 

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

 

 

همانطور که مشاهده می کنید درک کاری را که در بالا انجام داده ایم بسیار آسان است. ما برای تغییر فون از گوگل فونت استفاده کرده ایم و فایل سی اس اس بوت استراپ را از CDN بارگذاری کرده ایم. در تگ بادی از نوار منو بوت استراپ استفاده کرده ایم که می توانید از سایت Bootstrap نمونه های دلخواه خود را پیدا و با کدهای فوق جایگزین کنید. در آخر نیز jquery و javascript را به پروژه اضافه کرده ایم.

 

قبل از اینکه ظاهر سایت خود را مشاهده کنیم باید چند خط اول فایل ContactController.php را بصورت زیر ویرایش کنید:

 

 

در کد فوق کلاس های Validator، Input، Redirect و Mail را به پروژه include کرده ایم.

 

حال پروژه خود را از نو مشاهد کنید:

 

طراحی فرم تماس با laravel و bootstrap

 

همانطور که می بینید ظاهر سایت ما به لطف Bootstrap خیلی جذاب شد. 😉 برای آزمایش می توانید فرم را با فیلد های خالی ارسال کنید تا از عملکر فرم تماس خود اطمینان حاصل کنید. در زیر فرض شده است که کاربر بدون پر کردن فیلد ها ضروری اقدام به ارسال فرم کرده است:

 

اعتبار سنجی فرم در لاراول

 

البته کار ما در اینجا با فرم تماس به پایان نمی رسد، در بخش بعدی می خواهیم با این فرم ایمیل ارسال کنیم. 🙂

 

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


 

  • علی اصغر کریمی

    آقا خیلی آموزشِ عالی بود

  • سمانه

    من همه مراحلو انجام دادم اما وقتی composer رو update کردم دیگه نتونستم اجرا بگیرم و این خطلا رو میداد
    که فایل bootstrap/cache/services.json وجود نداره
    ممنون میشم اگه راهنماییم کنید

    • پاتریک

      پوشه vendor کامل پاک کنید و دوباره composer install را اجرا کنید. پیشنهاد می کنم خطا را تو گوگل سرچ کنید تا راه حل پیدا کنید.