Pages

Wednesday, October 21, 2009

Membuat Formulir

Membuat Formulir

Menulis tampilan login adalah pekerjaan langsung. Kita mulai dengan sebuah tag form yang atribut aksinya berupa URL atas aksi login seperti dijelaskan sebelumnya. Kemudian kita menyisipkan label dan field input untuk atribut yang dideklarasikan dalam kelas LoginForm. Setelah itu kita menyisipkan tombol kirim yang dapat diklik oleh pengguna untuk mengirimkan formulir. Semua ini dapat dikerjakan dalam kode murni HTML.

Yii menyediakan beberapa kelas pembantu guna memfasilitasi komposisi tampilan. Sebagai contoh, untuk membuat sebuah field input teks, kita dapat memanggil CHtml::textField(); untuk membuat daftar drop-down, panggil CHtml::dropDownList().

Info: Orang mungkin heran apa untungnya pemakaian bantuan jika mereka memerlukan sejumlah kode yang mirip dibandingkan dengan kode HTML langsung. Jawabannya adalah bahwa pembantu dapat menyediakan lebih dari sekedar kode HTML. Sebagai example, the following code would generate a text input field which can pemicu pengiriman formulir jika nilainya diubah oleh pengguna.

CHtml::textField($name,$value,array('submit'=>''));

Ini akan memerlukan penulisan sejumlah JavaScript dimana-mana.

Dalam contoh berikut, kita menggunakan CHtml untuk membuat formulir login. Kita beranggapan bahwa variabel $user mewakili turunan LoginForm.

<div class="yiiForm">
php echo CHtml::beginForm(); ?>

php echo CHtml::errorSummary($user); ?>

<
div class="simple">
php echo CHtml::activeLabel($user,'username'); ?>
php echo CHtml::activeTextField($user,'username'); ?>
div>

<
div class="simple">
php echo CHtml::activeLabel($user,'password'); ?>
php echo CHtml::activePasswordField($user,'password');
?>
div>

<
div class="action">
php echo CHtml::activeCheckBox($user,'rememberMe'); ?>
Remember me next time<br/>
php echo CHtml::submitButton('Login'); ?>
div>

php echo CHtml::endForm(); ?>
div>

Kode di atas menghasilkan formulir lebih dinamis. Sebagai contoh, CHtml::activeLabel() menghasilkan label terkait dengan atribut model yang ditetapkan. Jika atribut memiliki kesalahan input, label kelas CSS akan diubah ke error, yang mengubah tampilan label dengan gaya CSS terkait. Hal yang sama, CHtml::activeTextField() menghasilkan field input teks untuk atribut model yang ditetapkan dan mengubah kelas CSS jika ada kesalahan pada input.

Jika kita menggunakan file gaya CSS form.css yang disediakan oleh naskah yiic, formulir yang dihasilkan akan terlihat seperti berikut:

Halaman login

Halaman login

Login dengan halaman kesalahan

Login dengan halaman kesalahan

Mengumpulkan Input Tabular

Mengumpulkan Input Tabular

Adakalanya kita ingin mengumpulkan input pengguna dalam mode batch. Yakni, pengguna dapat memasukan informasi untuk turunan model secara multipel dan mengirimkannya sekaligus. Kami menyebut ini input tabular karena field input sering disajikan dalam tabel HTML.

Untuk bekerja dengan input tabular, pertama kita perlu membuat atau mempopulasikan array turunan model, tergantung pada apakah kita menyisipkan atau memutakhirkan data. Selanjutnya kita dapat mengambil data input pengguna dari variabel $_POST dan menempatkannya ke setiap model. Perbedaan utama dari model input tunggal adalah bahwa kita mengambil data input menggunakan $_POST['ModelClass'][$i] daripada $_POST['ModelClass'].

public function actionBatchUpdate()
{
// ambil item yang akan dipopulasi dalam mode batch
// menganggap setiap item adalah kelas model 'Item'
$items=$this->getItemsToUpdate();
if(isset($_POST['Item']))
{
$valid=true;
foreach($items as $i=>$item)
{
if(isset($_POST['Item'][$i]))
$item->attributes=$_POST['Item'][$i];
$valid=$valid && $item->validate();
}
if($valid) // seluruh item benar
// ...lakukan sesuatu di sini
}
// tampilkan tampilan untuk mengumpulkan input tabular
$this->render('batchUpdate',array('items'=>$items));
}

