elnooronline/laravel-bootstrap-forms

TODO

This package has been deprecated. But worry not. You can use laraeast/laravel-bootstrap-forms, _(*1)

# Laravel Bootstrap Forms.

, _(*2)

• Installation
• Opening A Form
• Text, Text Area, Date, Number & Password Fields
• Checkboxes and Radio Buttons
• Drop-Down Lists
• Generating A Submit Button
• Supported Methods
• Using Resource With Localed Fields
• Example Register Form
• Add Custom Style To The Component
• Using Multilingual Form Tabs
• Manage Locales
• Using Bootstrap 3
• Add Custom Component

, _(*3)

# Installation

Begin by installing this package through Composer. Edit your project's composer.json file to require elnooronline/laravel-bootstrap-forms., _(*4)

composer require elnooronline/laravel-bootstrap-forms

You should publish the flags icons in public path to display in multilingual form tabs., _(*5)

php artisan vendor:publish --tag=locales:flags

, _(*6)

# Opening A Form

{{ BsForm::open(['url' => 'foo/bar']) }}
//
{{ BsForm::close() }}

By default, a POST method will be assumed; however, you are free to specify another method:, _(*7)

{{ BsForm::open(['url' => 'foo/bar', 'method' => 'post']) }}

Note: Since HTML forms only support POST and GET, PUT and DELETE methods will be spoofed by automatically adding a _method hidden field to your form., _(*8)

You may also open forms with method as well: blade {{ BsForm::get('foo/bar') }} {{ BsForm::post('foo/bar') }} {{ BsForm::put('foo/bar') }} {{ BsForm::patch('foo/bar') }} {{ BsForm::delete('foo/bar') }} {{ BsForm::model($model, 'foo/bar') }} {{ BsForm::putModel($model, 'foo/bar') }} {{ BsForm::patchModel($model, 'foo/bar') }} You may also open forms that point to named routes or controller actions:, _(*9)

{{ BsForm::open(['route' => 'route.name']) }}
{{ BsForm::open(['action' => 'Controller@method']) }}

You may pass in route parameters as well:, _(*10)

{{ BsForm::open(['route' => ['route.name', $user->id]]) }}
{{ BsForm::open(['action' => ['Controller@method', $user->id]]) }}

, _(*11)

# Text, Text Area, Date, Number & Password Fields

Generating A Text Input, _(*12)

{{ BsForm::text('username') }}

Specifying A Default Value

{{ BsForm::text('email', 'example@gmail.com') }}
{{ BsForm::text('email')->value('example@gmail.com') }}

Note: The date, number and textarea methods have the same signature as the text method., _(*13)

## Generating A Password Input, _(*14)

{{ BsForm::password('password', ['class' => 'awesome']) }}
{{ BsForm::password('password')->attr('class', 'awesome') }}

Generating Other Inputs

{{ BsForm::email($name)->value($value)->label($label) }}
{{ BsForm::file($name)->label('Upload File') }}

, _(*15)

# Checkboxes and Radio Buttons

Generating A Checkbox Or Radio Input

{{ BsForm::checkbox('name', 'value')->checked(false) }}
{{ BsForm::checkbox('name')->value('value')->checked(false) }}

{{ BsForm::radio('name', 'value')->checked(false)->label('label') }}
{{ BsForm::radio('name')->value('value')->checked(false)->label('label') }}

, _(*16)

# Drop-Down Lists

