Make Custom Diagram / View With FusionChart

In my project i need to make a custom diagram and chart. I looking for library to solve it but cant find event close one. To solve it, i combine some image from that diagram but its hard to maintain it because this diagram have a dynamic color and the value will get from database.. For long time i hold this modul and do the other modul/project that i can finish.. And someday i have a nice information from my partner that find a good modul in fusion chart.  Honestly i never use fusion chart, thats why never know about this item. It call “Drag Node Chart” and it can make a custom diagram that fit with our requirement. Yeah, for example like this picture.. Capture

And it save my time to think about my problem… Just see this item here http://www.fusioncharts.com/demos/gallery/#drag-node-chart.

Finish… Hope it help… Sorry for my bad english,..

Happy coding….

Advertisements

[Yii Framework] Integrate Upload Image With Editor CKEditor

How to integrate upload image that can automatic include it in your editor with CKEditor and Yii Framework?
1. Download ckeditor source here : http://ckeditor.com/

2. Integrate it with Yii Framework, i assume you know how to do it. (read ckeditor documentation)

3. In views, define html tags for ckeditor like this :

 
                echo '<textarea name="name_field" id="name_field"></textarea>';

4. Define ckeditor javascript to make html tags show data like this :

             CKEDITOR.replace('name_field', {
                height: 100,
                width : 350,
                // this code use for activate image upload in your view, and it will execute the url that you want
                // when run it
                filebrowserImageUploadUrl: '<?php echo Yii::app()->createUrl("yourController/yourAction")?>',

                // set toolbar that you want to show
                toolbar : [
                    {'name' : 'document' , 'items' : ['Source']},
                    ['Cut','Copy','Paste','-','Undo','Redo','Image'],
                    {'name' : 'basicstyles','items' : ['Bold','Italic']}
                ]
            } );

after add that code,your tags will display like this :
1

5. Make an action that will execute upload code in your controller :

 
    public function actionUpfile()
    {
        if($_FILES) // check if file upload exist
        {
            $target_path = Yii::app()->basePath.'/../foldername/';  // directory in your server
            $ext_name=explode('.',basename($_FILES['upload']['name']));  // get extension from file upload
            $fname='yourFileName.'.$ext_name[1];  // set your file name, 
            $target_path = $target_path.$fname;  // save path and name file

            if(!file_exists("$target_path"))// if we have set target path
            {
                  $message='';  // message variable, use to show message after upload file
                  $url='';   // url variable, use to set url image in your editor
                  $lower_ext=strtolower($ext_name[1]);  // check extension, validate type file
                  if ($lower_ext!='jpg' && $lower_ext!='jpeg' && $lower_ext!='png' && $lower_ext!='gif')
                  {
                    // if type file not allow
                    $message = "The image must be in either JPG, JPEG, GIF or PNG format."; 
                  }
                else
                {
                    // upload file to server
                    move_uploaded_file($_FILES['upload']['tmp_name'], $target_path);
                    echo 'Success Upload File';
                    // url will save directory. Note it, url is different with target path
                    // url will use in your editor, it will direct access to the path
                    $url='yourwebsite'.'/foldername/'.$fname;
                }
                $funcNum = $_GET['CKEditorFuncNum'] ;
                // after save data, run code to call ckeditor function
                echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
              }
              else
              {
                  echo 'Failed Upload File';    
              }
        }
    }

After that, you will see display like this :
2

Yeah, enjoy your application..

Finish.. Hope it help,Happy coding… 😀

[Yii Framework] Update Data Table/ Grid Form With JQrelCopy

Many people ask about “how to update many data in table form?”. I have posted about how to create (not update ) it here https://sabitlabscode.wordpress.com/2012/06/14/yii-framework-ajax-dependent-dropdownlist-in-multi-value-grid-form/ , here https://sabitlabscode.wordpress.com/2012/05/28/yii-framework-insert-banyak-data-dengan-jappendo/ and here https://sabitlabscode.wordpress.com/2011/08/10/yii-framework-membuat-entry-data-tabel-dinamis-dengan-jappendo/. But some

Okeh, first our form will be like this :

