Krajee Solutions

Web programming tips, tricks, and resources.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/rapidly-setup-gridview-editable-cells-with-editable-column-action/

Rapidly setup GridView editable cells with EditableColumnAction

This webtip is a follow-up to setting up an editable column to manipulate records in Yii2 grid view and a provides faster and easier alternative to setting up editable cells. With release v3.0.9 of the kartik-v\yii2-grid, the module allows you to use an EditableColumnAction to rapidly set up your controller action to manage EditableColumn cells in the grid.

Before proceeding to read this webtip, please do read the setting up an editable column to manipulate records in Yii2 grid view article in detail. This webtip will explain how in Yii 2 Framework, we can setup the enhanced Krajee EditableColumn and enhanced Krajee EditableColumnAction to work with the Krajee GridView widget.

The Use Case

Let’s consider the same example of editing books in a library as seen on the Krajee grid demos page. If you watch the demo, the Book Name and Buy Amount columns are Editable. We will also consider editing of the Publish Date for the example. Let’s consider the following:

We will setup the name and buy_amount attributes to be editable in the grid

We will setup model validation rules for the above two attributes.

We will configure the name to be edited through a HTML text input. In addition, we will also show the book_color input within the name editable form.

We will configure the buy_amount to be edited through the TouchSpin widget from Krajee. We will have publish_date editable as normal text.

We will setup the grid rendering controller action to also validate the editable submissions and validate posted records to save to the database.

We will bypass all the other controller setups and just setup a new action via EditableColumnAction within the controller. We will refer this new action within EditableColumn::formOptions['action'] for each editable cell.

STEP 1: Setup model

Setup your model attributes and validation rules very similarly to the configuration in the earlier webtip.

/** * Book model class */ class Book extends \yii\db\ActiveRecord /** * @inheritdoc */ public function rules() return [ [['name', 'buy_amount'], 'required'], [['name', 'buy_amount', 'publish_date'], 'safe'], [['buy_amount'], 'number', 'min'=>0, 'max'=>5000] ];

STEP 2: Setup view (grid and editable columns)

There is a small difference in setting up your editable column in GridView versus the earlier webtip. Instead of tampering with the index action, we will add a new editable form action URL editbook to update the editable. Note the formOptions within editableOptions.

// the grid columns setup (only two column entries are shown here // you can add more column entries you need for your use case) $gridColumns = [ // the name column configuration [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'name', 'pageSummary'=>true, 'editableOptions'=> function ($model, $key, $index) return [ 'header'=>'Name', 'size'=>'md', 'formOptions'=>['action' => ['/site/editbook']], // point to the new action 'afterInput'=>function ($form, $widget) use ($model, $index) return $form->field($model, "color")->widget(\kartik\widgets\ColorInput::classname(), [ 'showDefaultPalette'=>false, 'options'=>['id'=>"color-$index"], 'pluginOptions'=>[ 'showPalette'=>true, 'showPaletteOnly'=>true, 'showSelectionPalette'=>true, 'showAlpha'=>false, 'allowEmpty'=>false, 'preferredFormat'=>'name', 'palette'=>[ ["white", "black", "grey", "silver", "gold", "brown"], ["red", "orange", "yellow", "indigo", "maroon", "pink"], ["blue", "green", "violet", "cyan", "magenta", "purple"], ] ], ]); ]; ], // the buy_amount column configuration [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'buy_amount', 'editableOptions'=>[ 'header'=>'Buy Amount', 'formOptions'=>['action' => ['/site/editbook']], // point to the new action 'inputType'=>\kartik\editable\Editable::INPUT_SPIN, 'options'=>['pluginOptions'=>['min'=>0, 'max'=>5000]] ], 'hAlign'=>'right', 'vAlign'=>'middle', 'width'=>'100px', 'format'=>['decimal', 2], 'pageSummary'=>true ], // the publish_date column configuration [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'publish_date', 'hAlign'=>'center', 'vAlign'=>'middle', 'filterType'=>GridView::FILTER_DATE_RANGE, 'filterWidgetOptions'=>[ 'pluginOptions' => [ 'autoUpdateInput' => false, ] ], 'editableOptions' => [ 'inputType' => Editable::INPUT_DATE, 'formOptions' => ['action' => ['/site/editbook']], 'options' => [ 'convertFormat'=>true, 'pluginOptions' => ['format' => 'php:Y-m-d'] ] ] ], ]; // the GridView widget (you must use kartik\grid\GridView) echo \kartik\grid\GridView::widget([ 'dataProvider'=>$dataProvider, 'filterModel'=>$searchModel, 'columns'=>$gridColumns ]);

STEP 3: Setup controller action

This is the part where you can see most of the change. You do not need to change the actionIndex generated by default by gii. Instead we will add a new action using EditableColumnAction to rapidly process editable column updates as shown below:

use kartik\grid\EditableColumnAction; use yii\web\Controller; use yii\helpers\ArrayHelper; use app\models\Book; class SiteController extends Controller public function actions() return ArrayHelper::merge(parent::actions(), [ 'editbook' => [ // identifier for your editable action 'class' => EditableColumnAction::className(), // action class name 'modelClass' => Book::className(), // the update model class 'outputValue' => function ($model, $attribute, $key, $index) $fmt = Yii::$app->formatter; $value = $model->$attribute; // your attribute value if ($attribute === 'buy_amount') // selective validation by attribute return $fmt->asDecimal($value, 2); // return formatted value if desired elseif ($attribute === 'publish_date') // selective validation by attribute return $fmt->asDate($value, 'php:Y-m-d');// return formatted value if desired return ''; // empty is same as $value , 'outputMessage' => function($model, $attribute, $key, $index) return ''; // any custom error after model save , // 'showModelErrors' => true, // show model errors after save // 'errorOptions' => ['header' => ''] // error summary HTML options // 'postOnly' => true, // 'ajaxOnly' => true, // 'findModel' => function($id, $action) , // 'checkAccess' => function($action, $model) ] ]);

Note the entire action can be simplified as shown below if you do not wish advanced configuration (like the outputValue setting is optional). For example:

public function actions() return ArrayHelper::merge(parent::actions(), [ 'editbook' => [ // identifier for your editable action 'class' => EditableColumnAction::className(), // action class name 'modelClass' => Book::className(), // the update model class ] ]);

The action will thus automatically save the base model records edited via EditableColumn form and is a much easier way to manipulate all EditableColumn records in the GridView with one single action. For advanced cases, (e.g. where your modelClass may change), you may create multiple action identifiers within the actions array above and refer these actions within the EditableColumn::editableOptions['formOptions']['action'] configuration.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/ajax-based-file-uploads-using-fileinput-plugin/

Ajax based file uploads using FileInput plugin

There have been queries and requests from many folks who wish to learn implementing AJAX uploads with the bootstrap-fileinput jQuery plugin. How does one build the server code (e.g. PHP) for parsing the AJAX response and sending data back to the plugin? This webtip mentions a PHP server side processing example for using the bootstrap-fileinput plugin to process your ajax based uploads.

About bootstrap-fileinput

The bootstrap-fileinput jQuery plugin is an advanced HTML 5 file input designed using Bootstrap 3.x CSS styles. It is a simple yet powerful file management tool and solution for web developers that utilizes HTML 5 and CSS 3 features (supported by most modern browsers). In addition to advanced styles & layouts, the plugin offers file preview for various files, multiple selection including drag & drop, ajax based uploads with progress bar, setting initial previews and deletes and more.

Pre-requisites

Ensure all the pre-requisites for the bootstrap-fileinput jQuery plugin are followed and adhered to. You must have the bootstrap CSS and jQuery library loaded before you run the other scripts below.

Input Markup (HTML)

Let’s consider you have the following markup to initialize the input. The scenario considered is ajax based upload of multiple images. Your markup can be as simple as below (note the id and name attributes).

<input id="images" name="images[]" type="file">

However, in many cases you may have other form fields or additional data you may need to submit. Let’s consider you have the following additional fields in your form.

<input id="userid" name="userid" type="hidden"> <input id="username" name="username" type="text">

Initialize Plugin (Javascript)

Let’s consider a simple scenario of uploading files via Ajax. You will need to setup the javascript to initialize the bootstrap fileinput plugin. Note that the examples here uses jQuery. You would like to send additional form data when the files are uploaded (i.e. user_id and user_name). You can setup all of these as mentioned below. By default the plugin will upload in asynchronous mode through parallel ajax calls. You can control that through uploadAsync property.

$(document).on("ready", function() $("#images").fileinput( uploadAsync: true, uploadUrl: "/path/to/upload.php" // your upload server url uploadExtraData: function() return userid: $("#userid").val(), username: $("#username").val() ; ); );

Server Code (PHP)

Let’s look at the server code upload.php as mentioned above that will receive and process the data.

// upload.php if (empty($_FILES['images'])) return; // or process or throw an exception // get the files posted $images = $_FILES['images']; // get user id posted $userid = empty($_POST['userid']) ? '' : $_POST['userid']; // get user name posted $username = empty($_POST['username']) ? '' : $_POST['username']; // a flag to see if everything is ok $success = null; // file paths to store $paths= []; // loop and process files for($i=0; $i < count($images); $i++) $ext = explode('.', basename($images['name'][$i])); $target_path = "uploads/" . md5(uniqid()) . "." . $ext[count($ext)-1]; if(move_uploaded_file($images['tmp_name'][$i], $target_path)) $success = true; $paths[] = $target_path; else $success = false; break; // check and process based on successful status if ($success === true) // call the function to save all data to database // code for the following function `save_data` is not // mentioned in this example save_data($userid, $username, $paths); // store a successful response (default at least an empty array). You could // return any additional response info you need to the plugin for advanced // implementations. $output = []; elseif ($success === false) $output = ['error'=>'Error while uploading images. Contact the system administrator', ]; // delete any uploaded files foreach ($paths as $file) unlink($file); else $output = ['error'=>'No files were processed.']; // return a json encoded response for plugin to process successfully echo json_encode($output);

Summary

That’s about a basic setup you need to do to upload files via ajax and the plugin should process it. Note, that for your practical cases you may need to tweak various other settings and add to this basic setup above. You may also need to control various other properties of the plugin to make it work the way you want for your entire application – like uploadAsync, initialPreview, initialPreviewDelete etc. Similarly, you can use the various events in the plugin to trigger or perform additional actions – e.g. filepreupload, fileuploaded etc.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/setup-editable-column-grid-view-manipulate-records/

How to setup an editable column to manipulate records in Yii2 grid view

This webtip will explain how to setup the enhanced EditableColumn to work with the \kartik\grid\GridView widget. The objective is to achieve the following functionality using kartik\grid\GridView and kartik\grid\EditableColumn:

configure a grid cell content to be editable

use advanced input widgets to edit content

capture the editable content POSTED via controller and update database via ajax

trigger model validation and validation error messages if needed

About GridView

Before we start, the GridView is an enhanced grid widget that extends the yii\grid\GridView widget with various new features, plugins and makes it snappy for developers to create grid related user interfaces.

About EditableColumn

This is an enhanced grid column available within the kartik\grid\GridView extension. It allows you to quickly create an editable grid cell content by triggering a popover.

The Use Case

Let’s consider the example of editing books in a library. The final output of the grid is seen on the Krajee grid demos page. If you watch the demo, the Book Name and Buy Amount columns are Editable. Let’s consider the following:

We will setup the name and buy_amount attributes to be editable in the grid

We will setup model validation rules for the above two attributes.

We will configure the name to be edited through a HTML text input. In addition, we will also show the book_color input within the name editable form.

We will configure the buy_amount to be edited through the TouchSpin widget from Krajee.

We will setup the grid rendering controller action to also validate the editable submissions and validate posted records to save to the database.

STEP 1: Setup model

Setup any model validation rules for your attributes. For the example we will set name and buy_amount to be mandatory/required. We will also setup buy_amount as a number field and must lie between 0 and 5000.

/** * Book model class */ class Book extends \yii\db\ActiveRecord /** * @inheritdoc */ public function rules() return [ [['name', 'buy_amount'], 'required'], [['name', 'buy_amount'], 'safe'], [['buy_amount'], 'number', 'min'=>0, 'max'=>5000] ];

STEP 2: Setup view (grid and editable columns)

The firstmost important part is to setup your view file rendering the grid to show these editable columns the way we desire. So here is the configuration we will do:

the name will be edited by a text input and will also allow editing the book color using the ColorInput widget from Krajee. We will use a Closure method to configure editableOptions. The ColorInput can be embedded using the afterInput property in editableOptions.

the buy_amount will be edited by the TouchSpin widget from Krajee. We will configure the editableOptions as an array in this case.

// the grid columns setup (only two column entries are shown here // you can add more column entries you need for your use case) $gridColumns = [ // the name column configuration [ 'class' => 'kartik\grid\EditableColumn', 'attribute' => 'name', 'pageSummary' => true, 'editableOptions'=> function ($model, $key, $index) return [ 'header'=>'Name', 'size'=>'md', 'afterInput' => function ($form, $widget) use ($model, $index) return $form->field($model, "color")->widget(\kartik\widgets\ColorInput::classname(), [ 'showDefaultPalette' => false, 'options'=>['id'=>"color-$index"], 'pluginOptions' => [ 'showPalette' => true, 'showPaletteOnly' => true, 'showSelectionPalette' => true, 'showAlpha' => false, 'allowEmpty' => false, 'preferredFormat' => 'name', 'palette' => [ [ "white", "black", "grey", "silver", "gold", "brown", ], [ "red", "orange", "yellow", "indigo", "maroon", "pink" ], [ "blue", "green", "violet", "cyan", "magenta", "purple", ], ] ], ]); ]; ], // the buy_amount column configuration [ 'class' => 'kartik\grid\EditableColumn', 'attribute'=>'buy_amount', 'editableOptions' => [ 'inputType' => \kartik\editable\Editable::INPUT_SPIN, 'options' => [ 'pluginOptions' => ['min'=>0, 'max'=>5000] ] ], 'hAlign'=>'right', 'vAlign'=>'middle', 'width'=>'100px', 'format'=>['decimal', 2], 'pageSummary' => true ], ]; // the GridView widget (you must use kartik\grid\GridView) echo \kartikgridGridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => $gridColumns ]);

STEP 3: Modify controller action for validating Editable

The next most important part is to modify your controller action that renders the view file containing the GridView. Let’s say this action is named actionIndex. You will need to load and validate the output of EditableColumn using Model::loadMultiple & Model::validateMultiple methods as shown below.

public function actionIndex() // your default model and dataProvider generated by gii $searchModel = new BookSearch; $dataProvider = $searchModel->search(Yii::$app->request->getQueryParams()); // validate if there is a editable input saved via AJAX if (Yii::$app->request->post('hasEditable')) // store a default json response as desired by editable $out = Json::encode(['output'=>'', 'message'=>'']); // you must get the default models from your dataProvider $models = $dataProvider->getModels(); // load models from POST using loadMultiple method if (Model::loadMultiple($models, Yii::$app->request->post())) // fetch the first entry (there should only be one entry // anyway in this array for an editable submission) // - $index will give you the row index // - $model will return the row model foreach ($models as $index => $model) break; $output = ''; // check if buy_amount was posted for Book model if (isset($_POST['Book'][$index]['buy_amount'])) $output = Yii::$app->formatter->asDecimal($model->buy_amount, 2); $out = Json::encode(['output'=>$output, 'message'=>'']); if (Model::loadMultiple($models, Yii::$app->request->post())) // if you wish to validate you can uncomment the code below // if (!Model::validateMultiple($models) // /* raise a validation error */ // $out = Json::encode(['output'=>'', 'message'=>'Validation error']); // echo $out; // return; // // fetch the first entry (there should only be one entry // anyway in this array for an editable submission) // - $index will give you the grid row index // - $model will return the grid row model foreach ($models as $index => $model) break; // custom output to return to be displayed as the editable grid cell // data. Normally this is empty - whereby whatever value is edited by // in the input by user is updated automatically. $output = ''; // specific use case where you need to validate a specific // editable column posted when you have more than one // EditableColumn in the grid view. We evaluate here a // check to see if buy_amount was posted for the Book model if (isset($_POST['Book'][$index]['buy_amount'])) $output = Yii::$app->formatter->asDecimal($model->buy_amount, 2); $out = Json::encode(['output'=>$output, 'message'=>'']); // return ajax json encoded response and exit echo $out; return; // non-ajax - render the grid by default return $this->render('index', [ 'dataProvider' => $dataProvider, 'searchModel' => $searchModel ]);

STEP 4: Test the grid and editable

Run your view and test out for any validation or ajax errors. You can view the Krajee grid demo page to see the output of the above configured example.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/clear-html-file-input-value-ie-using-javascript/

Clear HTML file input value in IE using javascript

While implementing one of my most used jQuery plugins, bootstrap-file-input, I ran into a browser specific niggle. Clearing HTML form inputs using javascript or a library like jQuery is usually considered trivial. You generally set the value property (or val() in jQuery) to an empty string. This works pretty much well for all input types across all browsers, with the exception if you are using a file input and a browser like Internet Explorer (versions 10 and below).

About File Input

For novices, we are talking about the HTML form input with file type i.e. <input type="file">. This input allows you to select/pick files for upload from your client via the browser.

Clearing Input Values

In most modern browsers (as of 2014) e.g. Firefox, Chrome, Safari, Opera, and IE v11, this is pretty straightforward. The inputs can be cleared (including file inputs) in the following way:

// clearing value in javascript var elem = document.getElementById("input-id"); elem.value = ""; // clearing value in jquery $('#input-id').val('');

Internet Explorer (IE8 to IE10)

Unfortunately the above method will not work with Internet Explorer browsers (versions 8.x to 10.x). This is because file input values are considered READ ONLY as part of the browser security implementation. What are your solution options then to clear file inputs in these browsers? Well, if you do a search on the web, you will find some solutions that could be summarized into two different options:

Option 1: Clone the input.

You could clone the input using jQuery clone method and replace your control.

<input type="file" id="fileInput"/> <button id="clear">Clear</button> <script> $fileInput = $('#fileInput'); $("#clear").on("click", function () $fileInput.replaceWith( $fileInput = $fileInput.clone( true ) ); ); </script>

This works well for various use cases. There are however some drawbacks of the method.

Note the true parameter in the clone is needed in order to clone the file input element preserving all event handlers. However, there could be duplicate undesired occurences which you need to handle by right event delegation to handle clicks in the parent element.

I personally found this method not so desirable, since it was creating a duplicate copy of my file input. This behavior was especially not desired in my file input plugin bootstrap-file-input.

Option 2: Resetting the parent form

You could reset the wrapping form to clear file values.

<form> <input type="file" id="fileInput"/> </form> <script> $("#fileInput").closest('form').trigger('reset'); </script>

This works well for various use cases. There are however some drawbacks of the method as well.

It would reset all fields within the form, which you do not desire.

To overcome that you could wrap the input in another form element and try to reset it. This has been described in various articles online. However, you would run into a nested form issue, that hangs the IE browser on reset.

The solution below is what worked for me across the browser landscape.

The Solution

The following solution enabled me to build a function to clear file inputs across all browsers. It is used within my bootstrap-file-input plugin for people interested to look at the implementation. The example uses jQuery, but can be easily adapted for a normal javascript usage.

function clearFileInput($input) if (isEmpty($input.val())) return; // Fix for IE ver < 11, that does not clear file inputs // Requires a sequence of steps to prevent IE crashing but // still allow clearing of the file input. if (/MSIE/.test(navigator.userAgent)) var $frm1 = $input.closest('form'); if ($frm1.length) // check if the input is already wrapped in a form $input.wrap('<form>'); var $frm2 = $input.closest('form'), // the wrapper form $tmpEl = $(document.createElement('div')); // a temporary placeholder element $frm2.before($tmpEl).after($frm1).trigger('reset'); $input.unwrap().appendTo($tmpEl).unwrap(); else // no parent form exists - just wrap a form element $input.wrap('<form>').closest('form').trigger('reset').unwrap(); else // normal reset behavior for other sane browsers $input.val(''); ,

So you can call the above method wherever you want to clear your file input. For example:

<input type="file" id="fileInput"/> <button id="clear">Clear</button> <script> $fileInput = $('#fileInput'); $("#clear").on("click", function () clearFileInput($fileInput); ); </script>

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/advanced-upload-using-yii2-fileinput-widget/

Advanced upload using Yii2 FileInput widget

The web tip on uploading file in Yii 2 using FileInput widget has seen a lot of web hits. As a result, this in turn has generated more feedback and queries by many users (both offline and online). As a request by many folks, I am creating a follow-up web tip to the earlier web tip. In the former web tip, you learnt how to create a new record and upload a file using the FileInput widget by Krajee. This web tip expands the scenario for advanced usage and include the following additional functionalities:

optimize and enhance the model

update the record and replace the saved image.

delete the saved image

The following parameters are useful to setup for global access:

Yii::$app->params['uploadPath'] as suggested in the earlier web tip. This will store the server path for all your file uploads. You can copy and store a default placeholder image in this folder, to display an image, whenever no file is uploaded e.g. default_user.jpg.

Yii::$app->params['uploadUrl']. This will store the Url pointing to server location for your file uploads. Note your web server must be configured to allow the uploadPath access.

For example, your configuration can be:

Yii::$app->params['uploadPath'] = Yii::$app->basePath . '/uploads/'; Yii::$app->params['uploadUrl'] = Yii::$app->urlManager->baseUrl . '/uploads/';

About FileInput

The FileInput widget is based on the bootstrap-fileinput plugin by Krajee. Here are the advanced steps for you to configure the widget for upload:

Model

It is recommended to optimize code for your model and controller. Instead of overloading the controller, we will now enhance our model code from the previous web tip. We will now include these new additional methods:

getImageFile: Will return the uploaded/stored image file name with complete path

getImageUrl: Will return the uploaded/stored image url accessible via browser front end.

uploadImage: Will process upload of the image and return a yii\web\UploadedFile instance. If no image was uploaded this method will return false.

deleteImage: Will process deletion of already existing image in database and return true if image file was found – else return false.

Accordingly set any additional model scenarios or validation rules for your attributes as needed.

namespace common\models; use yii\db\ActiveRecord; /** * Class Person * @package common\models * @property int $id * @property string $name * @property array $avatar * @property array $filename */ class Person extends ActiveRecord /** * @var mixed image the attribute for rendering the file input * widget for upload on the form */ use yii\web\UploadedFile; public $image; public function rules() return [ [['name', 'avatar', 'filename', 'image'], 'safe'], [['image'], 'file', 'extensions'=>'jpg, gif, png'], ]; /** * fetch stored image file name with complete path * @return string */ public function getImageFile() return isset($this->avatar) ? Yii::$app->params['uploadPath'] . $this->avatar : null; /** * fetch stored image url * @return string */ public function getImageUrl() // return a default image placeholder if your source avatar is not found $avatar = isset($this->avatar) ? $this->avatar : 'default_user.jpg'; return Yii::$app->params['uploadUrl'] . $avatar; /** * Process upload of image * * @return mixed the uploaded image instance */ public function uploadImage() // get the uploaded file instance. for multiple file uploads // the following data will return an array (you may need to use // getInstances method) $image = UploadedFile::getInstance($this, 'image'); // if no image was uploaded abort the upload if (empty($image)) return false; // store the source file name $this->filename = $this->name; $ext = end((explode(".", $image->name))); // generate a unique file name $this->avatar = Yii::$app->security->generateRandomString().".$ext"; // the uploaded image instance return $image; /** * Process deletion of image * @var the location of file name with path * * @return boolean the status of deletion */ public function deleteImage() $file = $this->getImageFile(); // check if file exists on server if (empty($file)

Controller

Great. With the model now ready, your controller code can be leaner. Setup your controller action for create, update, and delete.

use Yii; use common\models\Person; use yii\web\UploadedFile; class PersonController extends \yii\web\Controller /** * Creates a new Person model. * If creation is successful, the browser will be redirected to the 'view' page. * @return mixed */ public function actionCreate() $model = new Person; if ($model->load(Yii::$app->request->post())) // process uploaded image file instance $image = $model->uploadImage(); if ($model->save()) // upload only if valid uploaded file instance found if ($image !== false) $path = $model->getImageFile(); $image->saveAs($path); return $this->redirect(['view', 'id'=>$model->id]); else // error in saving model return $this->render('create', [ 'model'=>$model, ]); /** * Updates an existing Person model. * If update is successful, the browser will be redirected to the 'view' page. * @param integer $id * @return mixed */ public function actionUpdate($id) $model = $this->findModel($id); $oldFile = $model->getImageFile(); $oldAvatar = $model->avatar; $oldFileName = $model->filename; if ($model->load(Yii::$app->request->post())) // process uploaded image file instance $image = $model->uploadImage(); // revert back if no valid file instance uploaded if ($image === false) $model->avatar = $oldAvatar; $model->filename = $oldFileName; if ($model->save()) // upload only if valid uploaded file instance found if ($image !== false && unlink($oldFile)) // delete old and overwrite $path = $model->getImageFile(); $image->saveAs($path); return $this->redirect(['view', 'id'=>$model->_id]); else // error in saving model return $this->render('update', [ 'model'=>$model, ]); /** * Deletes an existing Person model. * If deletion is successful, the browser will be redirected to the 'index' page. * @param integer $id * @return mixed */ public function actionDelete($id) $model = $this->findModel($id); // validate deletion and on failure process any exception // e.g. display an error message if ($model->delete()) if (!$model->deleteImage()) Yii::$app->session->setFlash('error', 'Error deleting image'); return $this->redirect(['index']); /** * Finds the Person model based on its primary key value. * If the model is not found, a 404 HTTP exception will be thrown. * @param integer $id * @return Person the loaded model * @throws NotFoundHttpException if the model cannot be found */ protected function findModel($id) if (($model = Person::findOne($id)) !== null) return $model; else throw new NotFoundHttpException('The requested page does not exist.');

View

Your view pretty much remains the same as earlier except that you now add functionality for preview, update, and delete. You may also wish to add any error block to display any error messages.

Edit your _form.php or your other view file where you are rendering the create and image upload form.

use kartik\helpers\Html; // or yii\helpers\Html use kartik\widgets\ActiveForm; // or yii\widgets\ActiveForm use kartik\widgets\FileInput; $form = ActiveForm::begin([ 'options'=>['enctype'=>'multipart/form-data'] // important ]); echo $form->field($model, 'filename'); // display the image uploaded or show a placeholder // you can also use this code below in your `view.php` file $title = isset($model->filename) && !empty($model->filename) ? $model->filename : 'Avatar'; echo Html::img($model->getImageUrl(), [ 'class'=>'img-thumbnail', 'alt'=>$title, 'title'=>$title ]); // your fileinput widget for single file upload echo $form->field($model, 'image')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*'], ]); /** * uncomment for multiple file upload echo $form->field($model, 'image[]')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*', 'multiple'=>true], ]); */ // render the submit button echo Html::submitButton($model->isNewRecord ? 'Upload' : 'Update', [ 'class'=>$model->isNewRecord ? 'btn btn-success' : 'btn btn-primary'] ); // render a delete image button if (!$model->isNewRecord) echo Html::a('Delete', ['/person/delete', 'id'=>$model->id], ['class'=>'btn btn-danger']); ActiveForm::end();

Thus, you should be able to use the FileInput for advanced cases of upload. Basically, completely manage your files for insert, update, and delete. As mentioned earlier, in case you are using multiple file input, the $image variable in controller will return an array of files, which you must loop through. Its important for multiple file uploads to follow an array naming convention as mentioned in this web tip.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/relational-data-fields-display-edit-yii2-detail-view-extension/

Relational data fields display and edit with the yii2-detail-view extension

If you have read this web tip you would be aware of the yii2-detail-view extension and how it offers you an easy way to EDIT and VIEW your model data, toggle these modes, and other features. You can read the extension documentation and/or view a demo of this extension, to understand usage.

Now if you are using the yii2-detail-view to display relational data, you must note that there is a slight difference in usage of attributes than in the default yii detail-view.

Scenario

For example, let’s consider you want to display the model Book in the detail view, which has an attribute author_id. The Book model has a relation named author to the author.name field linked via author_id.

Behavior in `yii\widgets\DetailView

For the core framework yii\widgets\DetailView, you can simply have the DetailView attributes set like below

'attributes' => [ 'id', 'book_name', 'author.name' ]

Behavior in `kartik\detail\DetailView

However, in the yii2-detail-view extension, a configuration like above will throw the following exception.

Exception: The attribute ‘author.name’ is invalid. You cannot directly pass relational attributes in string format within ‘\kartik\widgets\DetailView’. Instead use the array format with ‘attribute’ property set to base field, and the ‘value’ property returning the relational data.

Reasoning & Solution

The yii2-detail-view is built to also display attributes for editing, and there is no base table attribute in the model called author.name. The solution to this is simple. Always use array format to pass such relational attributes. So the simple configuration for the kartik\detail\DetailView is the following:

'attributes' => [ 'id', 'book_name', [ 'attribute'=>'author_id', 'value'=>$model->author->name, 'type'=>DetailView::INPUT_SELECT2, 'widgetOptions'=>[ 'data'=>ArrayHelper::map(Author::find()->orderBy('name')->asArray()->all(), 'id', 'name'), ] ]

Now that should resolve both the VIEW and EDIT issues for you. With the above configuration, users would still see the author name instead of author_id in both VIEW and EDIT modes. In the EDIT mode, the above configuration will internally use the author_id to save data, but display the author names as a dropdown list using the \kartik\widgets\Select2 widget.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/model-range-validation-with-yii2-field-range-extension/

Model range validation along with yii2-field-range extension

The yii2-field-range extension enables you to easily setup ActiveField range fields with Bootstrap styling. You basically can setup two attributes joined together like a single field with combined validation error block.

Here are a few tips on configuring model validation rules for your two attributes using this extension:

Validation Scenario 1: Field 1 should not equal Field 2

Let’s consider the first example on the extension demo site. You have two attributes configured with a dropDownList named start_place and end_place. Your start_place and end_place should not be same when selected either way. In order to do this, setup the following validation rules in your model:

public function rules() return [ [ ['start_place'], 'compare', 'compareAttribute'=>'end_place', 'operator'=>'!=', 'skipOnEmpty'=>true ], [ ['end_place'], 'compare', 'compareAttribute'=>'start_place', 'operator'=>'!=' ], ];

As seen, the skipOnEmpty for start_place allows the validation to be deferred until end_place is entered.

Validation Scenario 2: Attribute 2 cannot be less than Attribute 1

Similarly, let’s look at the second example in the extension demo site. You have two attributes configured: from_amount and to_amount. For this scenario, let’s say following rules are needed:

Both amounts are required

Both amounts must be numeric/decimals.

Both amounts cannot exceed zero.

The to_amount cannot be less than from_amount.

To achieve all of the above, setup the following validation rules in your model:

public function rules() return [ [['from_amount', 'to_amount'], 'required'], [['from_amount', 'to_amount'], 'double', 'min'=>0], [ ['from_amount'], 'compare', 'compareAttribute'=>'to_amount', 'operator'=>'<=', 'skipOnEmpty'=>true ], [ ['to_amount'], 'compare', 'compareAttribute'=>'from_amount', 'operator'=>'>=' ], ];

Hope that helps. Enjoy using the extension. If you found other interesting ways of using the yii2-field-range extension OR used other validation rules, it would be nice to share your experience.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/save-display-date-time-fields-different-formats-yii2/

Save and Display Date Time Fields in different formats in Yii2

You would find having a very common need to control your date inputs in most Yii Projects. Your database needs a specific format to store date fields, while you may want to display it in different formats to the users on forms and other views.

How do you manage this situation easily of controlling global formats for date to save and display across your Yii application?

Here are a few pointers:

Tip 1: Use a prebuilt extension

One of the direct and easiest ways is to use yii2-datecontrol extension by Krajee. This extension allows you to setup global formats for DATE FIELDS separately for save and view on the form. You can use this for most of the FORM based interfaces, as it allows you to use various INPUTS and WIDGETS. The extension includes out of the box support for the enhanced DatePicker, DateTimePicker, and TimePicker widgets from yii2-widgets. Refer a complete demo.

Tip 2: Use TimeStamp Behavior for auto-saving date/time records

For cases, where you want to auto-save the date time field like created_on and updated_on, you can use the \yii\behaviors\TimeStampBehavior. You can configure the behavior to automatically save timestamp fields on INSERT AND UPDATE events by default – or you can add additional events.

Some additional tips when using this behavior:

Tip 2.1: Format for saving

You can choose to save a specific timestamp value using a predefined format. So let’s take you have defined your datetime field in the backend as an INTEGER and you want to save it as a integer. You can set the behavior like this:

public function behaviors() return [ 'timestamp' => [ 'class' => TimestampBehavior::className(), 'attributes' => [ ActiveRecord::EVENT_BEFORE_INSERT => 'creation_time', ActiveRecord::EVENT_BEFORE_UPDATE => 'update_time', ], 'value' => function() return date('U'); // unix timestamp , ], ];

Tip 2.2: Save Timestamp beyond INSERT or UPDATE events

You may want to save the timestamp for custom scenarios. Let’s say you want to update creation_time for a specific controller action. In that situation you can trigger the timestamp update for your specific attribute by using the following approach:

$model->timestamp->touch('creation_time');

Tip 3: Controlling global formats

You can configure yii\i18n\formatter to control your global date formats for display for your locale. You can set something like this in your config file that you can access across

'formatter' => [ 'class' => 'yii\i18n\Formatter', 'dateFormat' => 'd-M-Y', 'datetimeFormat' => 'd-M-Y H:i:s', 'timeFormat' => 'H:i:s', ]

Then you can display your date times anywhere using the formatter specified formats:

echo Yii::t('app', 'Today is 0, date', $yourTimeStampAttr);

Tip 4: Easily convert any attribute format before saving to db

In case you do not wish to use the extension as mentioned in Tip # 1, you can create your own global formats for save. Just create a helper class like this:

class Setup const DATE_FORMAT = 'Y-m-d'; const DATETIME_FORMAT = 'Y-m-d H:i:s'; const TIME_FORMAT = 'H:i:s'; public static function convert($dateStr, $type='date', $format = null) if ($type === 'datetime') $fmt = ($format == null) ? self::DATETIME_FORMAT : $format; elseif ($type === 'time') $fmt = ($format == null) ? self::TIME_FORMAT : $format; else $fmt = ($format == null) ? self::DATE_FORMAT : $format; return Yii::$app->formatter->asDate($dateStr, $fmt);

Then anywhere else (like controller/model) you can access this function to convert any input date/time string for saving to database.

$model->dateAttr = Setup::convert($model->dateAttr); $model->datetimeAttr = Setup::convert($model->datetimeAttr, 'datetime');

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/advanced-bootstrap-styled-form-layouts-yii2-field-range-extension/

Advanced Bootstrap styled form layouts with yii2-field-range extension

This wiki will explain how you can use the yii2-field-range extension with multiple Bootstrap form layouts – vertical or horizontal.

About yii2-field-range

The yii2-field-range extension extension allows you to easily setup ActiveField range fields with Bootstrap 3 addons markup and more. You can thus setup the form attributes joined together like a single field with a bootstrap addon separating the two. In addition, it enables you to display the field validation error messages as one single block instead of separate validation errors for two fields.

Vertical Form Layout

By default the widget supports the bootstrap 3 vertical form layout. In order to display the label and the field range block in a vertical form layout, you need to just provide the following properties to the widget:

form

label

This will render the widget correctly for any widget extended from yii\widgets\ActiveForm including kartik\widgets\ActiveForm or yii\bootstrap\ActiveForm.

Horizontal Form Layout

Rendering the Bootstrap 3 horizontal form layout with a field range is always tricky, since there are more than two fields joined together, and the alignment is not always perfect. However, the yii2-field-range extension has been enhanced to support horizontal form layout by default for \kartik\widgets\ActiveForm and allows you to easily define your markup for other form widgets based on yii\widgets\ActiveForm.

Your options for a horizontal form layout are:

Option 1 – Using \kartik\widgets\ActiveForm

This is the most straightforward direct approach. An example of using the FieldRange widget with date input validation using kartik\widgets\DateControl in a horizontal form layout is mentioned below:

use kartik\widgets\ActiveForm; $form = ActiveForm::begin([ 'type' => ActiveForm::TYPE_HORIZONTAL, 'formConfig' => [ 'labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL ], ]); echo $form->field($model, 'username'); echo FieldRange::widget([ 'form' => $form, 'model' => $model, 'label' => 'Enter date range', 'attribute1' => 'from_date_1', 'attribute2' => 'to_date_1', 'type' => FieldRange::INPUT_WIDGET, 'widgetClass' => DateControl::classname(), 'widgetOptions1' => [ 'saveFormat'=>'U', 'options'=>[ 'pluginOptions' => ['autoclose' => true,], ], ], 'widgetOptions2' => [ 'saveFormat'=>'U', 'options'=>[ 'pluginOptions' => ['autoclose' => true,], ], ], ]); ActiveForm::end();

Option 2 – Using other ActiveForm widgets

If you are using the yii\bootstrap\ActiveForm or yii\widgets\ActiveForm, there is no inbuilt option in the widget, but you can easily render the horizontal layout using the following approach. Basically you set useAddons property to false, and setup the CSS classes for horizontal layout, within labelOptions, widgetContainer, and errorContainer as shown below:

<?php use yii\widgets\ActiveForm; $form = ActiveForm::begin(['options'=>['class'=>'form-horizontal']]); ?> <?= FieldRange::widget([ 'form' => $form, 'model' => $model, 'useAddons' => false, 'label'=>'Enter date range', 'labelOptions'=>['class'=>'col-sm-3'], 'widgetContainer'=>['class'=>'col-sm-9'], 'errorContainer'=>['class'=>'col-sm-offset-3 col-sm-9'], 'attribute1' => 'from_date_1', 'attribute2' => 'to_date_1', 'type' => FieldRange::INPUT_WIDGET, 'widgetClass' => DateControl::classname(), 'widgetOptions1' => [ 'saveFormat'=>'U', 'options'=>[ 'pluginOptions' => ['autoclose' => true,], ], ], 'widgetOptions2' => [ 'saveFormat'=>'U', 'options'=>[ 'pluginOptions' => ['autoclose' => true,], ], ], ]);?> <?php ActiveForm::end(); ?>

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/overcoming-removal-ajaxlink-client-helpers-yii-2-0/

Overcoming removal of ajaxlink & client helpers in Yii 2.0

With Yii Framework 2.0, one of the many changes, that Yii 1.x developers will face is removal of all client helpers and revamp of the CClientScript functionality. For example no more CHtml::ajaxLink or Html::ajaxLink. How do you cater to such requirements in Yii 2.0?

Reasoning

One of the critical changes in Yii 2 framework design that you will notice versus Yii 1.x, is that Yii 2 focuses on moving the entire presentational layer to a new View object. With this change, the Yii 2 team has also eliminated most of the client related functionality embedded in PHP classes from the core framework. Thus it has made the code cleaner to use. Hence, helpers like ajaxLink are no more available. This helps you manage your client assets better, improves performance, and control them better.

Solution

You can easily create and combine all such client helpers into separate JS files, based on your need. Use the new AssetBundle and AssetManager functionality with the View object in Yii2, to manage these assets and how they are loaded.

Alternatively, inline assets (JS/CSS) can be registered at runtime from within the View. For example you can clearly simulate the ajaxLink feature using an inline javascript as shown below. It is however recommended you merge client code (JS/CSS) into separate JS/CSS files. You can load these JS files in your view or view layout through the AssetBundle. Note there is no more need of a CClientScript anymore.

$script = <<< JS $('#el').on('click', function(e) $.ajax( url: '/path/to/action', data: id: '<id>', 'other': '<other>', success: function(data) // process data ); ); JS; $this->registerJs($script, $position); // where $position can be View::POS_READY (the default), // or View::POS_HEAD, View::POS_BEGIN, View::POS_END

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/handling-tabular-data-loading-validation-yii-2/

Handling tabular data loading and validation in Yii 2

How do you read and handle tabular data submission via form in Yii framework 2.0? Sometimes we want to collect user input in a batch mode. That is, the user can enter the information for multiple model instances and submit them all at once. We call this tabular input because the input fields are often presented in an HTML table.

Tabular Input Solution

If you are coming over from Yii 1 – the concepts of tabular data handling remain the same as mentioned in the Yii 1.x guide – collecting tabular input section.

The only differences in Yii 2 is that its much simpler due to available functions in the Model class for loading and validating models.

Option 1: Use a prebuilt solution

You can use a prebuilt solution to render and manage tabular data. You can use the TabularForm widget from Krajee’s yii2-builder extension package. Refer details of the TabularForm widget here.

Option 2: Doing it yourself

You can use the same concepts as mentioned in the guide link mentioned before – here are the changes you need to do for Yii 2:

To work with tabular input, we first need to create or populate an array of model instances, depending on whether we are inserting or updating the data. We then retrieve the user input data from the $_POST variable and assign it to each model. A slight difference from single model input is that we retrieve the input data using $_POST['ModelClass'][$i] instead of $_POST['ModelClass'].

Controller

Your controller can include a batch update action as shown below:

use yiibaseModel; public function actionBatchUpdate() // retrieve items to be updated in a batch mode // assuming each item is of model class 'Item' $items=$this->getItemsToUpdate(); if (Model::loadMultiple($items, Yii::$app->request->post()) && Model::validateMultiple($items)) $count = 0; foreach ($items as $item) // populate and save records for each model if ($item->save()) // do something here after saving $count++; Yii::$app->session->setFlash('success', "Processed $count records successfully."); return $this->redirect(['index']); // redirect to your next desired page else return $this->render('update', [ 'items' => $items, ]);

View

A sample code for your view file:

<div class="form"> <?php $form = ActiveForm::begin(); ?> <table> <tr><th>Name</th><th>Price</th><th>Count</th><th>Description</th></tr> <?php foreach($items as $i=>$item): ?> <tr> <td><?= $form->field($item,"[$i]name"); ?></td> <td><?= $form->field($item,"[$i]price"); ?></td> <td><?= $form->field($item,"[$i]count"); ?></td> <td><?= $form->field($item,"[$i]description"); ?></td> </tr> <?php endforeach; ?> </table> <?= Html::submitButton('Save'); ?> <?php ActiveForm::end(); ?> </div><!-- form -->

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/filter-sort-summary-data-gridview-yii-2-0/

Filter & Sort by Summary Data in GridView Yii 2.0

This web-tip explains how to add summary data from related models into your Yii Framework 2.0 gridview with filtering and sorting by the summary columns.

Note: This is a variation to this web-tip which filters and sorts by related fields. In this web-tip, we will see specifically how to pull in SUMMARY data from related tables.

Example Structure

Let’s say you have the following tables for Customer and Order. A customer can have multiple orders. Your objective is to display a gridview for the Customer with an order amount summary from Order table. You should be able to also sort and filter/search by order amount.

/* Customers */ CREATE TABLE `tbl_customer` ( `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'Unique customer id', `name` VARCHAR(150) NOT NULL COMMENT 'Customer name', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Order master table'; /* Orders */ CREATE TABLE `tbl_order` ( `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'Unique order id', `created_on` DATE NOT NULL COMMENT 'Order creation date', `details` VARCHAR(200) COMMENT 'Order Details', `amount` DECIMAL(5,2) NOT NULL COMMENT 'Order Amount', `customer_id` INT(11) COMMENT 'Related customer id', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Order transactions table'; /* Foreign Key */ ALTER TABLE `tbl_order` ADD CONSTRAINT `tbl_order_FK1` FOREIGN KEY (`customer_id`) REFERENCES `tbl_customer` (`id`) , ADD INDEX `tbl_order_FK1` (`customer_id` ASC);

Prerequisites

Generate your models and CRUD via Gii. You should now have the following model classes generated:

Customer: The base model for tbl_person

CustomerSearch: The search and filtering model for Customer within gridview.

Order: The base model for tbl_order.

OrderSearch: The search and filtering model for Order within gridview.

Gridview Scenarios

Let’s consider the following scenarios, that you want to display in the GridView within the index view generated for Customer.

Scenario 1: Display Order Amount Summary for each customer (and allow filter and sort)

An example describing how to add a OrderAmount column within the Customer grid with sorting and filtering. This will be a summary of amount field from tbl_order for each customer_id.

Scenario 1 Steps

STEP 1: Implement a stat relation to get summary for OrderAmount.

Setup base model

/** * Order amount for customer */ public function getOrderAmount() return $this ->hasMany(Order::className(), ['customer_id'=>'id']) ->sum('amount'); /* Your model attribute labels */ public function attributeLabels() return [ /* Your other attribute labels */ 'orderAmount'=>Yii::t('app', 'Order Amount') ];

STEP 2: Add an attribute orderAmount to your model CustomerSearch and configure your rules.

Setup search model

/* your calculated attribute */ public $orderAmount; /* setup rules */ public function rules() return [ /* your other rules */ [['orderAmount'], 'safe'] ]; /** * setup search function for filtering and sorting * based on `orderAmount` field */ public function search($params) $query = Customer::find(); $subQuery = Order::find() ->select('customer_id, SUM(amount) as order_amount') ->groupBy('customer_id'); $query->leftJoin([ 'orderSum'=>$subQuery ], 'orderSum.customer_id = id'); $dataProvider = new ActiveDataProvider([ 'query'=>$query, ]); /** * Setup your sorting attributes * Note: This is setup before the $this->load($params) * statement below */ $dataProvider->setSort([ 'attributes'=>[ 'id', 'name', 'orderAmount'=>[ 'asc'=>['orderSum.order_amount'=>SORT_ASC], 'desc'=>['orderSum.order_amount'=>SORT_DESC], 'label'=>'Order Name' ] ] ]); if (!($this->load($params) && $this->validate())) return $dataProvider; $query->andFilterWhere([ 'id'=>$this->id, ]); $query->andFilterWhere(['like', 'name', $this->name]); // filter by order amount $query->andWhere(['orderSum.order_amount'=>$this->orderAmount]); return $dataProvider;

STEP 3: Configure your gridview columns in your view index file

Setup view file

echo GridView::widget([ 'dataProvider'=>$dataProvider, 'filterModel'=>$searchModel, 'columns'=>[ ['class'=>'yii\grid\SerialColumn'], 'id', 'fullName', 'orderAmount', ['class'=>'yii\grid\ActionColumn'], ] ]);

Voila, yes now, your orderAmount column as well in the grid view should be available for sort and filtering.

Potential Improvements

Even though I created a getter (stat relation), I think there is a scope to improve the getOrderAmount getter function in model by directly getting the sum amount.

There is a possibility probably to even avoid writing a getOrderAmount getter function in model and try to fetch the initial order amount summary based on the eager load with subquery.

Some amount of query optimization with the relational data is possible instead of a left join or when working with summary columns.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/filter-sort-calculated-related-fields-gridview-yii-2-0/

Filter & Sort by calculated/related fields in GridView Yii 2.0

This web-tip explains how to add calculated fields into your Yii Framework 2.0 GridView with filtering and sorting.

Note: If you are looking at filtering and sorting by SUMMARY data from related tables, then refer this web-tip.

Example Structure

Let’s say you have the following tables:

/* Countries */ CREATE TABLE `tbl_country` ( `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'Unique country id', `country_name` VARCHAR(150) NOT NULL COMMENT 'Country name', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Country master table'; /* Persons */ CREATE TABLE `tbl_person` ( `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'Unique person id', `first_name` VARCHAR(60) NOT NULL COMMENT 'First name', `last_name` VARCHAR(60) NOT NULL COMMENT 'Last name', `country_id` INT(11) COMMENT 'Residing Country', `parent_id` INT(11) COMMENT 'Parent person identifier', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Person master table'; /* Foreign Key */ ALTER TABLE `tbl_person` ADD CONSTRAINT `tbl_person_FK1` FOREIGN KEY (`country_id`) REFERENCES `tbl_country` (`id`) , ADD INDEX `tbl_person_FK1` (`country_id` ASC);

Prerequisites

Generate your models and CRUD via Gii. You should now have the following model classes generated:

Person: The base model for tbl_person

PersonSearch: The search and filtering model for Person within gridview.

Country: The base model for tbl_country.

CountrySearch: The search and filtering model for Country within gridview.

Gridview Scenarios

Let’s consider 2 scenarios you want to display in the GridView within the index view generated for Person.

Scenario 1: Calculated field from same table

An example describing how to add a fullName column within the Person grid with sorting and filtering. The field fullName will be concatenation of first_name and last_name separated by space.

Scenario 2: Calculated field from related table

An example describing how to add a countryName column within the Person grid with sorting and filtering. The field countryName will be generated based on country_id using foreign key relation with the tbl_country.

Scenario 3: Self Join to the same table

An example describing how to add a parentName column within the Person grid with sorting and filtering. The field parentName will be the fullName based on self join of the parent_id column with id in the tbl_person.

Scenario 1 Steps

STEP 1: Add a getter function to your base Person model:

Setup base model

/* Getter for person full name */ public function getFullName() return $this->first_name . ' ' . $this->last_name; /* Your model attribute labels */ public function attributeLabels() return [ /* Your other attribute labels */ 'fullName'=>Yii::t('app', 'Full Name') ];

STEP 2: Add an attribute fullName to your model PersonSearch and configure your rules.

Setup search model

/* your calculated attribute */ public $fullName; /* setup rules */ public function rules() return [ /* your other rules */ [['fullName'], 'safe'] ]; /** * setup search function for filtering and sorting * based on fullName field */ public function search($params) $query = Person::find(); $dataProvider = new ActiveDataProvider([ 'query'=>$query, ]); /** * Setup your sorting attributes * Note: This is setup before the $this->load($params) * statement below */ $dataProvider->setSort([ 'attributes'=>[ 'id', 'fullName'=>[ 'asc'=>['first_name'=>SORT_ASC, 'last_name'=>SORT_ASC], 'desc'=>['first_name'=>SORT_DESC, 'last_name'=>SORT_DESC], 'label'=>'Full Name', 'default'=>SORT_ASC ], 'country_id' ] ]); if (!($this->load($params) && $this->validate())) return $dataProvider; $this->addCondition($query, 'id'); $this->addCondition($query, 'first_name', true); $this->addCondition($query, 'last_name', true); $this->addCondition($query, 'country_id'); /* Setup your custom filtering criteria */ // filter by person full name $query->andWhere('first_name LIKE "%' . $this->fullName . '%" ' . 'OR last_name LIKE "%' . $this->fullName . '%"' ); return $dataProvider;

STEP 3: Configure your gridview columns in your view index file

Setup view file

echo GridView::widget([ 'dataProvider'=>$dataProvider, 'filterModel'=>$searchModel, 'columns'=>[ ['class'=>'yii\grid\SerialColumn'], 'id', 'fullName', ['class'=>'yii\grid\ActionColumn'], ] ]);

Voila, your fullName column in the grid view should be available for sort and filtering.

Scenario 2 Steps

STEP 1: Ensure your Person model has a relation defined to the Country model. You can also implement a getter for CountryName.

Setup base model

/* ActiveRelation */ public function getCountry() return $this->hasOne(Country::className(), ['id'=>'country_id']); /* Getter for country name */ public function getCountryName() return $this->country->country_name; /* Your model attribute labels */ public function attributeLabels() return [ /* Your other attribute labels */ 'fullName'=>Yii::t('app', 'Full Name'), 'countryName'=>Yii::t('app', 'Country Name') ];

STEP 2: Add an attribute countryName to your model PersonSearch and configure your rules.

Setup search model

/* your calculated attribute */ public $countryName; /* setup rules */ public function rules() return [ /* your other rules */ [['countryName'], 'safe'] ]; /** * setup search function for filtering and sorting * based on `fullName` and `countryName` field */ public function search($params) $query = Person::find(); $dataProvider = new ActiveDataProvider([ 'query'=>$query, ]); /** * Setup your sorting attributes * Note: This is setup before the $this->load($params) * statement below */ $dataProvider->setSort([ 'attributes'=>[ 'id', 'fullName'=>[ 'asc'=>['first_name'=>SORT_ASC, 'last_name'=>SORT_ASC], 'desc'=>['first_name'=>SORT_DESC, 'last_name'=>SORT_DESC], 'label'=>'Full Name', 'default'=>SORT_ASC ], 'countryName'=>[ 'asc'=>['tbl_country.country_name'=>SORT_ASC], 'desc'=>['tbl_country.country_name'=>SORT_DESC], 'label'=>'Country Name' ] ] ]); if (!($this->load($params) && $this->validate())) /** * The following line will allow eager loading with country data * to enable sorting by country on initial loading of the grid. */ $query->joinWith(['country']); return $dataProvider; $this->addCondition($query, 'id'); $this->addCondition($query, 'first_name', true); $this->addCondition($query, 'last_name', true); $this->addCondition($query, 'country_id'); /* Add your filtering criteria */ // filter by person full name $query->andWhere('first_name LIKE "%' . $this->fullName . '%" ' . 'OR last_name LIKE "%' . $this->fullName . '%"' ); // filter by country name $query->joinWith(['country'=>function ($q) $q->where('tbl_country.country_name LIKE "%' . $this->countryName . '%"'); ]); return $dataProvider;

STEP 3: Configure your gridview columns in your view index file

Setup view file

echo GridView::widget([ 'dataProvider'=>$dataProvider, 'filterModel'=>$searchModel, 'columns'=>[ ['class'=>'yii\grid\SerialColumn'], 'id', 'fullName', 'countryName', ['class'=>'yii\grid\ActionColumn'], ] ]);

Voila, yes now, your countryName column as well in the grid view should be available for sort and filtering.

Scenario 3 Steps

STEP 1: Ensure your Person model has a self join relation defined to itself. You can also implement a getter for ParentName.

Setup base model

/* ActiveRelation */ public function getParent() return $this->hasOne(self::classname(), ['parent_id'=>'id'])-> from(self::tableName() . ' AS parent'); /* Getter for person full name */ public function getFullName() return $this->first_name . ' ' . $this->last_name; /* Getter for parent name */ public function getParentName() return $this->parent->fullName; /* Your model attribute labels */ public function attributeLabels() return [ /* Your other attribute labels */ 'parentName'=>Yii::t('app', 'Parent Name'), 'fullName'=>Yii::t('app', 'Full Name') ];

STEP 2: Add an attribute parentName to your model PersonSearch and configure your rules.

Setup search model attributes for search

/* your calculated attribute */ public $parentName; /* setup rules */ public function rules() return [ /* your other rules */ [['parentName'], 'safe'] ]; /** * setup search function for filtering and sorting * based on `parentName` field */ public function search($params) $query = Person::find(); $dataProvider = new ActiveDataProvider([ 'query'=>$query, ]); /** * Setup your sorting attributes * Note: This is setup before the $this->load($params) * statement below */ $dataProvider->setSort([ 'attributes'=>[ 'id', 'parentName'=>[ 'asc'=>[ 'parent.first_name'=>SORT_ASC, 'parent.last_name'=>SORT_ASC ], 'desc'=>[ 'parent.first_name'=>SORT_DESC, 'parent.last_name'=>SORT_DESC ], 'label'=>'Parent Name', 'default'=>SORT_ASC ], 'fullName'=>[ 'asc'=>['first_name'=>SORT_ASC, 'last_name'=>SORT_ASC], 'desc'=>['first_name'=>SORT_DESC, 'last_name'=>SORT_DESC], 'label'=>'Full Name', 'default'=>SORT_ASC ], 'country_id' ] ]); if (!($this->load($params) && $this->validate())) /** * The following line will allow eager loading with parent data * to enable sorting by parent on initial loading of the grid. */ $query->joinWith(['parent']); return $dataProvider; $this->addCondition($query, 'id'); $this->addCondition($query, 'first_name', true); $this->addCondition($query, 'last_name', true); $this->addCondition($query, 'country_id'); $this->addCondition($query, 'parent_id'); /* Add your filtering criteria */ // filter by parent name $query->joinWith(['parent'=>function ($q) $q->where('parent.first_name LIKE "%' . $this->parentName . '%" ' . 'OR parent.last_name LIKE "%' . $this->parentName . '%"'); ]); return $dataProvider;

STEP 3: Edit your addCondition function in the model PersonSearch

Setup search model condition

protected function addCondition($query, $attribute, $partialMatch = false) if (($pos = strrpos($attribute, '.')) !== false) $modelAttribute = substr($attribute, $pos + 1); else $modelAttribute = $attribute; $value = $this->$modelAttribute; if (trim($value) === '') return; /* * The following line is additionally added for right aliasing * of columns so filtering happen correctly in the self join */ $attribute = "tbl_person.$attribute"; if ($partialMatch) $query->andWhere(['like', $attribute, $value]); else $query->andWhere([$attribute=>$value]);

STEP 4: Configure your gridview columns in your view index file

Setup view file

echo GridView::widget([ 'dataProvider'=>$dataProvider, 'filterModel'=>$searchModel, 'columns'=>[ ['class'=>'yii\grid\SerialColumn'], 'id', 'fullName', 'parentName', ['class'=>'yii\grid\ActionColumn'], ] ]);

Voila, yes now, your parentName column as well in the grid view should be available for sort and filtering.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/nested-inline-field-layout-yii2-bootstrap-horizontal-forms/

Nested inline field layout in Yii2 Bootstrap horizontal forms

Are you using the Bootstrap 3 form styles with Yii 2 Active Forms? Have you faced problems in displaying complex layouts which needs you to display multiple inline form fields in a single row, within bootstrap horizontal forms. Then read on.

This article will explain how you can use the enhanced \kartik\widgets\ActiveForm and \kartik\widgets\ActiveField extensions to achieve complex form layouts.

Step 1: Your Horizontal Form Layout

Rendering the Bootstrap 3 horizontal form layout is simple. You just select the type (and optionally your form layout configuration) as shown below

use kartikwidgetsActiveForm; $form = ActiveForm::begin([ 'type'=>ActiveForm::TYPE_HORIZONTAL, 'formConfig'=>['labelSpan'=>3, 'deviceSize'=>ActiveForm::SIZE_SMALL], ]); // your fields ActiveForm::end();

Step 2: Rendering Inline Fields

The complex part is displaying multiple fields on the same row of the horizontal form. The \kartik\widget\ActiveForm and \kartik\widget\ActiveField includes a couple of tweaks for you to achieve this in combination with simple HTML markup. Basically you need to do the following

Step 2a: Enclose all your inline fields inside a container with form-group kv-fieldset-inline class.

Step 2b: Setup showLabels property to false for each active field.

Step 2c: Use Html::activeLabel or Html::label to generate your field labels.

Tip: Instead of setting showLabels at each active field level, you can also set a showLabels property at the kartik\widgets\ActiveForm configuration level within the formConfig array. This will help you set display of labels to false for all active fields within the form.

For example

<?php $form = ActiveForm::begin([ 'type'=>ActiveForm::TYPE_HORIZONTAL, 'formConfig'=>['labelSpan'=>3, 'deviceSize'=>ActiveForm::SIZE_SMALL], ]); ?> <div class="form-group kv-fieldset-inline"> <?= Html::activeLabel($model, 'from_date', [ 'label'=>'Operation Dates', 'class'=>'col-sm-2 control-label' ]); ?> <div class="col-sm-2"> <?= $form->field($model, 'from_date',[ 'showLabels'=>false ])->textInput(['placeholder'=>'From Date']); ?> </div> <div class="col-sm-2"> <?= $form->field($model, 'to_date',[ 'showLabels'=>false ])->textInput(['placeholder'=>'To Date']); ?> </div> <?= Html::activeLabel($model, 'begin_date', [ 'label'=>'Experiment Dates', 'class'=>'col-sm-2 control-label' ]) ?> <div class="col-sm-2"> <?= $form->field($model, 'begin_date',[ 'showLabels'=>false ])->textInput(['placeholder'=>'Begin Date']); ?> </div> <div class="col-sm-2"> <?= $form->field($model, 'end_date',[ 'showLabels'=>false ])->textInput(['placeholder'=>'End Date']); ?> </div> </div> <?php ActiveForm::end(); ?>

Step 3: Controlling your label widths/styles per field

Your label and input span width classes are automatically generated based on your form config as seen in Step 1. But, if you need to add additional label classes for specific form input labels, here’s how you do it.

<?= $form->field($model, 'amount',[ 'labelOptions'=>['class'=>'col-sm-2 col-md-2 col-lg-2'] ]);

Viewing a demo

You can view a complete demo here of using the \kartik\widgets\ActiveForm and \kartik\widgets\ActiveField widgets with nested inline fields inside a Bootstrap 3 horizontal form.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/upload-file-yii-2-using-fileinput-widget/

Upload file in Yii 2 using FileInput widget

Are you planning to upload files in your webapp using the enhanced \kartik\widgets\FileInput widget, and not sure how to proceed further? Then read on.

About FileInput

The FileInput widget is based on the bootstrap-fileinput plugin by Krajee. Let’s begin, but before we do that, do understand that the FileInput widget will only work with Yii Framework 2.0. This article extends and enhances a similar wiki for Yii 1.x for Yii 2.0 with usage of the FileInput widget. Here are the simple steps for you to configure the widget for upload:

Model

You must have an attribute declared to store the file name in the model class. The model class can extend either yii\base\Model or yii\db\ActiveRecord). Usually, it is good to declare a file validation rule for this attribute to ensure a file is uploaded with specific extension name. You can store the model class in any of these places for the Yii2 advanced app: app\models, backend\models, frontend\models, or common\models. Let’s say you have a model call Person as shown below, and you wish to upload an image file in an attribute named avatar and you have another field filename to store the source file name. Create a temporary attribute named image to get the uploaded file.

namespace commonmodels; use yiidbActiveRecord; /** * Class Person * @package commonmodels * @property int $id * @property string $name * @property array $avatar * @property array $filename */ class Person extends ActiveRecord public $image; public function rules() return [ [['image'], 'safe'], [['image'], 'file', 'extensions'=>'jpg, gif, png'], ];

You can add others validation parameters as described in FileValidator. For instance, one can add a maxSize restriction (the PHP ini settings will of course prevail).

Controller

The upload path for your files is important. Its recommended you save it in a global parameter like Yii::$app->params['uploadPath']. For example:

Yii::$app->params['uploadPath'] = Yii::$app->basePath . '/uploads';

Next setup your controller action for upload.

use commonmodelsPerson; use yiihelpersSecurity; class PersonController extends yiiwebController public function actionCreate() $model = new Person; if ($model->load(Yii::$app->request->post())) // get the uploaded file instance. for multiple file uploads // the following data will return an array $image = UploadedFile::getInstance($model, 'image'); // store the source file name $model->filename = $image->name; $ext = end((explode(".", $image->name))); // generate a unique file name $model->avatar = Security::generateRandomKey().".$ext"; // the path to save file, you can set an uploadPath // in Yii::$app->params (as used in example below) $path = Yii::$app->params['uploadPath'] . $model->avatar; if($model->save()) $image->saveAs($path); return $this->redirect(['view', 'id'=>$model->_id]); else // error in saving model return $this->render('create', [ 'model'=>$model, ]);

View

Edit your _form.php or your other view file where you are rendering the create and image upload form.

use kartikwidgetsActiveForm; // or yiiwidgetsActiveForm use kartikwidgetsFileInput; $form = ActiveForm::begin([ 'options'=>['enctype'=>'multipart/form-data'] // important ]); echo $form->field($model, 'filename'); // your fileinput widget for single file upload echo $form->field($model, 'avatar')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*'], ]); /** * uncomment for multiple file upload * echo $form->field($model, 'avatar[]')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*', 'multiple'=>true], ]); * */ echo Html::submitButton($model->isNewRecord ? 'Upload' : 'Update', [ 'class'=>$model->isNewRecord ? 'btn btn-success' : 'btn btn-primary'] ); ActiveForm::end();

And thus, you should now be able to check your uploaded files in the path as set in Yii::$app->params['uploadPath']. In case you are using multiple file input, the $image variable in controller will return an array of files, which you must loop through. Its important for multiple file uploads to follow an array naming convention as mentioned in this web tip.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/read-html5-multiple-file-input-php/

Read HTML5 Multiple File Input from PHP

Ok, so you have a HTML 5 file input markup on your view and you have enabled multiple attribute to true. You may also be using widgets based on HTML5 input like \kartik\widgets\FileInput. But when you read a file in PHP Server code using $_FILES you do not see an array of files. Similarly, when using a PHP framework like Yii, in the controller using CUploadedFile (Yii1) or UploadedFile (Yii2), you do not see a list of multiple files that you selected in your view, but only one row.

File Input Markup

Your HTML markup in your view is something like this and you don’t know why this is not working?

<input name="uploadFile" type="file" multiple="multiple">

Solution

You must set your form’s encoding type to multipart/form data (enctype="multipart/form-data") for file uploads.

You must configure the attribute name for HTML5 file input in ARRAY FORMAT for PHP to recognize it as an array of files.

So here is how you achieve this as shown below (note the square brackets in the attribute naming):

Your Form Layout

For Generic PHP/HTML

<form enctype="multipart/form-data" action="file-upload.php" method="POST"> <input name="uploadFile[]" type="file" class="file" multiple="multiple"> </form>

For Yii 1.1

$form = $this->beginWidget('CActiveForm', array( 'options'=>['encytype'=>'multipart/form-data'] )); echo $form->fileInput($model, 'uploadFile[]', array('multiple' => true)); $this->endWidget();

For Yii 2

use \yii\widgets\ActiveForm; $form = ActiveForm::begin([ 'options'=>['encytype'=>'multipart/form-data'] ]); echo $form->field($model, 'uploadFile[]')->fileInput(['multiple' => true]); ActiveForm::end;

For \kartik\widgets\FileInput (Yii 2)

use \yii\widgets\ActiveForm; $form = ActiveForm::begin([ 'options'=>['encytype'=>'multipart/form-data'] ]); echo $form->field($model, 'uploadFile[]')->widget(FileInput::classname(), [ 'options'=>['multiple' => true] ]); ActiveForm::end;

Now when you fetch your uploaded files after form submission using $_FILES['uploadFile'], you should receive an array of files for processing.

// PHP Server Code to process submitted form $numUploadedfiles = count($_FILES['uploadFile']); for($i = 0; $i < $numUploadedfiles; $i++) echo "<br>filename " . $i . " is: " . $_FILES['uploaded'][$i]; // or do whatever

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/using-yii2-datecontrol-within-yii2-detail-view/

Using yii2-datecontrol within yii2-detail-view

About DateControl and DetailView:

The yii2-datecontrol extension allows you to control separate date formats for display and saving for form inputs.

The yii2-detail-view extension, enhances the yii DetailView and enables you to toggle between VIEW and EDIT modes with other features.

This article explains you how you combine both. That is, how you can enable date formats for display and save using the DateControl extension within yii2-detail-view.

NOTE: To setup the controller and view to work with yii2-detail-view extension for update and delete, you can refer this article.

Scenario

Let’s assume you want to display dates as “d-m-Y” format and save dates as “Y-m-d” format to db.

DateControl Module Settings

Setup your yii2-datecontrol module as follows:

'modules' => [ 'datecontrol' => [ 'class' => 'kartik\datecontrol\Module', // format settings for displaying each date attribute 'displaySettings' => [ 'date' => 'd-M-Y', 'time' => 'H:i:s A', 'datetime' => 'd-m-Y H:i:s A', ], // format settings for saving each date attribute 'saveSettings' => [ 'date' => 'Y-m-d', 'time' => 'H:i:s', 'datetime' => 'Y-m-d H:i:s', ], // automatically use kartik\widgets for each of the above formats 'autoWidget' => true, ], ],

DetailView Attributes Configuration

Setup your yii2-detail-view date related attributes to use the DateControl extension as mentioned below:

use kartik\detail\DetailView; use kartik\datecontrol\DateControl; echo DetailView::widget([ 'model'=>$model, 'panel'=>$panel 'attributes'=>[ 'code', [ 'attribute'=>'publish_date', 'format'=>['date', 'd-m-Y'], 'type'=>DetailView::INPUT_WIDGET, // setup custom widget 'widgetOptions'=>[ 'class'=>DateControl::classname(), 'type'=>DateControl::FORMAT_DATE ] ], ] ]);

With the above settings, you should see the dates getting displayed in ‘d-m-Y’ format and saved in ‘Y-m-d’ format.