Setelah aksi siap, kita perlu bekerja pada tampilan batchUpdate untuk menampilkan field input dalam sebuah tabel HTML.





$item): ?>







NamePriceCountDescription






Catatan dalam contoh di atas kita menggunakan "name[$i]" daripada "name" sebagai parameter kedua saat memanggil CHtml::activeTextField.

Jika ada kesalahan validasi, field input terkait akan diterangi secara otomatis, seperti halnya model input tunggal yang kami jelaskan sebelumnya.

Membuat Aksi

Setelah kita memiliki model, kita dapat mulai menulis logika yang diperlukan untuk memanipulasi model. Kita tempatkan logika ini di dalam sebuah aksi kontroler. Untuk contoh formulir login, kode berikut diperlukan:

public function actionLogin()
{
$form=new LoginForm;
if(isset($_POST['LoginForm']))
{
// kumpulkan data input pengguna
$form->attributes=$_POST['LoginForm'];
// validasi input pengguna dan alihkkan ke halaman sebelumnya jika benar
if($form->validate())
$this->redirect(Yii::app()->user->returnUrl);
}
// tampilkan formulir login
$this->render('login',array('user'=>$form));
}

Dalam contoh di atas, pertama kita membuat turunan LoginForm; jika permintaan adalah permintaan POST (berarti formulir login dikirimkan), kita mempopulasi $form dengan data yang dikirimkan $_POST['LoginForm']; kemudian kita memvalidasi input dan jika sukses, mengalihkan browser pengguna ke halaman sebelumnya yang memerlukan otentikasi. Jika validasi gagal, atau jika aksi diakses dari awal, kita menyajikan tampilan login di mana isinya akan dijelaskan dalam subseksi berikut.

Tip: Dalam aksi login, kita menggunakan Yii::app()->user->returnUrl untuk mendapatkan URL halaman sebelumnya yang memerlukan otentikasi. Komponen Yii::app()->user adalah jenis CWebUser (atau anak kelasnya) yang mewakili informasi sesi pengguna (misalnya username, status). Untuk lebih jelasnya, lihat Otentikasi dan Otorisasi.

Mari kita perhatikan pernyataan PHP berikut yang muncul dalam aksi login:

$form->attributes=$_POST['LoginForm'];

Seperti yang kami jelaskan dalam Mengamankan Penempatan Atribut, baris kode ini mempopulasi model dengan data yang dikirimkan pengguna. Properti attributes didefinisikan oleh CModel yang mengharapkan array pasangan nama-nilai dan menempatkan setiap nilai ke atribut model terkait. Maka jika $_POST['LoginForm'] menghasilkan array seperti itu, kode di atas akan sama dengan kode panjang berikut (menganggap setiap atribut ada dalam array):

$form->username=$_POST['LoginForm']['username'];
$form->password=$_POST['LoginForm']['password'];
$form->rememberMe=$_POST['LoginForm']['rememberMe'];

Catatan: Agar $_POST['LoginForm'] menghasilkan array daripada string, kita tetap pada konvensi penamaan field input dalam tampilan. Pada keadaan tertentu, sebuah field input berkaitan dengan atribut a pada kelas model C, kita namai sebagai C[a]. Sebagai contoh, kita ingin menggunakan LoginForm[username] untuk menamai field input yang berkaitan dengan atribut username.

Tugas selanjutnya sekarang adalah membuat tampilan login yang harus berisi formulir HTML dengan field input yang dibutuhkan.

Membuat Model

Sebelum menulis kode HTML yang diperlukan oleh sebuah formulir, kita harus menetapkan jenis data apa yang diharapkan dari pengguna akhir dan aturan apa pada data ini harus diterapkan. Kelas model dapat dipakai guna merekam informasi ini. Model, seperti yang didefinisikan dalam subseksi Model, adalah tempat utama untuk memelihara input pengguna dan memvalidasinya.

