الجزء
ال3: أنشاء قالب بسيط Creating simple template
في الحلقة الثانية من دورة Laravel 5 تعلمنا ماهو الroutes والControllers والViews واخذنا
تطبيق عملي بكتابة صفحة تتحدث عني, في هذا الجزء سأقوم بأنشاء هيكلية معينة او
قالب تسميتها قد تختلف (Layout,default,master) ولكن عملها واحد وهو كيف ننشأ ملف
يكون هو القالب لكل الملفات الأخرى :
الLayout , default, master : عبارة عن ملف view عادي ضمن مجلد الViews الذي مساره :{App_Name}\resources\views
ماالغرض من انشأه؟ لتفادي تكرار
كود الHTML والCSS والJS لكل صفحة
,فمثلاً الHeader والFooter يكونان
ثابتان لكل صفحات الموقع أذن, فيجب وضعهما في هذا الملف , وفي كل مرة ننشأ فيها
صفحة موقع او view معين نقوم بأستدعاء ذلك الملف عن طريق كتابة
@extends(‘{layout_name}’)
السؤال الثاني: كيف لنا ان نعرف في
الصفحة التي ستستخدم الlayout view اين يتم وضع محتواها في الlayout view؟
الجواب: عن طريق تحديد
مكان لوضع المحتوى في الlayout view بكتابة الكود التالي:
@yield(‘{content}’)
ويسمى هذا بالPlaceholder
وفي الصفحة التي ستستخدم ذلك
الملف(layout view ) سنحدد محتواها في داخل قسم معين تسميته يجب ان تكون نفس تسمية الPlaceholder في الlayout view , عن طريق
كتابة الكود التالي:
@section(‘{content}’)
{Any html or data here}
وفي نهاية كل@section يجب كتابة الكود ادناه لغرض الفصل:
@stop
بعد اخذ نظرة عامة حول الLayout view file لنطبق ذلك بمثال عملي بسيط:
اول شيء نقوم بأنشاء ملف layout view : لاحظ هنا
بما انه ملف view يجب ان تكون تسميته ملحقة بكلمة blade كالأتي: layout.blade.php
ثاني شيء الملف سيحتوي على الHeader والFooter ومكان مخصص
للمحتوى(Placeholder) من
صفحة اخرى
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>layout page</title>
<link rel="stylesheet"
href="css/style.css" type="text/css"/>
</head>
<body>
<header>
<img
src="{{asset('imgs/laravel-logo.png')}}" alt="LaravelLogo"
id="Laravel-logo" />
</header>
<div id="content">
@yield('content')
</div>
<footer>First App in Laravel -
2015</footer>
</body>
</html>
ثالث شيء الملف الذي سيستخدم الlayout view هو ملف view , لنفرض ان
الview هي الContact Us:
لاحظ السهولة في هذه الview فقط قمنا
بالأشارة الى الlayout وبعدها قمنا بأدراج المعلومات في الcontent والناتج
كالأتي:
Comments
Post a Comment