• Disclaimer
  • Privacy Policy
  • ToS
Tutorial Yii2 Framework Bahasa Indonesia
  • Home
  • Panduan Yii2
    • Apa itu Yii
    • Memulai Yii2
    • Struktur Aplikasi
    • Konsep Dasar Yii2
    • Database
    • Input Data
    • Menampilkan Data
    • Keamanan
    • Caching
  • Panduan Lanjutan Yii2
    • RESTful API
    • Development Tools
    • Testing
    • Widgets
    • Helpers
  • Tutorial
  • FAQ
  • Asudahlah.com

Senin, 29 Februari 2016

Panduan Yii2, Membuat Form input di Y

Diposting oleh gema di 20.53 Label: Memulai Yii2 , Panduan Yii2
Bagian ini menjelaskan tentang bagaimana membuat halaman baru dengan sebuah form untuk mendapatkan data dari user. Halaman tersebut menampilkan form dengan input field nama dan email. Setelah mendapatkan dua informasi tersebut dari user, halaman tersebut akan menampilkan nilai-nilai yang dimasukkan untuk konfirmasi.

Untuk melakukannya, selain membuat sebuah action dan 2 view, anda juga harus membuat sebuah model.

Pada tutorial ini, anda akan mempelajari:
  • Bagaimana membuat model untuk merepresentasikan data yang dimasukkan user melalui form.
  • Bagaimana mendeklarasikan rules/aturan untuk mem-validasi data yang dimasukkan.
  • Bagaimana membangun form HTML dengan view.

Cara Membuat Model di Yii2

Data yang di-request dari user direpresentasikan dengan sebuah EntryForm model class seperti yang dibawah ini dan disimpan dalam file models/EntryForm.php.
<?php

namespace app\models;

use Yii;
use yii\base\Model;

class EntryForm extends Model
{
    public $name;
    public $email;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email'],
        ];
    }
}
Class tersebut di extend dari yii/base/Model, sebuah base class yang disediakan oleh Yii yang digunakan  untuk mewakili form data.

Class EntryForm memuat 2 public member, yaitu name dan email, yang digunakan untuk menyimpan data yang dimasukkan oleh user. EntryForm juga memuat method bernama rules(), yang mengembalikan rules-rules untuk validasi data. Rule validasi pada script diatas mendefinisikan dua hal:
  • name dan email harus diisi.
  • email harus berupa alamat email valid.
Jika anda memiliki sebuah object EntryForm  yang diisi data oleh user, anda dapat memanggil validate() untuk menjalankan validasi data. Kesalahan validasi data  akan mengubah nilai hasErrors menjadi true, dan anda juga dapat mengetahui kesalahan apa yang terjadi saat validasi.
<?php
$model = new EntryForm();
$model->name = 'Qiang';
$model->email = 'bad';
if ($model->validate()) {
    // Good!
} else {
    // Failure!
    // Use $model->getErrors()
}

Membuat Action 

Selanjutnya, anda perlu membuat action entry di dalam controller site yang akan menggunakan model baru kita tadi. Proses pembuatan dan penggunaan action dijelaskan dalam bagian Hello World Yii2.
aying Hello section.

load(Yii::$app->request->post()) && $model->validate()) {
            // valid data received in $model

            // do something meaningful here about $model ...

            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // either the page is initially displayed or there is some validation error
            return $this->render('entry', ['model' => $model]);
        }
    }
}

Pertama-tama, action membuat sebuah object EntryForm. Lalu mencoba untuk memuat model diisi dengan data dari $_POST, disediakan oleh Yii dengan yii\web\Request::post(). Jika model sukses diisi (ketika user sudah men-submit form HTML), action akan memanggil validate() untuk memeriksa apakah nilai yang dimasukkan valid.
Info: expression Yii::$app mewakili instance aplikasi yang dapat diakses secara global. Instance tersebut juga merupakan serice locator yang menyediakan komponen seperti request, response, db dan lain-lain. Untuk mendukung fungsi spesifik. Pada kode diatas, component request dari application instance digunakan untuk mengakses $_POST data.
Jika tidak ada masalah, action akan me-render sebuah view bernama entry-confirm untuk mengkonfirmasi keberhasilan pengiriman data ke user. Jika tidak ada data yang dikirim atau data memuat error, maka view entry lah yang di render. Dimana form HTML ditampilkan beserta pesan kesalahan validasi jika ada kesalahan validasi.

Membuat View 

Terakhir, buat 2 file view bernama entry-confirm dan entry yang akan dirender oleh action entry.

View entry-confirm menampilkan data nama dan email. Disimpan kedalam file views/site/entry-confirm.php.
<?php
use yii\helpers\Html;
?>
<p>You have entered the following information:</p>

<ul>
    <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
    <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>
View entry menampilkan form HTML. Disimpan kedalam file views/site/entry.php.
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'name') ?>

    <?= $form->field($model, 'email') ?>

    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>
