Creating Data Picker Using Yii Framework [Part 1] Step By Step

Well if you don’t know what is Yii Framework. I recommend just go to the main site http://www.yiiframework.com
And then http://www.yiiframework.com/doc/guide/1.1/en/quickstart.first-app
This tutorial was meant for programmer who knows and already creating web application using Yii framework.

What we’re going to create and learn.

This tutorial was based on my thread at Yii framework forum : http://www.yiiframework.com/forum/index.php/topic/16797-data-picker/

We will be creating Data Picker. What is data picker ? well the idea was simple, its just like a Date Picker but instead of Date we load Data from database.

Maybe this image will make you understand a little bit.

[IMAGE END SAMPLE]

So what we need to create this Data Picker. When using Yii what we need its just a simple CGridView from CRUD loaded inside of CJuiDialog. If you learn basic php and not using Yii you’ll be using like JQueryUI Dialog and Custom Table inside the Dialog with complete Searching and Paging, but with Yii CGridView you don’t have to create Custom Table With searching and Paging Anymore.

Creating Database + Models + CRUD

Lets just start. the first thing we need to prepare is Yii web app and then Here are the sample MySQL database for this tutorial.

--
-- Database: `datapicker_tutor`
--
-- --------------------------------------------------------
--
-- Table structure for table `post`
--

CREATE TABLE IF NOT EXISTS `post` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_user` int(11) NOT NULL,
  `title` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Dumping data for table `post`
--
-- --------------------------------------------------------
--
-- Table structure for table `user`
--
CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `user`) VALUES
(1, 'test1'),
(2, 'test2');

if you don't know how to generate Yii webapp and want to create one, please go to this link http://www.yiiframework.com/doc/guide/1.1/en/quickstart.first-app for starter.

When you see the database I hope you’ll get the idea. There are 2 table one named user and the other named post. What I want is that when creating or updating Post we will be filling the id_user field using Data Picker instead of ComboBox.


After creating database don't forget to connecting your app with the database. To connect to mysql dbase you just need to edit protected/config/main.php

If you already sure about the database connection then lets just begin to create Model and CRUD for those two tables. Open your gii its usually at http://hostname/testdrive/index.php?r=gii or if you already using UrlManager its at http://hostname/testdrive/index.php/gii or if you having .htaccess http://hostname/testdrive/ gii

If you don’t know anything about this please refer to http://www.yiiframework.com/doc/guide/1.1/en/quickstart.first-app
First we create Model User. Go to Model Generator, fill user in table name then generates it

[Picture Generate Model User]

Now after the user model  lets just create the CRUD for the user. Go to CRUD Generator then Fill in model class with User then Generates it.

[Generate CRUD for Model User]

You can view the CgridView and the result of your work at http://localhost/datapicker/index.php/user/admin
The CGridView is look like this

[User CGridView]

This CGridView will be attached to the post form later on. Until this point you already creating a web application without any coding. If you want to take a look what yii generate to create such complex CRUD just view the code.

Controller for user at protected\controllers\UserController.php with function actionAdmin
View for admin user at protected\views\user\view.php

Don’t forget to do the same for table post, generate post model and then generate CRUD model.
After creating crud post, open protected\views\post\_form.php using your favorite editor. I’m using Notepad++

You’ll see code like this

<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'post-form',
    'enableAjaxValidation'=>false,
)); ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <?php echo $form->errorSummary($model); ?>
    <!—- this is the code that you will modified -->
    <div class="row">
        <?php echo $form->labelEx($model,'id_user'); ?>
        <?php echo $form->textField($model,'id_user'); ?>
        <?php echo $form->error($model,'id_user'); ?>
    </div>
    <!—- end modified code -->
    <div class="row">
        <?php echo $form->labelEx($model,'title'); ?>
        <?php echo $form->textField($model,'title',array('size'=>60,'maxlength'=>250)); ?>
        <?php echo $form->error($model,'title'); ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
    </div>

<?php $this->endWidget(); ?>

</div><!-- form -->

[CODE : protected\views\post\_form.php]

You will modified the id_user textfield, so that field will be using Data Picker instead of textfield. If you don’t know which one is id_user maybe this picture will help or browse and go to index.php/post/create 

[Picture Post Create Form]

We will also modified the Controller class of Post that is protected\controllers\PostController.php and the one that handler the view protected\views\post\create.php and protected\views\post\update.php
This is the first part of the tutorial. I hope it much better than the previous one.

Read Part 2 : Creating Data Picker Using Yii Framework [Part 2]