This package has been deprecated. But worry not. You can use laraeast/laravel-bootstrap-forms
- 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
Begin by installing this package through Composer. Edit your project's
composer.jsonfile to requireelnooronline/laravel-bootstrap-forms.
composer require elnooronline/laravel-bootstrap-formsYou should publish the flags icons in public path to display in multilingual form tabs.
php artisan vendor:publish --tag=locales:flags{{ BsForm::open(['url' => 'foo/bar']) }}
//
{{ BsForm::close() }}By default, a
POSTmethod will be assumed; however, you are free to specify another method:
{{ BsForm::open(['url' => 'foo/bar', 'method' => 'post']) }}Note: Since HTML forms only support
POSTandGET,PUTandDELETEmethods will be spoofed by automatically adding a_methodhidden field to your form.
You may also open forms with method as well:
{{ 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:
{{ BsForm::open(['route' => 'route.name']) }}
{{ BsForm::open(['action' => 'Controller@method']) }}You may pass in route parameters as well:
{{ BsForm::open(['route' => ['route.name', $user->id]]) }}
{{ BsForm::open(['action' => ['Controller@method', $user->id]]) }}Generating A Text Input
{{ BsForm::text('username') }}{{ 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.
{{ BsForm::password('password', ['class' => 'awesome']) }}
{{ BsForm::password('password')->attr('class', 'awesome') }}{{ BsForm::email($name)->value($value)->label($label) }}
{{ BsForm::file($name)->label('Upload File') }}{{ 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') }}{{ BsForm::select('size', ['L' => 'Large', 'S' => 'Small']) }}
{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small']) }}{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small'])->value('S') }}{{ BsForm::select('size')->options(['L' => 'Large', 'S' => 'Small'])->placeholder('Select Size') }}{{ BsForm::select('animal',[
'Cats' => ['leopard' => 'Leopard'],
'Dogs' => ['spaniel' => 'Spaniel'],
]) }}{{ BsForm::submit('Click Me!') }}{{ 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() }}
->label($label): To Generate label to the specified field.
{{ BsForm::text('username')->label('Username') }}
->name($name): To Generate label to the specified field.
{{ BsForm::text('username')->label('Username') }}
->placeholder($placeholder): To Set placeholder attribute to the specified field.
{{ BsForm::text('username')->placeholder('Please Enter Your Name') }}
->min($min): To Set min attribute to the specified number field.
{{ BsForm::number('age')->min(10) }}
->max($max): To Set max attribute to the specified number field.
{{ BsForm::number('age')->min(10)->max(30) }}
->step($step): To Set step attribute to the specified number field.
{{ BsForm::number('age')->min(10)->max(30)->step(1) }}
->multiple($bool = true): To Set multiple attribute to the specified select and file fields.
{{ BsForm::file('photos[]')->multiple() }}
->note($note): To Sethelp-blockto the specified field.
{{ BsForm::text('username')->note('Example: Ahmed Fathy') }}
->name($name): To Set the name of to the specified field.
{{ BsForm::text()->name('username')->note('Example: Ahmed Fathy') }}
->value($value): To Set the value of to the specified field as default will setold('name').
{{ BsForm::text()->name('username')->value('Ahmed Fathy') }}
->inlineValidation($bool = true): To display validation errors in the specified field.
{{ BsForm::text('username')->style('vertical')->inlineValidation(false) }}
->style($style = 'default'): To Set style to the specified field. supported['default', 'vertical'].
{{ BsForm::text('username')->style('vertical') }}
{{ BsForm::text('email')->style('default') }}
->close(): To close the form tag.
{{ BsForm::close() }}You may add localed labels, notes and placeholders using resource option as well:
@php(BsForm::resource('users'))You must add
users.phpfile to theresources/lang/en/path and set the default attributes and notes, placeholders as well:
<?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.',
],
...
];You can using custom error bag to display validation errors without any conflict.
// Default error bag
BsForm::errorBag('default');
// Other error bag
BsForm::errorBag('create');@php(BsForm::resource('users'))
{{ BsForm::post(route('register')) }}
{{ BsForm::text()->name('name') }}
{{ BsForm::email('email') }}
{{ BsForm::text('phone') }}
{{ BsForm::submit()->danger() }}
{{ BsForm::close() }}{{ BsForm::post(route('categories.store')) }}
@bsMultilangualFormTabs
{{ BsForm::text('name') }}
@endBsMultilangualFormTabs
{{ BsForm::submit()->danger() }}
{{ BsForm::close() }}Note : the input name inside
@bsMultilangualFormTabsand@endBsMultilangualFormTabssuffix with:{lang}.Ex. if your supported language is
ar&enthe input will named withname:ar&name:en.You should use Astrotomic/laravel-translatable and configure it's rule_factory with key format
\Astrotomic\Translatable\Validation\RuleFactory::FORMAT_KEYto fill the multilingual data like the following example.
Category::create([
'name:ar' => 'سيارات',
'name:en' => 'Cars',
]);
// with laravel-bootstrap-forms
Category::create($request->all());You can add your supported locales in
locales.phpconfig file. you will get it using the following command:
php artisan vendor:publish --tag=locales:config<?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'
],
];If you want to use bootstrap 3 you should publish the config file using the following commad and set the bootstrap version globally.
php artisan vendor:publish --tag=laravel-bootstrap-forms.config<?php
return [
/**
* The path of form components views.
*
* - 'BsForm::bootstrap4' - Bootstrap 4
* - 'BsForm::bootstrap3' - Bootstrap 3
*/
'views' => 'BsForm::bootstrap3',
];After change bootstrap version you should clear the cached view files using the
view:clearartisan command.
php artisan view:clearrun the
vendor:publishartusan command to override components views as well.
php artisan vendor:publish --provider="Elnooronline\LaravelBootstrapForms\Providers\BootstrapFormsServiceProvider" --tag BsFormwill override components in
resources/views/vendor/BsFormpath.
- 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.phpfile ascustom.blade.phpand use custom style as well :
{{ BsForm::text('name')->style('custom') }}you can also set the style globally with
BsForm::style()method before the form open as well :
@php(BsForm::style('custom'))or
@php(BsForm::resource('users')->style('custom'))To reset the custom style to the default you should call
clearStyle()method as well:
@php(BsForm::clearStyle())For Example :
@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() }}You may add new component class extends
BaseComponentand regoster it in yourboot()method inAppServiceProviderclass as well:
<?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 yourAppServiceProviderclass as well :
<?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.phppath.
Eexample content of
views/vendor/BsForm/bootstrap4/components/image/default.blade.phpfile :
<div class="form-group{{ $errors->has($name) ? ' has-error' : '' }}">
@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))
<strong class="help-block">{{ $errors->first($name) }}</strong>
@else
<strong class="help-block">{{ $note }}</strong>
@endif
@else
<strong class="help-block">{{ $note }}</strong>
@endif
@if($file)
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="{{ $file }}">
</a>
</div>
</div>
@endif
</div>{{ BsForm::image('photo', $url) }}