Files
yii/docs/guide/id/quickstart.first-app.txt
2011-01-16 14:55:27 +00:00

233 lines
9.4 KiB
Plaintext

Membuat Aplikasi Pertama Yii
============================
Agar mendapatkan pengalaman pertama dengan Yii, kita akan melihat dalam bab ini bagaimana
untuk membuat aplikasi pertama Yii. Kita akan menggunakan piranti bertenaga `yiic`
yang dapat dipakai dalam mengotomatisasi pembuatan tugas-tugas tertentu. Demi kenyamanan,
kita beranggapan bahwa `YiiRoot` adalah direktori di mana Yii diinstalasi, dan `WebRoot`
adalah root dokumen pada server Web kita.
Jalankan `yiic` pada baris perintah seperti berikut:
~~~
% YiiRoot/framework/yiic webapp WebRoot/testdrive
~~~
> Note|Catatan: Saat menjalankan `yiic` pada Mac OS, Linux atau Unix, Anda harus mengubah
> perijinan file `yiic` agar bisa dijalankan.
> Alternatif lain, Anda bisa menjalankan piranti seperti berikut,
>
> ~~~
> % cd WebRoot/testdrive
> % php YiiRoot/framework/yiic.php webapp WebRoot/testdrive
> ~~~
Ini akan membuat kerangka aplikasi Yii di bawah direktori
`WebRoot/testdrive`. Aplikasi memiliki struktur direktori yang
diperlukan oleh umumnya aplikasi Yii.
Tanpa harus menulis satu baris kode pun, kita dapat menguji aplikasi pertama
Yii kita dengan mengakses URL berikut dalam Web browser:
~~~
http://hostname/testdrive/index.php
~~~
Seperti yang kita lihat, aplikasi memiliki empat halaman: halaman beranda, halaman tentang (about)
halaman kontak dan halaman masuk(login). Halaman kontak menampilkan sebuah form kontak
yang dapat diisi pengguna dan mengirim pertanyaan mereka ke webmaster, sedangkan
halaman masuk memungkinkan pengunjung diotentikasi sebelum mengakses isi khusus bagi yang sudah login.
![Halaman beranda](first-app1.png)
![Halaman kontak](first-app2.png)
![Halaman dengan input error](first-app3.png)
![Halaman kontak dengan pesan sukses](first-app4.png)
![Halaman masuk](first-app5.png)
Diagram berikut memperlihatkan struktur direktori pada aplikasi kita
Silahkan lihat [Konvensi](/doc/guide/basics.convention#directory) utuk keterangan
lebih rinci mengenai struktur ini.
~~~
testdrive/
index.php File skrip entri aplikasi Web
assets/ berisi file resource yang diterbitkan
css/ berisi file CSS
images/ berisi file gambar
themes/ berisi tema aplikasi
protected/ berisi file perlindungan aplikasi
yiic skrip baris perintah yiic
yiic.bat skrip baris perintah untuk Windows
commands/ berisi perintah 'yiic' yang dikustomisasi
shell/ berisi perintah 'yiic shell' yang dikustomisasi
components/ berisi komponen pengguna
MainMenu.php kelas widget 'MainMenu'
Identity.php kelas 'Identity' yang dipakai untuk otentikasi
views/ berisi file view untuk widget
mainMenu.php file view file untuk widget 'MainMenu'
config/ berisi file konfigurasi
console.php konfigurasi aplikasi konsol
main.php konfigurasi aplikasi Web
controllers/ berisi file kelas kontroler
SiteController.php standar kelas kontroler
extensions/ berisi extension pihak-ketiga
messages/ berisi terjemahan pesan
models/ berisi file kelas model
LoginForm.php model formulir untuk aksi 'login'
ContactForm.php model formulir untuk aksi 'contact'
runtime/ berisi file yang dibuat secara temporal
views/ berisi file kontroler tampilan dan tata letak
layouts/ berisi file tampilan tata letak
main.php standar tata letak untuk semua tampilan
site/ berisi file tampilan untuk kontroler 'site'
contact.php tampilan untuk aksi 'contact'
index.php tampilan untuk aksi 'index'
login.php tampilan untuk aksi 'login'
system/ berisi file tampilan sistem
~~~
Sambungan ke Database
---------------------
Umumnya aplikasi Web didukung oleh database. Aplikasi testdrive (pengujian) kita tidak
terkecuali. Untuk menggunakan database, pertama kita perlu memberitahu
aplikasi bagaimana untuk berhubungan dengannya. Ini dilakukan dengan mengubah file
konfigurasi aplikasi `WebRoot/testdrive/protected/config/main.php`, seperti
terlihat di bawah ini:
~~~
[php]
return array(
......
'components'=>array(
......
'db'=>array(
'connectionString'=>'sqlite:protected/data/source.db',
),
),
......
);
~~~
Dalam contoh di atas, kita menambah entri `db` ke `components`, yang memerintahkan
aplikasi untuk menyambung ke database SQLite
`WebRoot/testdrive/protected/data/source.db` saat diperlukan. Harap diingat bahwa
database SQLite sudah disertakan dalam aplikasi kerangka yang di-generate kita tadi.
Database tersebut berisi sebuah tabel bernama `tbl_user`:
~~~
[sql]
CREATE TABLE tbl_user (
id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
username VARCHAR(128) NOT NULL,
password VARCHAR(128) NOT NULL,
email VARCHAR(128) NOT NULL
);
~~~
Jika ingin mencoba database MySQL, anda harus menyertakan file skema MySQL
`WebRoot/testdrive/protected/data/schema.mysql.sql` untuk membuat database.
> Note|Catatan: Untuk menggunakan fitur database, kita harus mengaktifkan extension
PDO dan extension PDO driver-spesifik. Untuk aplikasi testdrive, kita perlu
mengaktifkan extension `php_pdo` dan `php_pdo_sqlite`
Mengimplementasikan Operasi CRUD
--------------------------------
Sekarang merupakan bagian yang menarik. Kita akan mengimplementasi operasi CRUD (create, read, update, delete) atau
membuat, membaca, meng-update dan menghapus pada tabel `tbl_user` yang baru saja dibuat. Operasi ini juga
merupakan aplikasi praktis yang umumnya diperlukan. Alih-alih menulis kode, kita akan menggunakan `Gii` -- sebuah generator kode yang powerful
> Info: Gii sudah tersedia semenjak versi 1.1.2. Sebelumnya, kita menggunakan `yiic` (yang baru saja disinggung) untuk melakukan hal yang sama. Untuk lebih detail silahkan merujuk ke [Mengimplementasi Operasi CRUD dengan yiic shell](/doc/guide/quickstart.first-app-yiic).
### Konfigurasi Gii
Untuk menggunakan Gii, kita pertama harus mengubah file `WebRoot/testdrive/protected/config/main.php`, yang juga dikenal sebagai file [konfigurasi aplikasi](/doc/guide/basics.application#application-configuration):
~~~
[php]
return array(
......
'import'=>array(
'application.models.*',
'application.components.*',
),
'modules'=>array(
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'pilih password di sini',
),
),
);
~~~
Kemudian buka URL `http://hostname/testdrive/index.php?r=gii`. Kita akan diminta password, yang baru saja dimasukkan di konfigurasi aplikasi di atas.
### Menghasilkan User Model
Setelah login, klik ke link `Model Generator`. Menu ini akan membawa kita ke halaman penghasil model,
![Model Generator](gii-model.png)
Dalam field `Table Name`, masukkan `tbl_user`. Di dalam field `Model Class`, masukkan `User`. Kemudian klik tombol `Preview` yang akan memunculkan file kode baru yang akan dihasilkan. Klik tombol `Generate`. Sebuah nama file bernama `User.php` akan dihasilkan di `protected/models`. Kelas model `User` ini akan memungkinkan kita untuk berkomunikasi dengan tabel `tbl_user` dalam gaya berorientasi objek, yang nanti akan dibahas lebih lanjut.
### Menghasilkan CRUD Code
Setelah membuat file kelas model, kita akan menghasilkan kode untuk mengimplementasi operasi CRUD tentang data user. Kita akan memilih `Crud Generator` di Gii, yang ditampilkan sebagai berikut,
![CRUD Generator](gii-crud.png)
Dalam field `Model Class`, masukkan `User`. Di dalam field `Controller ID`, masukkan `user` (dalam huruf kecil). Sekarang tekan tombol `Preview` diikuti tombol `Generate`. Kita telah menyelesaikan proses penghasilan kode CRUD.
### Mengakses halaman CRUD
Mari kita nikmati pekerjaan kita dengan melihatnya di URL berikut:
~~~
http://hostname/testdrive/index.php?r=user
~~~
Ini akan menampilkan sebuah daftar entri pengguna dalam tabel `User`.
Klik tombol `Create User`. Kita akan dibawa ke halaman login
jika kita belum login sebelumnya. Setelah masuk, kita melihat formulir
input yang mengijinkan kita untuk menambah entri pengguna baru. Lengkapi formulir dan
klik tombol `Create`. Lengkapi form dan klik tombol `Create`. Jika terjadi kesalahan input,
sebuah tampilan error yang bagus akan muncul dan mencegah kita menyimpan inputan kita.
Kembali ke halaman daftar user, kita seharusnya melihat sebuah user baru sudah muncul di daftar.
Ulangi langkah di atas untuk menambah lebih banyak pengguna. Harap diingat bahwa halaman daftar pengguna
akan dipaginasi secara otomatis jika terlalu banyak pengguna yang harus ditampilkan
pada satu halaman.
Jika kita login sebagai administrator menggunakan `admin/admin`, kita dapat melihat halaman
pengguna admin dengan URL berikut:
~~~
http://hostname/testdrive/index.php?r=user/admin
~~~
Ini akan memperlihatkan tabel entri user yang bagus. Kita dapat mengklik sel header
tabel guna mengurut sesuai kolom terkait. Kita dapat mengklik tombol pada setiap baris
untuk melihat, meng-update atau menghapus baris data bersangkutan.
Kita dapat membuka halaman-halaman berbeda. Kita juga dapat memfilter dan mencari
data yang diinginkan.
Semua fitur bagus ini disediakan tanpa harus menulis satu baris kode pun!
![Halaman admin pengguna](first-app6.png)
![Halaman membuat pengguna baru](first-app7.png)
<div class="revision">$Id: quickstart.first-app.txt 2375 2010-08-30 12:19:23Z mdomba $</div>