برنامه نویسی با محبوب ترین فریم ورک پی اچ پی #6

درجلسه قبلی درخصوص نحوه ایجاد یک blade template و همچنین نحوه نمایش اطلاعات در blade ها پرداختیم. سراغ ساختارهای کنترلی از جمله if,else و حلقه ها رفتیم و در پایان قول دادیم که با معرفی یک پکیج برای استفاده از تگ های html در blade ها بپردازیم . با ما همراه باشید.

فروشگاه ساز
فروشگاه اینترنتی و وب سایت خود را به سرعت با سایت ساز سی می پلاس بسازید

سایت ترجمه رایت می
سفارش آنلاین ترجمه مقالات و متون تخصصی با خیال راحت

ترجمه زبان
ترجمه زبان انگلیسی , ترجمه زبان آلمانی,ترجمه زبان روسی,ترجمه فیلم,مترجم شفاهی

خودتان را اینجا معرفی کنید

معرفی laravel collective

Laravel collective سازمانی است که به منظور سازمان دهی، نگهداری و توسعه اجزا و کامپوننت هایی که از هسته لاراول حذف شده اند، تلاش می کند. آنها عاشق لاراول بوده و در توسعه و ترویج لاراول تلاش زیادی می کنند.
یکی از کامپوننت های حذف شده از هسته لاراول، استفاده از syntax منحصر بفرد تگ های html در blade ها بوده که در این آموزش به این موارد می پردازیم.

نصب laravel collective

برای نصب laravel collective کافیست در فایل compose.json در قسمت require نام پکیج مورد نظر رو اضافه کرده و با استفاده از ترمینال خود به پوشه پروژه رفته و دستور composer update رو اجراء کنیم.

"require": {
    "laravelcollective/html": "5.1.*"
}

سپس در دایرکتوری config فایل app.php رو بازکرده و در آرایه های providers و aliases کدهای زیر رو اضافه می کنیم.

  'providers' => [
    // ...
    CollectiveHtmlHtmlServiceProvider::class,
    // ...
  ],
  'aliases' => [
    // ...
      'Form' => CollectiveHtmlFormFacade::class,
      'Html' => CollectiveHtmlHtmlFacade::class,
    // ...
  ],

حالا می تونیم به راحتی از امکانات laravel collectiveدر blade ها استفاده کنیم.

معرفی تگ ها

تگ فرم

پس از اضافه کردن پکیج فوق استفاده از تگ فرم در blade ها به صورت زیر امکان پذیر می شود:

{!! Form::open(array('url' => 'foo/bar')) !!}
    //
{!! Form::close() !!}

درصورت استفاده از کد فوق، متد POST به صورت پیش فرض در نظر گرفته می شود. البته می توانید برای استفاده از متدهای دیگر از روش زیر استفاده کنید.

{!! Form::open(array('url' => 'foo/bar', 'method' => 'put'))  !!}

همچنین می تونید از فرمهایی جهت اشاره به route ها و یا controller های خاص استفاده کرد.

{!! Form::open(array('route' => 'route.name')) !!}
{!! Form::open(array('action' => 'Controller@method')) !!}

و یا پارامترهای مشخصی رو به route ها و یا controller ها ارسال کنید. به کد زیر توجه کنید:

{!! Form::open(array('route' => array('route.name', $user->id))) !!}
{!! Form::open(array('action' => array('Controller@method', $user->id))) !!}

درصورت آپلود فایل نیز می بایست مطابق کد زیر عمل کنید:

{!! Form::open(array('url' => 'foo/bar', 'files' => true)) !!}

لیبل ها

برای نوشتن یک لیبل در Blade ، اگر لیبل شما بدون Attributes بود به صورت زیر

{!! Form::label('email', 'E-Mail Address')!!}

و در صورت داشتن Attributes مانند کلاس و یا ای دی بدین روش عمل کنید.

{!! Form::label('email', 'E-Mail Address', array('class' => 'awesome'))!!}

پارامتر اول نام تگی است که برای آن لیبل تعریف شده ، پارامتر دوم عنوان لیبل و پارامتر سوم مربوط به Attributes مرتبط با لیبل می باشد.

تگ های Input

برای تگ های Input با type=”text” اگر بدون مقدار پیش فرض بود به صورت زیر

{!! Form::text('username')!!}

و در صورت داشتن مقدار پیش فرض به صورت زیر عمل کنید.

{!! Form::text('email', 'example@gmail.com')!!}

پارامتر اول نام و پارامتر دوم مقدار پیش فرض آن می باشد.

همچنین برای تگ های Input با type=”password” :

{!! Form::password('password', array('class' => 'awesome'))!!}

و برای سایر Input ها :