Tergantung pada bagaimana kita menggunakan input pengguna, kita bisa membuat dua jenis model. Jika input pengguna dikumpulkan, dipakai dan kemudian diabaikan, kita bisa membuat model formulir; jika input pengguna dikumpulkan dan disimpan ke dalam database, sebaliknya kita dapat menggunakan rekaman aktif. Kedua jenis model berbagi basis kelas CModel yang sama yang mendefinisikan antar muka umum yang diperlukan oleh formulir.

Catatan: Kita menggunakan model formulir terutama dalam contoh pada seksi ini. Akan tetapi, hal yang sama bisa juga diterapkan pada model rekaman aktif.

Mendefinisikan Kelas Model

Di bawah ini kita membuat kelas model LoginForm yang dipakai untuk mengumpulkan input pengguna pada halaman login. Karena informasi login hanya dipakai untuk mengotentikasi pengguna dan tidak perlu menyimpan, kita membuat LoginForm sebagai sebuah model formulir.

class LoginForm extends CFormModel
{
public $username;
public $password;
public $rememberMe=false;
}

Tiga atribut dideklarasikan dalam LoginForm: $username, $password dan $rememberMe. Ini dipakai untuk memelihara nama pengguna dan kata sandi yang dimasukkan, dan opsi apakah pengguna menginginkan untuk mengingat login-nya. Karena $rememberMe memiliki nilai standar false, opsi terkait saat awal ditampilkan dalam formulir login tidak akan dicentang.

Info: Daripada memanggil properi variabel anggota ini, kita menggunakan nama attributes untuk membedakannya dari properti normal. Atribut adalah properti yang terutama dipakai untuk menyimpan data yang berasal dari input pengguna atau database.

Mendeklarasikan Aturan Validasi

Setelah pengguna mengirimkan inputnya dan model sudah dipopulasi, kita perlu memastikan bahwa input benar sebelum menggunakannya. Ini dikerjakan dengan melakukan validasi input terhadap satu set aturan. Kita menetapkan aturan validasi dalam metode rules() yang harus mengembalikan array konfigurasi aturan.

class LoginForm extends CFormModel
{
public $username;
public $password;
public $rememberMe=false;

public function rules()
{
return array(
array('username, password', 'required'),
array('password', 'authenticate'),
);
}

public function authenticate($attribute,$params)
{
if(!$this->hasErrors()) // kita hanya ingin mengotentikasi bila tidak ada kesalahan input
{
$identity=new UserIdentity($this->username,$this->password);
if($identity->authenticate())
{
$duration=$this->rememberMe ? 3600*24*30 : 0; // 30 hari
Yii::app()->user->login($identity,$duration);
}
else
$this->addError('password','Incorrect password.');
}
}
}

Contoh kode di atas menetapkan bahwa username dan password keduanya diperlukan, password harus diotentikasi.

Setiap aturan yang dikembalikan oleh rules() harus dalam format berikut:

array('AttributeList', 'Validator', 'on'=>'ScenarioList', ...opsi tambahan)

di mana AttributeList adalah string nama atribut yang dipisahkan dengan koma yang perlu divalidasi sesuai dengan aturan; Validator menetapan jenis validasi apa yang harus dilakukan; parameter on adalah opsional yang menetapkan daftar skenario di mana aturan harus diterapkan; dan opsi tambahan adalah pasangan nama-nilai yang dipakai untuk menginisialisasi nilai properti validator terkait.

Ada tiga cara untuk menetapkan Validator dalam aturan validasi. Pertama, Validator dapat berupa nama metode dalam kelas model, seperti authenticate dalam contoh di atas. Metode validator harus berupa tanda tangan berikut:

/**
*
@param string nama atribut yang akan divalidasi
*
@param array opsi yang ditetapkan dalam aturan validasi
*/
public function ValidatorName($attribute,$params) { ... }

Kedua, Validator dapat berupa nama kelas validator. Saat aturan diterapkan, turunan kelas validator akan dibuat untuk melakukan validasi sebenarnya. Opsi tambahan dalam aturan dipakai untuk menginisialisasi nilai atribut turunannya. Kelas validator harus diperluas dari CValidator.

