Native Form Validation with Yii in Bootstrap Style

When you are working with Yii and Bootstrap you will see many hurdles in doing several things in Yii in the native way. One of the main such issue is the form validation. Bootstrap is having a different HTML markup from that of the default Yii form. But as always Yii can be customized to match Bootstrap’s structure. So I thought I will write up an article explaining how to easily work with native form validation in Yii with Bootstrap form.

Yii Form Validation in Bootstrap Style
Yii Form Validation in Bootstrap Style

First of all lets see the difference in the form markup of Yii and Bootsrap. Here is the Yii style.

Here is the Bootstap style

This change can be easily achieved by changing the view file of the form itself to match the Bootstrap markup structure.

But when the form is submitted and there are some validation error or success, the structure of the markup is a bit altered by Yii with its pre configured settings. Lets look at a field with a validation error.

You can see a CSS class error is attached to the label and the input field. If the validation is success then the class is success. And a new div with class errorMessage is displayed after the input field with the details of error.

Lets look at how a Bootstrap form field will look with a validation error message.

Here you can see a CSS class has-error is attached to the wrapper div with class form-group. If the validation is success then the class should be has-success. And the error message block is having CSS class help-block which is different from the native Yii class errorMessage. How can we generate such markup after the validation in Yii? Its very easy, just follow the instructions below.

The only thing we need to worry is about attaching a CSS class has-error to the wrapper div of the field. For this we just have add a one line of PHP code in the view file of the form.

You may have noticed the php code appended to the div class=”form-group” line,

This piece of code will check whether that particular field is having any validation error. If there is any error it will attach the has-error CSS class to that div. This piece of code should be given for all the fields in the form with the correct attribute name password to the hasErrors() function of the model instance. So the first part is done. Next is the error message section.

The CSS class attached with the error message section is a property of the CActiveForm widget. Inorder to change that we have to specify that property along with the CActiveForm widget. The name of the property associated with this is errorMessageCssClass. By specifying that property as help-block in the widget configuration will do the magic.

That’s all, your Bootstrap friendly Yii form validation is completed. Stay tuned for more Yii tips. Meanwhile I am writing about how to handle AJAX validation with Yii in Bootstrap style.

Free Private SVN/GIT Repository By CloudForge

You might be looking for a free private SVN or git repository for the development of your project. There are several free svn/git repository providers but most of them are providing public repos. I have been hunting a for free though private repository with descent features for a while. My hunt of free private svn/git repository ends with CloudForge.

CloudForge provides a free plan to host private SVN or Git repository with a limit of 2GB which I think enough for a beginner. I am pretty much impressed with their performance since I am using their services for a while.  An agile planning tool TeamForge along with Trackers, Wikis, Documents are also available with this free plan.Create-CloudForge-Project

 

User interface of CloudForge also is very neat and usable unlike some heavily complicated dashboard. CloudForge is a product from CollabNet.

Using Filters in Yii CGridView with Relations

CGridView in Yii is having filters by default for easily searching the contents in the grid. This default filters will work only with the attributes in the model. Most of the time we need to show attributes from related models in the gird view. By default there wont be any filter text boxes for those columns. It is very easy to apply the inbuilt filtering technique to the related attributes in CGridView. This article will help you to use filters in Yii CGridView with Relations and related attributes.

I am explaining the process with an simple example and you can see the code genereated by Yii by deafult and the change I have made to apply the filters to the relations attributes.

In this example I am using Post and User table with the following structure. Post table is having a relation to User with name userID.

Once the model is generated with the gii tool, you need to define the relation in the Post model. This can be done with the following edit.

This edit will tell the Post model that there is a relation to User model with the attribute userID in post model and the primary key of User model. We have named  the relation as author, Now we can use author attribute for any object of the Post model to access the user details of the that particular post.

Now the view part, the following is the normal code for CGridView generated with the CRUD generator of Yii. I have just added authot.email to the columns array to show the email of the user of the post.

 

 

This view will render a CGridView as follows with a column showing the email of the user for each Posts. But there wont be any text box for filtering that column like other columns.

 

No Filters on Relation

We can add the filter for the related attribute on the model relation with some simple modification.  First of all we need to create a manual attribute in the Post model for using with the filter input text field. So I have declared a member variable $authorEmail in the Post model as given in the below snippet. After that we need to define the the rules for that attribute. Since this attribute is not having any other rules I have added the save rule to the attribute.

Then I have modified the search function in the Post model to define the logic needed for the filtering. For this I have modified the CDbCriteria object used in the search function. I have added the relation to the criteria with the with property. Then added a search condition for the author.email with the authorEmail attributes value. That’s all needed in the Model. Now there is a small change required in the view file also.

