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

مواضيعنا

النماذج و Bootstrap في Laravel

حجم الخط


النماذج formsالنماذج Forms في Laravel

من المعروف ان  النماذج ( FORMS)  هي عبارة عن صفحة تظهر على المتصفح , و تقبل إدخال بيانات بها من قبل المستخدم  . و منها استمارة التسجيل فى المواقع و نماذج إدخال البيانات لقاعدة البيانات ,,,  و غيرها  . في Laravel نستخدم الblade  لتسهيل كتابة النماذج Form    .

راجع التماذج فى HTML

سوف نستخدم   UserController و الذي قمنا بإنشاءه من قبل باستخدام ال Comopser

راجع الكونترولر

من ملف routes.php  نقوم بإنشاء Route  جديد . هكذا

;('Route::resource('user','UserController

 راجع الراوت

راجع العرض View

المسار هو user  و الضابط هو  UserController  و استخدمنا  Route::resource  لكي نتعامل مع كل الدوال فى الضابط
  و في ملف user.blade.php    ... نكتب

Form بداية النموذج//
{{ ()Form::open }}
 حديد اسم الحقل//
  {{ ('Form::label ('your name  }}
  تحديد نوع الحقل//
{{ (' ',' Form::text ('name }}

{{ (' Form::label ('pass word }}

{{ ('Form::password ('pass }}
  <br >   <br >
عادي جدا  HTML استخدمنا وسوم//
{{ ('Form::label ( 'E-Mail Address }}
{{ ( ' ','Form::text ('email }}
  اسم لحقل تذكرني//
{{ ('Form::label('remember me }}

{{ (Form::checkbox(' ','0', true }}
   radioاسم لحقل    //
{{ (' Form::label('gender }}
  {{ (Form::radio(' ', '0', false }}
    <br >  <br >
  اسم لحقل به قائمة اختيار منسدلة//

{{ ('Form::label('your color }}

{{ ('Form::select('size', array('L' => 'Red', 'S' => 'Blue','B' => 'Bla }}
// اسم لحقل الارسال
  {{ ('Form::submit ('Send }}
// Form نهاية النموذج
{{  ()Form::close }}

   راجع أنواع المدخلات فى HTML5
راجع التماذج فى Bootstrap

فى ملف  UserController  نكتب الكود فى دالة index

;('return View::make('pages.user

نكتب المسار    /public/user/,,,, و نرى الناتج .



و اذا اردنا الاطلاع على الكود المُنفذ من خلال inspector
 


ملحوظة :

فى ملف UserController  يمكن كتابة  الكود فى دالة create  بدلاً من index

 ;('return View::make('pages.user

و لكن علينا أن نكتب المسار /public/ user/ create   و نرى الناتج .



Bootstrap  في Laravel

يمكننا استخدام Bootstrap مع  و Laravel كالأتي :  تحميل نسخة بوتستراب من موقع الشركة , و بعد فك الضغط سنجد  3 مجلدات نقوم بنسخهم فى مجلد public   و باقي الخطوات موجود في مقدمة و تعاريف Bootstrap

كما يمكننا استدعاء المكتبات هكذا

{{ ('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 }}  

النماذج و الأزرار في Bootstrap
كل شئ عن Bootstrap

و هذا موقع مجاني  يساعدك على التعامل مع البوتسراب بطريقة السحب و الافلات , بحيث تصمم صفحتك في دقائق  layoutit


النماذج Form و البوتستراب Bootstrap 

و من الجدير بالذكر كيفية ربط النماذج مع البوتستراب  .... يمكننا استخدام فئات class البوتستراب مع النماذج . الكود يوضح الامر


//استدعاء المكتبات البوتستراب
//  كلاس لعمل عمودين بالصفحة
<div class="col-sm-6">
{{ 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() }}

</div>

نلاحظ أن

عند استدعاء الـ class من خارج محرر Blade كتب الكلاس عادي  div class="col-sm-6 , بينما  عند استدعاء الـ class من داخل المحرر {{ }}  كتبنا الكلاس على شكل مصفوفة (' array ('class'=>'btn btn-success


شاهد النفيذ



الموضوع  :  *النماذج Forms و Bootstrap  في Laravel* المرجع : استثمر للحياة  investolife 

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