Upload Gambar Menggunakan Yii2 dan Penggunaan Class Times...

Pembahasan ini merupakan kelanjutan dari materi sebelumnya yaitu :

CRUD Menggunakan Yii2

Sebelum melanjutkan pada pembahasan ini diharapkan agar menyelesaikan project diatas karena masih berhubungan, cuman pada penambahan yaitu pembuatan upload gambar dan penggunaan class TimestampBehavior class tersebut digunakan untuk melakukan insert dan update data pada kolom created_at dan updated_at, jadi kolom tersebut akan terisi secara otomatis ketika melakukan penginputan data ataupun ketika data tersebut diubah.

Modifikasi Model Buku

Sebelum melakukan upload gambar kita akan melakukan modifikasi terlebih dahulu pada model Buku.php, perubahan pada file tersebut ada penambahan validasi untuk kolom foto menjadi required atau tidak boleh kosong ketika melakukan input dan validasi ektensi gambar menjadi gif,jpg dan png jadi selain ektensi tersebut akan muncul peringatan dan tidak bisa diupload.
berikut perubahan pada function rules :

[[‘kode_buku’, ‘judul’,‘foto’], ‘required’],

kode diatas ada penambahan validasi foto wajib diisi ketika simpan data dan update data.

dan penambahan validasi ektensi gambar :

[[‘foto’], ‘file’, ‘extensions’ => ‘gif, jpg, png’],

validasi diatas digunakan agar gambar yang dapat diupload hanya dengan ektensi gif,jpg dan png saja selain file tesebut akan ditolak.

Untuk menggunakan class TimestampBehavior kita perlu menambahkan header yaitu :

use yiibehaviorsTimestampBehavior;

setelah itu menambahkan method baru namanya behavios sebagai berikut :

 public function behaviors()
    {
        return [
            TimestampBehavior::className(),
        ];
    }

sehingga kode lengkap nya adalah sebagai berikut :

Code Snippet

<?php
namespace appmodels;

use yiidbActiveRecord;
use yiibehaviorsTimestampBehavior;

class Buku extends ActiveRecord
{
    public function behaviors()
    {
        return [
            TimestampBehavior::className(),
        ];
    }
    public static function tableName()
    {
        return 'buku';
    }

    public function rules()
    {
        return [
            [['kode_buku', 'judul','foto'], 'required'],
            [['judul'], 'string'],
            [['pengarang'], 'string'],
            [['isbn'], 'string'],
            [['foto'], 'file', 'extensions' => 'gif, jpg, png'],
            [['created_at'], 'integer'],
            [['updated_at'], 'integer'],
        ];
    }
}

Upload Gambar

Untuk melakukan upload gambar kita perlu melakukan modifikasi pada file _form pada folder view seperti berikut :

<?php $form = ActiveForm::begin([‘options’ => [‘enctype’ => ‘multipart/form-data’]]) ?>

modifikasi activeForm dengan menambahkan array options menjadi multipart.form-data agar form dapat membaca file yang akan kita upload, selain itu kita perlu juga menambahkan fileinput dibawah kolom pengarang :

<?= $form->field($model, ‘foto’)->fileInput() ?>

kode diatas adalah input file menggunakan yii2 digunakan untuk upload file, kode lengkap pada file _form.php adalah sebagai berikut :

Code Snippet