In the view file , modify the columns array for the CGridView. Add an array for showing the author email and mention the filter as follows.

Here is the resulting CGridView with filtering on the related attribute.

Filters on CGridView with Relation

Hope this tutorial to implement filtering on CGridView with relations and related attributes in Yii. Please comment if you are having any doubts.

Free Online Drag n Drop Bootstrap Form Designer

Bootstrap is a CSS framework which is widely used in most of the website designs. Inorder to create beautiful forms you need to follow the CSS structure of bootstrap which might be a little confusing if your not a expert in the designing domain. Bootstrap Form Desinger is not only for those guys but also for experts to created beautiful form with a few clicks and drags.

 

Bootstrap Form Designer is an online drag n drop form designer application which can be used to create Bootstrap forms within 5 mins. It provides most of the components, you just have to drag the components based on your requirements and configure the settings for each components. Finally when you are done you can get the rendered code for the form which you can copy and paste in your page. Thats it, you sexy bootstrap form is ready to go live.

Bootstrap Drag and Drop Form Components
Bootstrap Drag and Drop Form Components

Bootstrap Form Builder provides a set of components including the normal input fields but extending to prepanded text box, appended text box, button drop down etc. The configuration panel for each components allow user to configure each component to suit users needs.

Bootstrap Form Designer Options
Bootstrap Form Designer Options

Bootstrap Prepanded Text Box OptionsWhen you are done with the designing of the form just click the Rendered tab to get your code for the form you just designed. You can copy that and paste in your page which uses bootstrap style sheet to display the form.

Bootstrap Rendered Form  Code

 

Create Excel Sheet from Array in PHP using PHPExcel

Recently I have published an article about how to read an excel sheet and create an array with that data in PHP using PHPExcel. Now I am giving another tutorial to create excel sheet from array in php using PHPExcel. Usually exporting an array of data into Excel is done in csv format because it is very easy to do so. But it is very easy to create a very customized Excel sheet with the array using PHPExcel.

PHPExcel provides a function fromArray() which helps us to export our array to excel sheet without any complications.The following code snippet will help you to create an excel sheet from array using php.

Here is formal definition of the fromArray function in the PHPExcel Class

I hope with code snippet to export an array of data in php to an excel sheet will help you next time. PHPExcel is a very useful library when you are dealing with data exports. Follow us for more code snippet related to PHP and Excel like excel sheet from array.

Styling Yii CGridView with Bootstrap CSS

When you are working in the theme build with bootstrap css you will be having trouble with Yii widgets like CGridView, CDetailView. This is because Yii is having an independent CSS for these widgets. We have to disable those CSS files and apply the Bootstrap CSS to these widgets in order to render these widgets with the Bootstrap styling. You can easily configure your widgets to show CGridView with Bootstrap styling.

This can be done by defining the properties for the widget. But if you are using these widgets in several places, this task will hard to do, but we can do this very easily by configuring the widgets properties in the main.php config file itself.

Just place the following code in the main.php config file. The widgetFactory is the array containing the global properties of the widgets.

In the above code snippet I am altering the properties of CGridView and CLinkPager since pager will be also displayed along with CGridView.

Yii CGridView with Bootstrap Styling
Yii CGridView with Bootstrap Styling

After setting this, all your CGridViews will be working with this property and will be displayed with the Bootstrap styling.

This setting will tell the Yii to not load any default CSS file associated with this widget.

Using CArrayDataProvider with CGridView and Sorting

CGridView is a very handy widget from Yii framework for displaying tabular data. Usually we use CActiveDataProvider with CGridView to display records from database in the site. But at time we might need to display custom generated data in tables. CArrayDataProvider helps us to use CGridView with a normal array of data same as we use with CActiveDataProvider. This article helps you in using CArrayDataProvider with CGridView and also enable the sorting feature on the CGridView.

Preparing CArrayDataProvider

Controller Action

 

Rendering the CGridView

Rendering part is same as it is with the CActiveDataProvider. Only thing to worry is about setting the header of each column as the array doesn’t provide them.

View File (arrayDP.php)

 

Used CArrayDataProvider with CGridView Sorted with Age Field
Used CArrayDataProvider with CGridView Sorted with Age Field

Hope this article helped you to understand how to use CArrayDataProvider with CGridView. If you are having any doubts please feel free to comment.

Install & Setup Local WAMPServer in Windows 7 for PHP Development

If you are looking to do development in PHP to create web applications or site you need to set setup the server in your local system. You can download and install WAMP Server in you Windows 7 in order to do the development and executing the php files in your local system running Windows operating system. This tutorial will help you to install and configure the WAMP server in you Windows 7 computer.