{!! Form::email($name, $value = null, $attributes = array()) !!}
{!! Form::file($name, $attributes = array()) !!}
{!! Form::number('name', 'value')!!}
{!! Form::date('name', CarbonCarbon::now())!!}

بدین صورت عمل کنید.

Checkbox & radio button

می توانیم از checkox ها و radio button ها به صورت زیر در blade ها استفاده کنیم:

{!! Form::checkbox('name', 'value') !!}
{!! Form::radio('name', 'value') !!}

و در صورتیکه انتخاب به صورت پیش فرض نیاز داشتید به صورت زیر عمل کنید.

{!! Form::checkbox('name', 'value', true)!!}
{!! Form::radio('name', 'value', true) !!}

تگ های Drop Down List

روش کد نویسی تگ فوق به صورت زیر می باشد:

{!! Form::select('size', array('L' => 'Large', 'S' => 'Small'))!!}

پارامتر اول متد select نام و پارامتر دوم مقدار drop down می باشد.
حالا اگر که خواستید یک مقدار به صورت پیش فرض انتخاب شده باشد ، به روش زیر عمل کنید:

{!! Form::select('size', array('L' => 'Large', 'S' => 'Small'), 'S')!!}

و درصورت نیاز به یک palce holder از این روش استفاده کنید:

{!! Form::select('size', array('L' => 'Large', 'S' => 'Small'), null, ['placeholder' => 'Pick a size...'])!!}

ایجاد list groupe

{!! Form::select('animal', array(
'Cats' => array('leopard' => 'Leopard'),
'Dogs' => array('spaniel' => 'Spaniel'),
))!!}

ایجاد drop down list با مقادیر یک محدوده خاص

{!! Form::selectRange('number', 10, 20)!!}

و در نهایت می توانید برای button ها به صورت زیر عمل کنید:

Form::submit('Click Me!')

باتوجه به موارد فوق یک نمونه فرم ثبت نام ساده با استفاده از تگ های فوق رو می تونید مشاهده کنید.

{!! Form::open(['method' => 'POST', 'class' => 'form-horizontal']) !!}
    <div class="form-group @if($errors->first('username')) has-error @endif">
        {!! Form::label('username', 'userName:', ['class' => 'col-sm-3 control-label']) !!}
        <div class="col-sm-9">
            {!! Form::text('username', null, ['class' => 'form-control', 'required' => 'required']) !!}
            <small class="text-danger">{{ $errors->first('username') }}</small>
        </div>
    </div>
    <div class="form-group @if($errors->first('email')) has-error @endif">
        {!! Form::label('email', 'Email address', ['class' =>'col-sm-3 control-label']) !!}
        <div class="col-sm-9">
            {!! Form::email('email', null, ['class' => 'form-control', 'required' => 'required', 'placeholder' => 'eg: foo@bar.com']) !!}
            <small class="text-danger">{{ $errors->first('email') }}</small>
        </div>
    </div>
    <div class="form-group @if($errors->first('nationalCode')) has-error @endif">
        {!! Form::label('nationalCode', 'nationalCode', ['class' => 'col-sm-3 control-label']) !!}
        <div class="col-sm-9">
            {!! Form::text('nationalCode', null, ['class' => 'form-control', 'required' => 'required']) !!}
            <small class="text-danger">{{ $errors->first('nationalCode') }}</small>
        </div>
    </div>
    <div class="form-group @if($errors->first('password')) has-error @endif">
        {!! Form::label('password', 'Password', ['class' => 'col-sm-3 control-label']) !!}
        <div class="col-sm-9">
            {!! Form::password('password', ['class' => 'form-control', 'required' => 'required']) !!}
            <small class="text-danger">{{ $errors->first('password') }}</small>
        </div>
    </div>
    {!! Form::submit('click me', ['class' => 'btn btn-info pull-left']) !!}
{!! Form::close() !!}

با تلاش و تمرین می توانید به راحتی از روشهای فوق در blade ها استفاده کنید و البته می تونید با اضافه کردن پکیج های blade در sublime و یا phpstorm به راحتی از دستورات فوق استفاده کنید.

موفق و پیروز باشید

Home Page

محمد گیتی پسند

محمد دارای مدرک کارشناسی نرم افزار است و به عنوان توسعه‌دهنده نرم‌افزار وب و طراح رابط کاربری در دپارتمان تکنولوژی اطلاعات سازمان خدمات پس از فروش سایپا مشغول بکار می باشد. از سال 88 برنامه نویسی را با زبانهای گروه C شروع کرده و از سال 91 به سمت برنامه نویسی و طراحی وب رفت. وی هم اکنون درحال توسعه اپلیکیشن های موبایل با زبان swift است.

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.