Post on 08-Jul-2015
description
Pemrograman Web Lanjut
Membuat Aplikasi Kesiswaan Menggunakan Yii Framework
Bagian 3
Tujuan
● Mengetahui bagaimana cara mengubah tampilan tabel
● Mengetahui bagaimana cara membuat dropdown yang berelasi dari tabel lain
● Mengetahui bagaimana cara membuat menu siswa
Modifikasi tampilan tabel
● http://localhost/yii/demos/kesiswaan/index.php?r=siswa/admin
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
Modifikasi tampilan tabel● Edit file protected/views/siswa/admin.php
Modifikasi tampilan tabel
● Simpan dan rasakan perbedaannya
Membuat dropdown dari relasi tabel lain
● http://localhost/yii/demos/kesiswaan/index.php?r=siswa/create
● Sebelum :
Membuat dropdown dari relasi tabel lain
● Sesudah :
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
Membuat dropdown dari relasi tabel lain
● Edit file protected/views/siswa/_form.php
● Baris diatas digunakan untuk membuat tampilan label dan textbox sejajar
Membuat menu siswa
● Sebelum Login
● Setelah Login
● Terdapat tambahan menu siswa, yang akan muncul ketika user sudah login
Membuat menu siswa
● Edit file protected/views/layouts/main.php
● Simpan dan rasakan perbedaannya
Tugas
● Ubahlah tampilan awal / home menjadi seperti dibawah ini
Tugas
● Ubahlah tampilan about menjadi seperti dibawah ini