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