t1

And form update will be like this :

t2

Okey, you can see it in update form it will have the previous value that we have been added before. We can delete previous data too with click in “delete” link in form.

I assume you have been knowed to make create form (see my previous post). Now, we will learn how to make an update form. First, download jqrelcopy extension and insert it in your application (In this post i just post with jqrelcopy extension). Next, we need to display previous data when we want to update. So. insert this code on your form in view :

 <div>

<?php 
// define form
$form=$this->beginWidget('CActiveForm', array(
    'id'=>'name-form',
    'enableAjaxValidation'=>false,
)); ?>

<?php 
     // define jqrelcopy
    $this->widget('ext.jqrelcopy.JQRelcopy',array(
        'id' => 'copylink',
        'removeText' => 'Delete', // delete label
        'removeHtmlOptions' => array('style'=>'color:red'),  // style for delete link
        'options' => array(
            'copyClass'=>'newcopy',
            'clearInputs'=>true,
            'excludeSelector'=>'.skipcopy',  // add some class not to copy when we add 
        )
    ));
?>
        <a id="copylink" href="#" rel=".yangdicopy">Add New</a>

        <table>
            <tr>
                <th>Some Text Here</th>
            </tr>

            <?php 
            if(!$model->isNewRecord){
                //if it in update mode, display all value from previous save
                use findAll (or another metode) to show all data before
                foreach (YourModel::model()->findAllByAttributes(array('field1'=>yourParam)) as $key => $value) { 
           ?>
                    <tr>
                        <?php
                           // show all value
                            echo '<td>'.Chtml::textArea('ques3[]',$value->attribute1,array('rows'=>2, 'cols'=>40)).'</td>';
                            // this code use for delete value, it will execution controller and action that set in ajax call
                            echo "<td class='skipcopy'><a href='#' onclick=\"
                                    $.ajax({
                                            url:'".Yii::app()->createUrl('yourController/yourAction')."',
                                            data: {id:$(this).attr('id')}
                                    });
                                    $(this).parent().parent().remove(); return false;
                                \" 
                                style=\"color:red;\" id='produ".$value->idAttribute."' >Delete</a></td>"; 
                                // produ."$value->idAttribute" use to make unique tag in each jqrel table
                        ?>
                    </tr>   
            <?php }} ?>

            <tr>
                <?php
                    // this is standar form will show to add data
                    echo '<td>'.Chtml::textArea('ques3[]','',array('rows'=>2, 'cols'=>40)).'</td>';
                    echo "<td class='skipcopy'><a href='#' onclick=\"
                            $(this).parent().parent().remove(); return false;
                        \" 
                        style=\"color:red;\" id='produ' >Delete</a></td>";
                ?>
            </tr>
        </table>

    <div>
        <?php echo CHtml::submitButton('Save'); ?>
    </div>

<?php $this->endWidget(); ?>
</div><!-- form -->

After that, we will make a code in controller to save update data. Make this in you controller :

 public function actionUpdate()
{
    if(isset($_POST['ques3']))
    {

            $data=YourModel::model()->findAllByAttributes(array('field1'=>yourParam));
            foreach ($_POST['ques3'] as $q3k => $q3v)
            {
                 // if you find index key from $data, so it will be update the data
                 // if no, so make new data
                if(isset($data[$q3k]))
                {
                    $tabdata=YourModel::model()->findByPk($data[$q3k]->idAttribute);  
                }
                else
                {
                    $tabdata=new YourModel;
                }
                $tabdata->field2=$q3v;
                $tabdata->field1=$model->idAttribute;
                $tabdata->save();
            }
    }

    $this->render('update');
}

And for delete existing data, make this code on your controller :

 public function actionDelete()
    {
        if(isset($_GET['id']))
        {
            $idnya=substr($_GET['id'], 5); // remember we need to catch id from "produ" and the id 
             //is the next value after "produ"
            $model=YourModel::model()->findByPk($idnya); search data
            if($model!==null)  // if we can find data, delete it
                $model->delete();
        }
    }

Finsih… Hope it help…

Happy coding… 😀

%d bloggers like this: