
در قسمت قبل با برخی از متدهای کمکی لاراول در blade آشنا شدیم و حالا نوبت به نوشتن HTML و ظاهر اینستاگرام است. اگر یادتان باشد در جلسه قبل تصویر لوگوی روکسو را در فایل app.blade.php قرار دادیم:

همانطور که می بینید این شکل دو اشکال دارد: اولا لوگو بیش از حد بزرگ است و دوما لوگو و نوشته ما روی هم قرار گرفته اند. مشکل اول را با یک تگ استایل و height ساده حل می کنم:
مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکانپذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.
من علاوه بر اضافه کردن border-right از vertical-align هم استفاده کرده ام تا لوگوی روکسو با نوشته RoxoGram در یک سطح قرار بگیرند:

این می شود header برنامه ما. حالا به فایل home.blade.php در پوشه views می رویم کدهای درون section را حذف می کنیم تا محتویات آن به شکل زیر در بیاید:
@extends('layouts.app') @section('content') <div class="container"> </div> @endsection
همانطور که می بینید در این قسمت extends@ و section@ را داریم که از ویژگی های blade هستند بنابراین باید آن ها را برایتان توضیح بدهم. بیایید دوباره به فایل app.blade.php برگردیم. اگر دقت کنید در انتهای این فایل قسمتی به شکل زیر را پیدا می کنید:
<main class="py-4"> @yield('content') </main>
فایل app.blade.php یک layout است یعنی یک قالب کلی است که ساختار کلی صفحات سایت ما را دارد تا مجبور نشویم قسمت های تکراری را چندین بار در فایل های HTML مختلف بنویسیم. به این فایل یک view پدر می گوییم. حالا در کد بالا دستور yield@ را داریم که کارش دریافت یک قسمت تعریف شده است. در اینجا yield@ ما به دنبال قسمتی به نام content است تا آن را در اینجا نمایش بدهد. به نظر شما این قسمت کجاست؟ به فایل home.blade.php بروید و دوباره به کد زیر نگاه کنید:
@extends('layouts.app') @section('content') <div class="container"> </div> @endsection
در این فایل اول از همه دستور extends@ را داریم که مشخص می کند این view فرزند باید از چه view پدری ارث بری داشته باشد. یعنی ساختار کلی این view چطور است؟ ما گفته ایم layouts.app که یعنی در پوشه layouts به دنبال فایل app.blade.php بگرد و از آن به عنوان قالب کلی استفاده کن (در blade با نقطه آدرس دهی می کنیم، شروع آدرس دهی از پوشه views است و پسوند blade.php را نیز نمی آوریم). تا این مرحله فایل های app.blade.php و home.blade.php را به هم متصل کرده ایم و رابطه بین آن ها را تعریف کرده ایم:
- فایل blade.php فایل پدر است و ساختار کلی را مشخص می کند.
- فایل blade.php فایل فرزند است و ساختار کلی پدر را به ارث می برد. هر جایی که extends@ دیدیم، آن فایل یک فایل فرزند یا view فرزند است.
حالا که دو فایل به هم متصل شده اند دستور section@ را داریم که مسئول تعریف یک section (به معنی «قسمت») می باشد. آرگومان پاس داده شده به این دستور یک نام دلخواه است که اینجا content در نظر گرفته شده است اما شما می توانید آن را تغییر دهید. تمام محتویاتی که بین section@ و endsection@ می نویسید در قالب یک «قسمت» با نام پاس داده شده تعریف می شوند. حالا باید در جایی تزریق شوند. کجا؟ قسمت yield@ در فایل پدر، یعنی app.blade.php! با این کار جلوی نوشتن کدهای تکراری (مثل header که در تمام صفحات تکراری است) را گرفته ایم. یادتان باشد که نام تعیین شده برای section@ در اینجا باید با نام داده شده به yield@ یکی باشد تا بتواند آن را پیدا کند.
پاسخ: رفتار پیش فرض لاراول این است که قسمت yield@ را کاملا حذف کرده و قسمت section@ را از فرزند گرفته و درون yield@ می گذارد (عملیات override) اما اگر از دستور parent@ استفاده کنید، به جای override از عملیات append (پیوست) استفاده خواهد شد و به کدهای درون yield@ دست نمی خورد. بگذارید برایتان مثالی بزنیم.
تصور کنید که در فایل پدر (مثلا app.blade.php) چنین کدی را داشته باشیم:
مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکانپذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.
اول با استفاده از extends@ گفته ایم که فایل پدر کجاست تا رابطه برقرار شود. سپس section ای به نام title تعریف کرده ایم (در فایل پدر به دنبال این title بودیم) و مقدار آن را یک رشته ساده برابر Page Title گذاشته ایم. بنابراین page title از اینجا در فایل پدر تزریق می شود و تگ زیر را می سازد:
<title>App Name - Page Title</title>
سپس section دیگری به نام sidebar را تعریف کرده ام که parent@ را در آن صدا می زنیم. با این کار به لاراول گفته ایم که محتوای موجود در فایل پدر را حذف نکند. در sidebar در فایل پدر یک رشته بدین شکل داشتیم:
This is the master sidebar.
با صدا زدن parent@ دیگر این رشته حذف نمی شود. در نهایت هم content را به عنوان یک section دیگر تعریف کرده ایم.
امیدوارم درک بهتری نسبت به blade پیدا کرده باشید.
- ساخت اینستاگرام در لاراول | مقدمه + نصب PHP و Composer روی سیستم
- ساخت اینستاگرام در لاراول | نصب لاراول و آشنایی با php artisan
- آشنایی با مدل MVC و سیستم احراز هویت
- آشنایی با npm و کامپایل شدن کدهای Frontend
- راهاندازی یک پایگاه دادهی MySQL و اتصال آن به لاراول
- آشنایی با مفهوم Migrations و نحوهی کار با آن
- آشنایی با متدهای config و env و asset
- آشنایی با extends@ و yield@ در blade
- کپی کردن صفحهی پروفایل اینستاگرام (1) – آشنایی با Laravel mix
- کپی کردن صفحهی پروفایل اینستاگرام (2)
- آشنایی با ساختار فرمها و جلوگیری از حملات CSRF
- تکمیل و تصحیح اعتبارسنجی در فرم ثبتنام
- آشنایی با فایلهای Migration و ساختار جدولها
- آشنایی با مفهوم Mass Assignment در Model
- استفاده از Auth::user و تغییر قالب view
- آشنایی با routing به صورت ابتدایی
- آشنایی با قرارداد مهم RESTful Resource Controller
- آشنایی با URLهای متغیر و دریافت کاربر از MySQL
- تزریق نهایی دادهها به View و حل مشکلات آن
- تعریف Foreign Key در Migrationهای لاراول
- تعریف رابطهی جدولها در Modelها
- نمایش دادههای واقعی در View از پایگاه داده
- روابط یک به چند – پستها و پروفایل کاربری
- ساخت فرم پستگذاری و مرتبکردن پروژه