آموزش مقدماتی لاراول – ساخت یک قالب راستچین با بوت استرپ در Blade

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

Image for post
Image for post

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

چیزی که الان به اون نیاز داریم layout ها هستند با کمک این نوع از فایلها شما میتونید اطلاعاتی که قراره بین viewهای مختلف مشترک باشند رو مدیریت کنید. شما هر چه قدر لازم داشته باشید میتونید layout بسازید اما معمولا یکی یا نهایتا دوتا لازم داشته باشیم.


بیایید شروع کنیم!

اول از همه من برای ادامه کار میخوام از Bootstrap استفاده کنم. Bootstrap یه فریم‌ورک بسیار محبوبه که به کمک کتابخانه‌ها و استایل‌های که تعریف کرده می‌تونید یک سایت رسپانسیو زیبا بسازید. در حال حاضر که این مقاله رو مینویسم نسخه ۵.۱ منتشر شده. از طریق آدرس زیر میتونید به بخش داک این فریم‌ورک برید. اصلا چیزی نیست که لازم به یادگیری داشته باشید فقط کافیه توی قسمت جستجوی داک هر چیزی که لازم دارید سرچ کنید. خود داک حالت‌های مختلف و نمونه کدهای متنوع رو میاره. به همین سادگی

کد زیر یک تمپلیت layout ساده برای زبان‌های rtl هست:

همانطور که در کد بالا هم مشخصه، من برای پروژه این دوره از فونت وزیر استفاده کردم.

خب این layout به تنهایی قابل استفاده نیست. برای اینکه بتونیم از این قالب در صفحات خودمون استفاده کنیم باید از یک کلید واژه به نام yield استفاده کنیم. Yield قسمتی که کدهایی ما میخوان در اونجا قرار بگیرند رو مشخص میکنه. برای این منظور من داخل تگ body یه yield با نام 'content' بصورت زیر تعریف کردم:

<div class="container">
   @yield('content')
</div>

 حالا کافیه به user.blade.php برگردیم و قالبمون رو با دستور extend بصورت زیر در اولین خط تعریف کنیم و در نهایت هم برای  اینکه کدهای این صفحه رو به همون قسمتی که در قالب در نظر گرفتیم وارد کنیم از section استفاده می‌کنیم:

توجه کنید به هر تعداد که لازم داشته باشید می‌تونید قالب رو با yield بخش بندی کنید و بصورت فوق کدهایی هر بخش رو بصورت مجزا تعریف کنید. 

در ادامه صفحات دیگه رو با همین قالب بروز رسانی کردم (کدهایی مورد نظر در github این دوره موجوده).

خب حالا برگردیم به لیست صفحات که در ابتدا می‌خواستیم به هر صفحه اضافه کنیم. حالا برای اینکار تنها کافیه که به layout خودمون برگردیم و لیست رو اونجا وارد کنیم. بهمین راحتی در تمام صفحات ابن لیست وارد میشه بدون اینکه مجبور باشیم در هر view لیست رو وارد کنیم:

برای لیست هم داخل Bootstrap کلمه nav رو سرچ کردم و از کد لیست آماده اونجا استفاده کردم! به همین راحتی 

 


در این مقاله ما با نحوه تعریف قالب ها در لاراول آشنا شدیم و یک layout ساده برای پروژمون ایجاد کردیم و داخل این قالب راستچین از ‌Bootstrap و فونت زیبای وزیر استفاده کردیم. در ادامه و در مطلب بعدی در مورد دیتابیس Sqlite و نحوه کانفیگ اون در لاراول آموزش رو ارائه میدم.