WAMP stands for Windows Apache MySQL PHP. WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.Installing WAMP Server is very simple and you can get your server running within 5 mins with a few clicks. Follow the tutorial to get started.

  1. Download WampServer
  2. Install WampServer
  3. Starting WampServer
  4. Verify Server is Running

Download WampServer

You have to download the wamp server from the official site. There are different versions available with different configuration of PHP version, Apache version etc.., you can choose the best one suiting you. Depending upon our computer either download the 32 or 64 bit download.

Download WampServer

 Install WampServer

After downloading the WampServer, you need to install the executable file in your system. The WampServer installation is a normal installation procedure, you just have to click next on all the screen unless you have change any default configuration. By default the WampServer will be installed to C:wamp folder.

Starting the WampServer for the First Time

After successfully installing the WampServer, you need to start your server to get the server running. To do this just like any program you can either use one of the icons you created during the installation process or look under Start->All Programs->WampServer folder and click on “start WampServer

After starting your WAMP server an icon will appear in your task bar. You will see it in 1 of 3 states.

wamp-server-icon-color-state

  • Red, meaning no services on your WAMP server are currently running (when you start the server it will be red.)
  • Orange, meaning the WAMP server has been started, but not all of the services are running (as the server starts it will transition from red to orange to green)
  • Green, meaning the WAMP server has been started and all it’s services are running correctly

Wamp Server Not Starting Issue Caused By Skype

If you are using skype, the wamp server will not get started as both skype and wamp server uses the same port 80. Inorder to fix this issue you can change the setting in the Skype to not use the default 80 port. You need to be logged into your Skype account, then click on Tools->Options->Advanced->Connection and un-check “Use port 80 and 443 as alternatives for incoming connections”.

You need to restart the Wamp Server by right clicking the task bar icon and clicking on Restart All Services after changing this to get the server started.

Verify the Server is Running

If the task bar icon is running, your server is up and running. You can now access the server from any browser by going to http://localhost/ and see the WampServer hompage show the details of the server.

WAMPSERVER Homepage

Once the server is running you can create you php files inside the www folder inside the folder where you installed the server, which is C:wampwww by default. If you create a file test.php inside the www folder you can run that php file in you browser at http://localhost/test.php

Congratulations for setting up you Wamp Server and running yout first php file. Hope this tutorial helped you to install wamp server on your computer.

Key Difference Between MyISAM and InnoDB MySQL Storage Engines

MySQL has different storage engine which will act as handlers for different tables. Out of the many the major ones are MyISAM and InnoDB. Knowing difference between mysql engines MyISAM and InnoDB could be very helpful while choosing which engine should be used for your project.

Difference Between InnoDB and MyISAM
Difference Between InnoDB and MyISAM

In the core level there several difference between MyISAM and InnoDB, but in the usablity aspect there are some key differences which we are concerned about. The following the key difference between MyISAM and InnoDB.

Full Text Search is supported in InnoDB in MySQL 5.6. It is clear from the graph for better performance and reliability InnoDB is suited than MyISAM.

Transactions are very useful and keeps the integrity of the data. InnoDB supports transaction with commit and rollback by which a set of quries can executed and rolled back to initial stage of any of them fails. Also InnoDB only supports foreign key by which relational design can be implemented. These are the main highlights of InnoDB when the difference between MyISAM and InnoDB is compared.

You can set the mysql engine when you create the table as follows.

Usually MyISAM is the default engine so if you want to create table with MyISAM you don’t have to mention that.

 

 

Remotely Destroy Session in PHP (Forced User Signout)

PHP SessionSessions are used to store the details of the users using a web site. Usually when a user is logged in we will set the details of that user in the session to identify the user in the subsequent page loads. Each user will be having different sesssions. You can destroy session remotely to implement features like forced user logout.

When the user logout of the site, that user’s session will be destroyed. If you being and admin and want to make a user logout of your site forcefully, what you can do is to destroy that user’s session. This is possible with the help of session id. PHP has a function session_id() which can be used to get or set the session id.

To implement a forced logout or to destroy a different session remotely, you need to have the session id of the session you want to destroy. This has to collected when the user logs in and should be stored in some place usually in db so the admin user can access the session of all the logged in users.

If you are having the session id of  the session which needs to destroyed then using the following snippet of PHP code you can destroy that session.

Forced user logout feature could be very handy for your websites when you are running processes with complex business logic and for safety. Please feel free to comment if you are having any doubts about the php snippet code for destroying remote session.