Skip to main content

الدرس الثالث: أنشاء قالب بسيط للواجهات Creating Template View

الجزء ال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

Popular posts from this blog

PART #2: Registration and Login System Tutorial Using PHP and MYSQL

PART #2: Registration and Login System Tutorial Using PHP and MYSQL Registration and login system using PHP and MySQL database, in this part you will do the following: 1- Creating the registration page. 2- Validating the registration form. 3- Sending the activation link on successful registration. note: you can find the mailserver tool here: [MailServerTool] Good luck. PHP,Mysql,Programming,web development,How to,Technology,web programming,web project ideas,safaa al-hayali,saf3al2a,Registration and login,Registration and login in php,php and mysql login system,registration system using php and mysql,login and register php,login and register php with database,database,php tutorial,learn php,tutorial

How To Play .srt Subtitles File in Windows Media Player

How To Play .srt Subtitles File in Windows Media Player links: https://sourceforge.net/projects/wmpsub/ wmp,.srt Subtitles File in Windows Media Player,How To Play .srt Subtitles File in Windows Media Player,How To,Safaa Al-Hayali,saf3al2a,srt subtitle in WMP,Windows,Windows Media Player,media,.ass,local subtitles

Virtual Box : How to Increase Disk Size - Windows

How to increase disk size or disk storage in oracle virtual box the command you have to use: vboxmanage.exe modifymedium "[YourPathToVdiFileOfYourVirtualMachine]" --resize [NUMBER] virtual,box,vbox,oracle,partition,size,disk,increase,resize,windows,10,microsoft,vdi,vboxmanage,configuration,Safaa AL-Hayali,saf3al2a,Oracle,VirtualBox,How to,windows 10