Seri tutorial membuat aplikasi kesiswaan menggunakan Yii Framework Bagian 3. Topik yang dibahas : mengubah tampilan tabel, membuat dropdown yang berelasi dengan tabel lain, dan menambah menu baru

1. Pemrograman Web Lanjut
Membuat Aplikasi Kesiswaan Menggunakan
Yii Framework
Bagian 3

2. Tujuan
●
Mengetahui bagaimana cara mengubah
tampilan tabel
●
Mengetahui bagaimana cara membuat
dropdown yang berelasi dari tabel lain
●
Mengetahui bagaimana cara membuat menu
siswa

3. Modifikasi tampilan tabel
●
http://localhost/yii/demos/kesiswaan/index.php?r=siswa/admin

4. Modifikasi tampilan tabel
●
Perbedaan :
Sebelum Sesudah
Kolom pertama berisi field ID Kolom Pertama berisi nomor urut
(bukan Id), ditandai dengan label
# (number)
Kolom agama, isi barisnya masih
berupa angka (id) contoh 1, dan
2
Kolom agama isi barisnya sudah
berupa keterangan nama
agamanya, misal 1 sekarang
berganti jadi islam, 2 jadi kristen
Tidak ada kolom jenis kelamin Ada kolom jenis kelamin, dan
isinya sudah berupa teks misal
laki-laki, perempuan

5. Modifikasi tampilan tabel
●
Edit file protected/views/siswa/admin.php

6. Modifikasi tampilan tabel
●
Simpan dan rasakan perbedaannya

7. Membuat dropdown dari relasi
tabel lain
●
http://localhost/yii/demos/kesiswaan/index.php?r=siswa/create
●
Sebelum :

8. Membuat dropdown dari relasi
tabel lain
●
Sesudah :

9. Membuat dropdown dari relasi
tabel lain
●
Perbedaan :
Sebelum Sesudah
Tampilan label dan textbox
bertumpuk (vertical)
Tampilan label dan textbox
sejajar (horizontal)
Pada field Agama dan jenis
kelamin masih berupa
textbox, dan hanya boleh
diisi dengan menggunakan
id-nya saja, bukan teksnya
Pada field agama dan jenis
kelamin sudah berupa
dropdown list, walaupun
yang dikirim ke server
berupa id, tapi representasi
tampilan yang dilihat user
adalah berupa teksnya

10. Membuat dropdown dari relasi
tabel lain
●
Edit file protected/views/siswa/_form.php
●
Baris diatas digunakan untuk membuat
tampilan label dan textbox sejajar

11. Membuat menu siswa
●
Sebelum Login
●
Setelah Login
●
Terdapat tambahan menu siswa, yang akan muncul
ketika user sudah login

12. Membuat menu siswa
●
Edit file protected/views/layouts/main.php
●
Simpan dan rasakan perbedaannya

13. Tugas
●
Ubahlah tampilan awal / home menjadi seperti
dibawah ini

14. Tugas
●
Ubahlah tampilan about menjadi seperti
dibawah ini