View menggunakan widget powerful yang bernama ActiveForm untuk membangun form HTML. Method begin() dan end() digunakan untuk me-render tag pembukaan dan penutup. Diantara dua method call tersebut, input field dibuat dengan menggunakan method field(). Input field pertama untuk data "name", dan yang kedua untk data "email". Setelah input field, method yii\helpers\Html::submitButton dipanggil untuk men-generasi submit button.

Test Hasil

Untuk melihat hasilnya, gunakan browser anda untuk mengakses URL berikut.
http://localhost/index.php?r=site/entry

Anda akan melihat dua input field. didepan dari setiap input field, ada label yang menunjukkan nama field. Jika anda klik submit tanpa memasukkan apapun atau anda memberikan format email yang salah, anda akan melihat pesan error yang ditampilkan disamping setiap input field yang bermasalah.

Setelah memasukkan nama dan email yang valid dan klik submit button, anda akan melihat halaman baru yang menampilkan data yang baru anda masukkan.

Penjelasan

Mungkin anda bertanya tanya bagaimana cara kerja form HTML dibalik layar, karena secara otomatis dapat menampilkan label untuk setiap input field dan menampilkan pesan error jika anda salah memasukkan data tanpa me-reload halaman.

Berikut penjelasannya. Pertama kali, validasi data dilakukan disisi client menggunakan javascript, dan kemudian validasi juga dilakukan di sisi server dengan PHP. yii\widgets\ActiveForm cukup cerdas untuk mengekstrak rule validasi yang dideklarasikan di EntryForm, mengubahnya menjadi kode executable javascript, dan menggunakan javascript untuk melakunan validasi data. Jika dalam suatu kasus javascript pada sisi browser dimatikan, data tetap akan di validasi di sisi server.

Label untuk setiap input field di generasi oleh method field(), menggunakan nama proprety dari model. Contohnya label Name di generasi untuk property name.

Anda juga dapat mengubah label dalam view menggunakan kode berikut:
<?= $form->field($model, 'name')->label('Your Name') ?>
<?= $form->field($model, 'email')->label('Your Email') ?>
Info: Yii menyediakan banyak widget untuk membantu anda membangun view yang complex dan dinamis dengan cepat.
<<Sebelumnya : Menjalankan Aplikasi Yii2 Kembali ke Panduan Memulai Yii2 Lanjut ke : Bekerja Dengan Database>>
Tweet
loading...
  • Komentar Blogger 4
  • Komentar Facebook

4 komentar :

  1. Nur Singgih4 April 2017 pukul 01.56

    aying Hello section.

    load(Yii::$app->request->post()) && $model->validate()) {
    // valid data received in $model

    // do something meaningful here about $model ...

    return $this->render('entry-confirm', ['model' => $model]);
    } else {
    // either the page is initially displayed or there is some validation error
    return $this->render('entry', ['model' => $model]);
    }
    }
    }

    kode ini sepertinya salah bos

    BalasHapus
    Balasan
      Balas
  2. Unknown17 Mei 2017 pukul 02.58

    public function actionEntry()
    {
    $model = new EntryForm();
    if($model->load(Yii::$app->request->post()) && $model->validate())
    {
    return $this->render('entry-confirm' , ['model' => $model]);
    }

    else
    {
    return $this->render('entry', ['model' => $model]);
    }
    }

    Kode yang benar

    BalasHapus
    Balasan
      Balas
  3. Unknown17 Mei 2017 pukul 03.00

    untuk yang mengalami hal seperti ini "Class 'frontend\controllers\EntryForm' not found" , solusi nya tambahkan use frontend\models\EntryForm; pada siteController.php

    BalasHapus
    Balasan
      Balas
  4. The Sleepy Monster12 November 2017 pukul 05.18

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
      Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar ( Atom )

Recently Solved Problems

Links

Yii2 Git Repository Yii2 Official Website

Facebook page

Labels

  • Memulai Yii2
  • Model
  • Panduan Yii2
  • Struktur Aplikasi Yii2
  • Tips Yii2
  • Troubleshooting
  • Tutorial Yii2

Popular Posts

  • Instalasi Template AdminLTE di Yii2 menggunakan composer
    Secara default, Yii2 dibekali oleh template Bootstrap 3. Namun kita juga bisa menambahkan template lain yang lebih baik, seperti misalnya ...
  • Buat aplikasi CRUD Yii2 secara otomatis dengan Gii
    Pada tutorial ini, saya akan membahas bagaimana cara membuat aplikasi CRUD (Create Read Update Delete) database secara otomatis dengan mengg...
  • Konfigurasi RBAC Yii2 sederhana dan mudah dengan amnah/yii2-user
    RBAC (Role-Based Access Control) adalah konsep Access Control di Yii2 yang memisahkan hak akses user berdasarkan role atau peran. Yii2 sen...

© Asudahlah.com 2016 . Powered by Twitter Bootstrap , Blogger