<?php
use yiihelpersHtml;
use yiibootstrapActiveForm;
?>
<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>
<?= $form->field($model, 'kode_buku') ?>
<?= $form->field($model, 'judul') ?>
<?= $form->field($model, 'isbn') ?>
<?= $form->field($model, 'pengarang') ?>
<?= $form->field($model, 'foto')->fileInput() ?>
<?= Html::submitButton('Simpan', ['class' => 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>

Modifikasi BukuController

modifikasi dilakukan pada actionCreate,actionUpdate dan actionDelete, pada action create tedapat perubahan agar file yang diupload tersimpan kedalam sebuah folder uploads untuk itu tambahkan lah sebuah folder uploads kedalm project anda terlebih dahulu dan nama file akan tersimpan kedalam database. berikut adalah perubahan pada actionCreate

Code Snippet

public function actionCreate()
    {
        $model = new Buku();
        if (Yii::$app->request->post()) {
            $model->load(Yii::$app->request->post());
            $model->foto = yiiwebUploadedFile::getInstance($model, 'foto');

            if ($model->validate()) {
                $saveTo = 'uploads/' . $model->foto->baseName . '.' . $model->foto->extension;
                if ($model->foto->saveAs($saveTo)) {
                    $model->save(false);
                    Yii::$app->session->setFlash('success', 'Foto berhasil disimpan');
                } else {
                    Yii::$app->session->setFlash('error', 'Data gagal disimpan');
                }
            }
            return $this->refresh();
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }

selain itu kita akan merubah actionUpdate menjadi seperti berikut :

Code Snippet

public function actionUpdate($id)
    {
        $model = Buku::findOne($id);

        if (Yii::$app->request->post()) {
            $model->load(Yii::$app->request->post());
            $model->foto = yiiwebUploadedFile::getInstance($model, 'foto');

            if ($model->validate()) {
                $saveTo = 'uploads/' . $model->foto->baseName . '.' . $model->foto->extension;
                if ($model->foto->saveAs($saveTo)) {
                    $model->save(false);
                    Yii::$app->session->setFlash('success', 'Foto berhasil disimpan');
                } else {
                    Yii::$app->session->setFlash('error', 'Data gagal disimpan');
                }
            }
            return $this->refresh();
        } else {
            return $this->render('update', [
                'model' => $model,
            ]);
        }
    }

Kemudian mengubah actionDelete agar ketika data dihapus maka file akan ikut terhapus, berikut perubahan pada actionDelete

Code Snippet

public function actionDelete($id)
    {
        $model = Buku::findOne($id);
  $filepath=Yii::getAlias('@app') . '/uploads/' . $model->foto;
  
  if (is_file($filepath))
   {
   unlink($filepath);
   }
        $model->delete();
        return $this->redirect(['index']);
    }

Modifikasi Index.php pada view yang ada didalam folder buku :

agar gambar dapat tampil pada tabel kita juga perlu modifikasi file index.php yaitu menambahkan beberapa kolom yaitu kolom created_at menjadi tgl.simpan dan update_at menjadi tgl.ubah dan kolom gambar untuk menampilkan gambar yang sudah diupload. berikut adalah perubahan pada file index.php yang ada pada folder buku.

Code Snippet

<?php
use yiihelpersHtml;
?>
<style>
    tr {
        text-align: center;
    }

    th {
        text-align: center;
    }
</style>
<h1>Daftar Buku Perpustakaan</h1>
<div class="container">
    <div class="row">
        <?= Html::a('Tambah Buku', ['create'], $options = ['class' => 'btn btn-primary pull-right']) ?>
    </div>
    <br />

    <?php
    ?>
    <div class="row">
        <?php
        $i = 1;
        echo "<table class='table table-bordered table-striped'>";
        echo "<tr>";
        echo "<th>NO</th>";
        echo "<th>KODE BUKU</th>";
        echo "<th>JUDUL</th>";
        echo "<th>PENGARANG</th>";
        echo "<th>ISBN</th>";
  echo "<th>Tgl.Buat</th>";
  echo "<th>Tgl.Edit</th>";
  echo "<th>Foto</th>";
        echo "<th colspan='2'>AKSI</th>";
        echo "</tr>";
        foreach ($buku as $bukus) {
            echo "<tr>";
            echo "<td>" . $i++ . "</td>";
            echo "<td>" . $bukus->kode_buku . "</td>";
            echo "<td>" . $bukus->judul . "</td>";
            echo "<td>" . $bukus->pengarang . "</td>";
            echo "<td>" . $bukus->isbn . "</td>";
   echo "<td>" . date("Y-m-d H:i:s",$bukus->created_at) . "</td>";
   echo "<td>" . date("Y-m-d H:i:s",$bukus->updated_at) . "</td>";
   echo "<td>" .  Html::img(Yii::getAlias('@web') . '/uploads/' . $bukus->foto, [
        'class' => 'img-thumbnail', 'style' => 'float:center;width:50px;'
    ]); "</td>";
            echo "<td>" .  Html::a('<i class="glyphicon glyphicon-pencil"></i>', ['buku/update', 'id' => $bukus->kode_buku]) . "</td>";
            echo "<td>" .  Html::a(
                '<i class="glyphicon glyphicon-trash"></i>',
                ['buku/delete', 'id' => $bukus->kode_buku],
                ['onclick' => 'return (confirm("Apakah data mau di hapus?")?true:false);']
            ) . "</td>";
            echo "</tr>";
        }
        echo "</table>";
        ?>
    </div>
</div>

Upload Gambar Menggunakan Yii2 dan Penggunaan Class TimestampBehavior

CRUD Menggunakan Yii2

Modifikasi Model Buku

Upload Gambar

Modifikasi BukuController

Selesai

Tinggalkan Balasan Batalkan balasan