Catatan: Saat menetapkan aturan untuk model rekaman aktif, kita dapat menggunakan opsi spesial bernama on. Opsi ini bisa berupa 'insert' atau 'update' agar aturan hanya diterapkan masing-masing saat penyisipan atau pemutakhiran rekaman. Jika tidak disetel, aturan akan diterapkan dalam kedua kasus tersebut saat save() dipanggil.

Ketiga, Validator dapat berupa alias pradefinisi untuk kelas validator. Dalam contoh di atas, nama required adalah alias untuk CRequiredValidator yang memastikan nilai atribut yang divalidasi tidak kosong. Di bawah ini adalah daftar lengkap alias pradefinisi validator aliases:

Di bawah ini daftar beberapa contoh pemakaian validator pradefinisi:

// username diperlukan
array('username', 'required'),
// username harus antara 3 dan 12 karakter
array('username', 'length', 'min'=>3, 'max'=>12),
// saat dalam skenario registrasi, password harus sama dengan password2
array('password', 'compare', 'compareAttribute'=>'password2', 'on'=>'register'),
// saat dalam skenario login, password harus diotentikasi
array('password', 'authenticate', 'on'=>'login'),

Mengamankan Penempatan Atribut

Catatan: penempatan atribut berbasis-skenario sudah tersedia sejak versi 1.0.2.

Setelah turunan model dibuat, seringkali kita perlu mempopulasikan atributnya dengan data yang dikirimkan oleh pengguna-akhir. Ini bisa dikerjakan dengan nyaman menggunakan penempatan masal berikut:

$model=new LoginForm;
$model->scenario='login';
if(isset($_POST['LoginForm']))
$model->attributes=$_POST['LoginForm'];

Catatan: Properti skenario sudah tersedia sejak versi 1.0.4. Penempatan masal akan mengambil nilai properti untuk menguji apakah atribut bisa ditempatkan secara masal. Dalam versi 1.0.2 dan 1.0.3, kita perlu menggunakan cara berikut untuk melakukan penempatan masal pada skenario tertentu:

$model->setAttributes($_POST['LoginForm'], 'login');

Penempatan terakhir adalah penempatan masal yang menempatkan setiap entri dalam $_POST['LoginForm'] ke atribut model terkait dalam skenario login. Ini sama dengan penempatan berikut:

foreach($_POST['LoginForm'] as $name=>$value)
{
if($name is a safe attribute)
$model->$name=$value;
}

Tugas memutuskan apakah entri data aman atau tidak didasarkan pada nilai balik metode bernama safeAttributes dan skenario yang ditetapkan. Secara standar, metode mengembalikan semua variabel anggota public sebagai atribut aman untuk CFormModel, sementara ia mengembalikan semua kolom tabel kecuali kunci primer sebagai atribut aman untuk CActiveRecord. Kita dapat menimpa metode ini guna membatasi atribut aman sesuai dengan skenario. Sebagai contoh, model pengguna dapat berisi beberapa atribut, tapi dalam skenario login kita hanya perlu menggunakan atribut username dan password. Kita dapat menetapkan batas ini seperti berikut:

public function safeAttributes()
{
return array(
parent::safeAttributes(),
'login' => 'username, password',
);
}

Lebih tepatnya, nilai balik metode safeAttributes seharusnya dalam struktur sebagai berikut:

array(
// atribut ini dapat ditempatkan secara masalah dalam setiap skenario
// yang tidak ditetapkan secara eksplisit di bawah ini
'attr1, attr2, ...',
*
// atribut ini dapat ditempatkan secara masal hana dalam skenario 1
'scenario1' => 'attr2, attr3, ...',
*
// atribut ini dapat ditempatkan secara masal hana dalam skenario 2
'scenario2' => 'attr1, attr3, ...',
)

Jika model bukan sensitif-skenario (misalnya, ia hanya dipakai dalam satu skenario, atau semua skenario berbagi set atribut aman yang sama), nilai balik dapat disederhanakan sebagai string tunggal:

'attr1, attr2, ...'

Untuk entri data yang tidak aman, kita perlu menempatkannya ke atribut terkait menggunakan pernyataan penempatan individual, seperti berikut:

$model->permission='admin';
$model->id=1;

Memicu Validasi

Setelah model dipopulasi dengan data yang dikirimkan-pengguna, kita memanggil CModel::validate() untuk memicu proses validasi data. Metode mengembalikan nilai yang menunjukan apakah validasi sukses atau tidak. Untuk model CActiveRecord, validasi juga dapat dipicu secara otomatis saat kita memanggil metode CActiveRecord::save().

Ketika kita memanggil CModel::validate(), kita dapat menetapkan parameter skenario. Hanya aturan validasi yang berlaku pada skenario yang ditetapkan yang akan dijalankan. Aturan validasi pada sebuah skenario jika opsi on pada aturan tidak disetel atau berisi nama skenario yang ditetapkan. Jika kita tidak menetapkan skenario saat memanggil CModel::validate(), hanya aturan yang memiliki opsi on tidak disetel yang akan dijalankan.

Sebagai contoh, kita menjalankan pernyataan berikut untuk melakukan validasi saat meregistrasi seorang pengguna:

$model->scenario='register';
$model->validate();

Catatan: Properti skenario sudah tersedia sejak versi 1.0.4. Metode validasi akan mengambil nilai properti untuk menguji aturan mana yang bisa diperiksa. Dalam versi 1.0.2 dan 1.0.3, kita perlu menggunakan cara berikut untuk melakukan validasi pada skenario tertentu:

$model->validate('register');

Kita dapat mendeklarasikan aturan validasi dalam kelas model formulir seperti brikut,

public function rules()
{
return array(
array('username, password', 'required'),
array('password_repeat', 'required', 'on'=>'register'),
array('password', 'compare', 'on'=>'register'),
);
}

Hasilnya, aturan pertama akan diterapkan dalam semua skenario, sementara dua aturan berikutnya hanya diterapkan dalam skenario register.

Catatan: validasi berbasis-skenario sudah tersedia sejak versi 1.0.1.

Mengambil Kesalahan Validasi

Kita dapat menggunakan CModel::hasErrors() untuk memeriksa apakah ada kesalahan validasi, dan jika ya, kita dapat menggunakan CModel::getErrors() untuk mengambil pesan kesalahan. Kedua metode dapat dipakai untuk semua atribut atau atribut individual.

Label Atribut

Ketika medesain sebuah formulir, seringkali kita perlu menampilkan label untuk setiap field input. Label memberitahu pengguna jenis informasi apa yang harus dimasukkan ke dalam field. Meskipun kita dapat memberi label secara langsung dalam sebuah tampilan, ini akan menawarkan fleksibilitas dan kenyamanan yang lebih jika kita menetapkannya dalam model terkait.

Secara standar, CModel akan mengembalikan nama atribut sebagai labelnya. Ini dapat dikustomisasi dengan menimpa metode attributeLabels(). Seperti yang akan kita lihat dalam subskenario berikutnya, menetapkan label dalam model mengijinkan kita untuk membuat formulir lebih cepat dan bertenaga.

Bekerja dengan Formulir

Pengumpulan data pengguna via formulir HTML adalah tugas utama dalam pengembangan aplikasi Web. Selain mendesain formulir, pengembang perlu mempopulasi formulir dengan data yang sudah ada atau nilai-nilai standar, memvalidasi input pengguna, menampilkan pesan kesalahan yang sesuai untuk input yang tidak benar, dan menyimpan input ke media penyimpan. Yii sudah menyederhanakan alur kerja ini dengan arsitektur MVC.

Langkah-langkah berikut umumnya diperlukan saat berhadapan dengan formulir dalam Yii:

  1. Buat kelas model yang mewakili field data yang dikumpulkan;
  2. Buat aksi kontroler dengan kode yang merespon pengiriman formulir.
  3. Buat formulir dalam file naskah tampilan sesuai dengan aksi kontroler.

Dalam subseksi berikut, kami menjelaskan setiap langkah ini secara lebih rinci.