{{ BsForm::select('size', ['L' => 'Large', 'S' => 'Small']) }}
{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small']) }}

Generating A Drop-Down List With Selected Default

{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small'])->value('S') }}

Generating a Drop-Down List With an Empty Placeholder

{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small'])->placeholder('Select Size') }}

Generating A Grouped List

{{ BsForm::select('animal',[
         'Cats' => ['leopard' => 'Leopard'],
         'Dogs' => ['spaniel' => 'Spaniel'],
   ]) }}

, _(*17)

# Generating A Submit Button

{{ BsForm::submit('Click Me!') }}

Generateing A Submit Button With Bootstrap Button Style

{{ BsForm::submit('Click Me!')->success() }}
{{ BsForm::submit('Click Me!')->primary() }}
{{ BsForm::submit('Click Me!')->info() }}
{{ BsForm::submit('Click Me!')->warning() }}
{{ BsForm::submit('Click Me!')->danger() }}

, _(*18)

# Supported Methods

->label($label) : To Generate label to the specified field., _(*19)

{{ BsForm::text('username')->label('Username') }}

->name($name) : To Generate label to the specified field., _(*20)

{{ BsForm::text('username')->label('Username') }}

->placeholder($placeholder) : To Set placeholder attribute to the specified field., _(*21)

{{ BsForm::text('username')->placeholder('Please Enter Your Name') }}

->min($min) : To Set min attribute to the specified number field., _(*22)

{{ BsForm::number('age')->min(10) }}

->max($max) : To Set max attribute to the specified number field., _(*23)

{{ BsForm::number('age')->min(10)->max(30) }}

->step($step) : To Set step attribute to the specified number field., _(*24)

{{ BsForm::number('age')->min(10)->max(30)->step(1) }}

->multiple($bool = true) : To Set multiple attribute to the specified select and file fields., _(*25)

{{ BsForm::file('photos[]')->multiple() }}

->note($note) : To Set help-block to the specified field., _(*26)

{{ BsForm::text('username')->note('Example: Ahmed Fathy') }}

->name($name) : To Set the name of to the specified field., _(*27)

{{ BsForm::text()->name('username')->note('Example: Ahmed Fathy') }}

->value($value) : To Set the value of to the specified field as default will set old('name')., _(*28)

{{ BsForm::text()->name('username')->value('Ahmed Fathy') }}

->inlineValidation($bool = true) : To display validation errors in the specified field., _(*29)

{{ BsForm::text('username')->style('vertical')->inlineValidation(false) }}

->style($style = 'default') : To Set style to the specified field. supported ['default', 'vertical']., _(*30)

{{ BsForm::text('username')->style('vertical') }}
{{ BsForm::text('email')->style('default') }}

->close() : To close the form tag., _(*31)

{{ BsForm::close() }}

, _(*32)

# Using Resource With Localed Fields

You may add localed labels, notes and placeholders using resource option as well:, _(*33)

@php(BsForm::resource('users'))

You must add users.php file to the resources/lang/en/ path and set the default attributes and notes, placeholders as well:, _(*34)

<?php
return [
    'attributes' => [
        'username' => 'User Name',
        'email' => 'E-mail Address',
        'phone' => 'Phone Number',
    ],
    'notes' => [
        'username' => 'Example: Ahmed Fathy',
        'email' => 'Example: aliraqi-dev@gmail.com',
        'phone' => 'Example: +02xxxxxxxxxxx',
    ],
    'placeholders' => [
        'username' => 'Please enter your name.',
        'email' => 'Please enter your e-mail address.',
        'phone' => 'Please enter your phone number.',
    ],
    ...
];

, _(*35)

# Using Custom Error Message Bag

You can using custom error bag to display validation errors without any conflict., _(*36)

// Default error bag
BsForm::errorBag('default');

// Other error bag
BsForm::errorBag('create');

, _(*37)

# Example Register Form

@php(BsForm::resource('users'))

{{ BsForm::post(route('register')) }}
    {{ BsForm::text()->name('name') }}
    {{ BsForm::email('email') }}
    {{ BsForm::text('phone') }}
    {{ BsForm::submit()->danger() }}
{{ BsForm::close() }}

, _(*38)

# Using Multilingual Form Tabs

{{ BsForm::post(route('categories.store')) }}
    @bsMultilangualFormTabs
        {{ BsForm::text('name') }}
    @endBsMultilangualFormTabs

    {{ BsForm::submit()->danger() }}
{{ BsForm::close() }}

Note : the input name inside @bsMultilangualFormTabs and @endBsMultilangualFormTabs suffix with :{lang}., _(*39)

Ex. if your supported language is ar & en the input will named with name:ar & name:en., _(*40)

You should use Astrotomic/laravel-translatable and configure it's rule_factory with key format \Astrotomic\Translatable\Validation\RuleFactory::FORMAT_KEY to fill the multilingual data like the following example., _(*41)

Category::create([
    'name:ar' => 'سيارات',
    'name:en' => 'Cars',
]);

// with laravel-bootstrap-forms
Category::create($request->all());

, _(*42)

# Manage Locales

You can add your supported locales in locales.php config file. you will get it using the following command:, _(*43)

php artisan vendor:publish --tag=locales:config

```php <?php return [ /* |-------------------------------------------------------------------------- | Application Locales |-------------------------------------------------------------------------- | | Contains an array with the applications available locales. | */ 'en' => [ 'code' => 'en', 'name' => 'English', 'dir' => 'ltr', 'flag' => '/images/flags/us.png' ], 'ar' => [ 'code' => 'ar', 'name' => 'العربية', 'dir' => 'rtl', 'flag' => '/images/flags/sa.png' ], ];, <sub>(*44)</sub>

<a name="bootstrap3"></a>
# # Using Bootstrap 3

> If you want to use bootstrap 3 you should publish the config file using the following commad and set the bootstrap version globally.

```bash
php artisan vendor:publish --tag=laravel-bootstrap-forms.config

```php <?php, <sub>(*45)</sub>

return [ /** * The path of form components views. * * - 'BsForm::bootstrap4' - Bootstrap 4 * - 'BsForm::bootstrap3' - Bootstrap 3 */ 'views' => 'BsForm::bootstrap3', ];, <sub>(*46)</sub>

> After change bootstrap version you should clear the cached view files using the `view:clear` artisan command.

```bash
php artisan view:clear

, <sub>(*47)</sub>

# Add Custom Style To The Component

run the vendor:publish artusan command to override components views as well., <sub>(*48)</sub>

php artisan vendor:publish --provider="Elnooronline\LaravelBootstrapForms\Providers\BootstrapFormsServiceProvider" --tag BsForm

will override components in resources/views/vendor/BsForm path., <sub>(*49)</sub>

- views
    - vendor
        - BsForm
            - bootstrap4
                - text
                    - default.blade.php
                    - vertical.blade.php
                    - custom.blade.php
                - email
                    - default.blade.php
                    - vertical.blade.php
                    - custom.blade.php

you can copy default.blade.php file as custom.blade.php and use custom style as well :, <sub>(*50)</sub>

{{ BsForm::text('name')->style('custom') }}

you can also set the style globally with BsForm::style() method before the form open as well :, <sub>(*51)</sub>

@php(BsForm::style('custom'))

or, <sub>(*52)</sub>

@php(BsForm::resource('users')->style('custom'))

To reset the custom style to the default you should call clearStyle() method as well:, <sub>(*53)</sub>

@php(BsForm::clearStyle())

For Example :, <sub>(*54)</sub>

@php(BsForm::resource('users')->style('web'))
{{ BsForm::model($user, route('users.update', $user)) }}
    {{-- All fields here uses web style  --}}
    {{ BsForm::text('name') }} 
    {{ BsForm::text('email') }} 
@php(BsForm::clearStyle())
    {{-- All fields after clearing uses default style  --}}
    {{ BsForm::text('phone') }} 
    {{ BsForm::textarea('address') }} 
    {{ BsForm::submit()->style('inline') }} 
{{ BsForm::close() }}

, <sub>(*55)</sub>

# Add Custom Component

You may add new component class extends BaseComponent and regoster it in your boot() method in AppServiceProvider class as well:, <sub>(*56)</sub>

<?php

namespace App\Components;

use Elnooronline\LaravelBootstrapForms\Components\BaseComponent;

class ImageComponent extends BaseComponent
{
    /**
     * The component view path.
     *
     * @var string
     */
    protected $viewPath = 'components.image';

    /**
     * The image file path.
     *
     * @var string
     */
    protected $file;

    /**
     * Initialized the input arguments.
     *
     * @param null $name
     * @param null $file
     * @return $this
     */
    public function init($name = null, $file = null)
    {
        $this->name = $name;

        $this->value = $file ?: 'http://via.placeholder.com/100x100';

        //$this->hasDefaultLocaledLabel($name);

        //$this->hasDefaultLocaledNote($name);

        //$this->hasDefaultLocaledPlaceholder($name);

        return $this;
    }

    /**
     * Set the file path.
     *
     * @param $file
     * @return $this
     */
    public function file($file)
    {
        $this->file = $file;

        return $this;
    }

    /**
     * The variables with registerd in view component.
     *
     * @return array
     */
    protected function viewComposer()
    {
        return [
            'file' => $this->file,
        ];
    }
}

Then register the component class in boot() method in your AppServiceProvider class as well :, <sub>(*57)</sub>

<?php

namespace App\Providers;

use App\Components\ImageComponent;
use Illuminate\Support\ServiceProvider;
use Elnooronline\LaravelBootstrapForms\Facades\BsForm;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
        BsForm::registerComponent('image', ImageComponent::class);
        ...
    }
    ...

Then publish the BsForm views and create the new component file in views/vendor/BsForm/bootstrap4/components/image/default.blade.php path., <sub>(*58)</sub>

Eexample content of views/vendor/BsForm/bootstrap4/components/image/default.blade.php file :, <sub>(*59)</sub>

    @if($label)
        {{ Form::label($name, $label, ['class' => 'content-label']) }}
    @endif

    {{ Form::file($name, array_merge(['class' => 'form-control'], $attributes)) }}

    @if($inlineValidation)
        @if($errors->has($name))
            {{ $errors->first($name) }}
        @else
            {{ $note }}
        @endif
    @else
        {{ $note }}
    @endif
        
    @if($file)
        

            

                
                    
                
            
        
    @endif

Usage

{{ BsForm::image('photo', $url) }}