استثمر للحياة

مواضيعنا

تنسيق الصفحة مع blade

حجم الخط

تنسيق الصفحة مع  blade

يقدم laravel طريقة جيدة في تنسيق الصفحة باستخدام محرر blade  مع bootstrap

تتميز هذه الطريقة بفصل صفحة العرض عن صفحة المحتوي .... بداية نقوم بعمل ملف العرض ليكن باسم   index.blade.php  هكذا :

<!DOCTYPE html>
<html>
  <head>
     <title>*الرئيسية* </title>
   <body>
      @yield('main')
   </body>
</html>

ماذا فعلنا الأن   كتبنا ملف  HTML  لا يحتوى الا على العبارة 

@yield('main')

و  yield هنا تعني "مكان ما"  لعرض "محتوى ما"  يسمى main  مثلاً ... إلا إن هذا المحتوى موجود في ملف المحتوى .


و الان نقوم بعمل ملف المحتوى ليكن باسم   home.blade.php  و هو ملف محتوى الصفحة الرئيسية مثلا هكذا :

@extends('index')
//index استدعاء ملف العرض
@section('main')
// main نكتب هنا المحتوى
// yield الذي يظهر مع  
<h3> استثمر للحياة </h3>
@endsection
//لابد من تحديد نهاية الصفحة
@stop

جرب هذا الكود ثم قم بعمل راوت لمسار ملف    home  سيظهر لك جملة

 

استثمر للحياة


و لكن لماذا كل هذا العمل من أجل كتابة عبارة استثمر للحياة . الامر اكبر من كتابة عبارة محددة , الامر سيقوم بتنسيق صفحة كاملة . ثم أنه أكثر أمناً , فعند كتابة المسار   لن يعرض الملف   بل سيعرض الملف   , و هذا يسبب حيرة لكل من يحاول إختراق الموقع .

راجع خطط موقعك

هب أننا نريد صفحة رئيسية مثل الصورة لها هيدر بعرض الشاشة و فوتر منقسم 4 أعمدة و شريط جانبي و أيضاً محتوى


 

سنكتب فى ملف index ما يلي

<!DOCTYPE html>
<html>
  <head>
// عنوان الصفحة
     <title>*الرئيسية* </title>
// استدعاء مكتبات البوتستراب و الجي كويري و الجافاسكريبت
    {{ HTML::script('js/jquery-1.11.2.min.js') }} 
    {{ HTML::style('css/bootstrap.min.css') }}
    {{ HTML::style('css/bootstrap-rtl.css') }}
    {{ HTML::script('js/bootstrap.min.js') }}  
  </head>
  <body>
 //نستحدم فئات البوتستراب للنسيق
    <div class="container-fluid">
    <div class="row" >
// تنسيق الهيدر بعرض الصفحة
        <div class="col-xs-12"><center>@yield('header')</center></div>
//تنسيق الشريط الجانبي و محتوى الصفحة معاً
        <div class="col-xs-3">@yield('said')</div>
        <div class="col-xs-9">@yield('main')</div>
//تقسيم محتوى الصفحة إلى 3 أعمدة
        <div class="col-xs-3"><center>@yield('main1')</center></div>
        <div class="col-xs-3"><center>@yield('main2')</center></div>
        <div class="col-xs-3"><center>@yield('main3')</center></div>
         
    <div class="row" >        
//تنسيق الفوتر بعرض الصفحة كاملة
        <div class="col-xs-12"><center>@yield('footer')</center></div>
//تقسيم الفوتر إلى 4 أعمدة
        <div class="col-xs-3"  ><center>@yield('footer1')</center></div>
        <div class="col-xs-3"  ><center>@yield('footer2')</center></div>
        <div class="col-xs-3"  ><center>@yield('footer3')</center></div>
        <div class="col-xs-3"  ><center>@yield('footer4')</center></div>
         </div> 
     </div> 
     </div> 
    </body>
</html>

كان هذا هو ملف العرض
أما ملف المحتوى Home سيكون

// index استدعاء ملف العرض   
@extends('index')

//محتوى الهيدر
@section('header')
<h2> الهيدر الرئيسي للموقع .... يظهر بعرض الشاشة كلها مهما كانت صغيرة</h2>
<h4>تستطيع وضع اسم الموقع و اللوجو </h4>
@endsection

//محتوى الصفحة
@section('main')
 القائمة الرئيسية
       <ul class="list-inline">
        <li>سوق المال</li>
        <li>سوق العقار</li>
        <li>مشروعات صغيرة</li>
      </ul>
@endsection

//محتوى أقسام الصفحة
@section('main1')
<p>ضع محتوى هنا</p>
@endsection

@section('main2')
<p>و آخر هنـــا</p>
@endsection

@section('main3')
<p>و ثالث هنا</p>
@endsection

//محتوى الشريط الجانبي
@section('said')
تسجيل الدخول
{{ Form::open() }}
<br>
  {{ Form::label('إدخل اسمك') }}
  {{ Form::text('name','',array ('class'=>'form-control'))  }}
  <br >
  {{ Form::label('كلمة المرور') }}
  {{ Form::password('pass',array ('class'=>'form-control')) }}
  <br >
   {{ Form::submit ('إرسال' ,array ('class'=>'btn btn-success'))  }}
{{ Form::close() }}
@endsection

//الفوتر
@section('footer')
<h2>هذا الفوتر مقسم لاربع اقسام</h2>
@endsection
//أقسام الفوتر
@section('footer1')
<h4>قسم 1</h4>
@endsection
@section('footer2')
<h4>قسم 2</h4>
@endsection
@section('footer3')
<h4>قسم 3</h4>
@endsection
@section('footer4')
قسم 4</h4>
@endsection
@stop

 


 

الموضوع  :  *تنسيق الصفحة مع  blade* المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468