Cara Upload Gambar di Yii Framework

Cara Upload Gambar di Yii Framework - Sebelumnya kita sudah pernah mempelajari bagaimana cara menampilkan gambar, pada kali ini kita akan belajar upload gambar yang nantinya akan kita tapilkan dengan menggunakan Yii Framework. Pada saat mengupload gambar, gambar tidak di simpan dalam database akan tetapi di simpan dalam sebuah folder di storage, gambar yang di upload akan masuk kedalam folder dan yang di simpan dalam database hanya nama gambarnya saja.

Baca juga : Cara Setting Default Controller Yii Framework

Langsung saja kita mulai prakteknya Cara Upload Gambar di Yii Framework.Jika anda belum pernah membuat databasenya bisa anda lihat Di Sini dan  Jika anda belum menginstal Yii Di localhost anda dapat melihatnya Di Sini.

1. Tabel

Pertama buatlah sebuah tabel baru di dalam database anda dengan nama images dengan struktur tabel seperti ini :

Name	Type	Size	Extra	Primary
id	INT	100	auto_increment	yes
nama	VARCHAR	100
image	VARCHAR	100

2. Model

Buatlah sebuah model baru di dalam direktori Protected/model dengan nama image.php dengan isi script seperti berikut :

<?php

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of images
 *
 * @author Jin Toples
 */
class image extends CActiveRecord {
    public static function model($className = __CLASS__) {
        parent::model($className);
    }
    
    public function tableName(){
        return 'images';
    }
    
    public function rules() {
        return array(
            array('name','required'),array('image', 'file','types'=>'jpg, gif, png', 'allowEmpty'=>true)
        );
    }
    
    public function attributeLabels() {
        return array('id'=>'id','name'=>'Nama Gambar','image'=>'Gambar Yang di Upload');
    }
}

?>

Penjelasn :

return array(
     array('name','required'),array('image', 'file','types'=>'jpg, gif, png', 'allowEmpty'=>true)
);

Kita menentukan rules dengan ketentuan "name" wajib untuk di isi kemudian untuk image hanya bisa di isi dengan file ber-ekstensi "jpg, gif dan png"

3. Controller

Buatlah sebuah file controller baru di dalam direktori Protected/controller dengan nama ImageController.php denga isi script seperti berikut :

<?php

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of ImageController
 *
 * @author Jin Toples
 */
class ImageController extends Controller {
    public $layout="column1";
    
    const URLUPLOAD="/../images/";
    
    function actionCreate(){
        $model=new image;
        
        if(isset($_POST['image'])){
            $cekFile=$model->image=  CUploadedFile::getInstance($model, 'image');
            
            if(empty($cekFile)){
                $model->attributes=$_POST['image'];
                $model->save();
            }else{
                $model->attributes=$_POST['image'];
                $model->image=  CUploadedFile::getInstance($model, 'image');
                
                if($model->save()){
                    $model->image->saveAs(Yii::app()->basePath.self::URLUPLOAD.$model->image.'');
                    
                    $this->redirect(array('image/'));
                }
            }
        }
        $this->render('create',array('model'=>$model));
    }
    
    function actionIndex(){
        $model=new image;
        $data=$model->findAll();
        
        $this->render('index',array('data'=>$data));
    }
}

?>

Penjelasan :

const URLUPLOAD="/../images/";

menentukan folder tempat penyimpanan file gambar

$cekFile=$model->image=  CUploadedFile::getInstance($model, 'image');

Pengecekan file

$model->image->saveAs(Yii::app()->basePath.self::URLUPLOAD.$model->image.'');

Untuk mengupload gambar ke dalam folder

4. View

Buatlah sebuah folder dengan nama image di dalam direktori Protected/view/image kemudian buatlah dua folder PHP :

a. Create.php

<div class="form">
    <?php
        $form=$this->beginWidget(
                'CActiveForm', array(
                    'id'=>'image-form','htmlOptions'=>array(
                        'enctype'=>'multipart/form-data'),'enableAjaxValidation'=>false
                    )
                );
    ?>
</div>
<p class="note">Field dengan <span class="required">*</span> wajib di isi.
</p>
<?php
    echo $form->errorSummary($model);
?>

<div class="row">
    <?php 
        echo $form->labelEx($model,'name');
        echo $form->textField($model,'name',array('size'=>60,'maxlength'=>45));
        echo $form->error($model, 'name');
    ?>
</div>
<div class="row">
    <?php 
        echo $form->labelEx($model,'image');
        echo $form->fileField($model, 'image', array('size'=>60,'maxlength'=>555));
        echo $form->error($model, 'image');
    ?>
</div>
<div class="row buttons">
    <?php 
        echo CHtml::submitButton($model->isNewRecord ? 'Upload':'Simpan');
        $this->endWidget();
    ?>
</div>

b. index.php

<?php
    echo CHtml::link('Tambahkan Gambar', array('image/create'));
    foreach ($data as $model){
?>
<p><?php
        echo "<h2>
".$model->name."</h2>
";
        echo "<br>";
        echo CHtml::image(Yii::app()->request->baseUrl.'/images/'.$model->image.'','',array('width'=>300));
    ?>
</p>
<hr>
<?php
    }
?>

Untuk melihat hasilnya, ketikan di url browser :

http://localhost/Belajar_Yii/website/index.php?r=image

*notes kode yang berwarna merah adalah direktori folder Yii Framework anda di localhost.

Sekarang anda dapat mengupload gambar anda ke server dan menampilkannya ke browser.

Upload Gambar di Yii Framework sekarang sudah selesai, baca juga tutorial belajar Yii Framework lainnya.