Tutorial 5: Menghubungkan model data

Widget Tombol Keterampilan App Maker tingkat menengah

Sekitar 30 menit

Apa yang akan Anda buat

Anda akan membuat aplikasi SDM yang mencantumkan karyawan berdasarkan departemen. Seorang pengguna aplikasi dapat:

  • Menambahkan, mengedit, mengurutkan, dan menghapus record departemen dan karyawan
  • Melihat record karyawan melalui dua cara:

    • Berdasarkan departemen saja
    • Berdasarkan departemen atau lihat semua

Aplikasi ini tidak termasuk cara yang dapat digunakan oleh pengguna untuk berpindah antar-halaman. Anda akan menggunakan pemilih halaman dalam mode Pratinjau untuk berpindah antar-halaman.

Apa yang akan Anda pelajari

Tutorial ini mengajarkan cara:

  • Membuat relasi antara model data. Dalam tutorial ini, Anda membuat relasi one-to-many antara model Departemen dan model Karyawan. Satu departemen dapat memiliki banyak karyawan.
  • Menampilkan record yang memenuhi relasi, seperti record untuk semua karyawan di departemen SDM.

Membuat aplikasi Anda

  1. Login ke akun G Suite yang diberikan oleh perusahaan atau sekolah Anda.
  2. Buka App Maker.
  3. Buat aplikasi kosong dan beri nama Relasi.

Menyiapkan model data Departemen

  1. Tambahkan model data Cloud SQL dan beri nama Departemen.
  2. Tambahkan kolom-kolom berikut:

    Nama kolomJenis kolom
    DepartmentString
    LocationString
  3. Klik kolom Department dan klik Setel sebagai kolom tampilan.

    Saat Anda menetapkan Department sebagai kolom tampilan, App Maker menggunakan nilai-nilai kolom untuk mereferensi record dalam model itu. Misalnya, ketika Anda menambahkan widget Dropdown nanti dalam tutorial ini, nilai-nilai kolom Department secara otomatis mengisi opsi dropdown tersebut (dengan ekspresi binding @datasource.items).

Menyiapkan model data Karyawan

  1. Tambahkan model data Cloud SQL dan beri nama Karyawan.
  2. Tambahkan kolom-kolom berikut:

    Nama kolomJenis kolom
    FirstNameString
    LastNameString
    EmailString
    StartDateTanggal

    Anda tidak perlu menyetel kolom tampilan untuk model Karyawan.

Menambahkan relasi

  1. Klik model Departemen dan klik tab Relasi.

  2. Klik Tambahkan Relasi:

    1. Untuk tepi relasi model Departemen, klik panah bawah Jumlah dan pilih Satu. Biarkan nama default untuk tepi relasi ini. Masukkan "Departemen" untuk nama tepi relasi ini.
    2. Untuk model lainnya, klik panah bawah Model dan pilih Karyawan.
    3. Untuk model Karyawan, klik panah bawah Jumlah dan pilih Banyak. Masukkan "Karyawan" untuk nama tepi relasi ini.
    4. Klik Buat.

Membuat halaman tempat Anda dapat menambahkan departemen

  1. Ganti nama halaman NewPage menjadi EditDepartemen. Panel level atas halaman dipilih.
  2. Di Editor Properti, klik properti sumber data dan pilih Departemen.
  3. Tambahkan Formulir insert ke halaman. Pertahankan opsi default untuk formulir ini.
  4. Tutup palet Widget (klik Tutup ).

Membuat halaman untuk menambahkan karyawan

  1. Tambahkan halaman baru. Beri nama EditEmployees, setel sumber data ke Karyawan, dan klik Buat.
  2. Tambahkan Formulir insert ke halaman. Pertahankan opsi default untuk formulir ini.
  3. Tutup palet Widget.

Membuat halaman untuk membuat daftar karyawan berdasarkan departemen

Anda dapat menggunakan relasi untuk membuat tabulasi karyawan berdasarkan departemen melalui dua cara. Tutorial ini menunjukkan kedua pendekatan kepada Anda:

  • Khusus departemen tertentu (diperlihatkan dalam bagian ini)—Gunakan relasinya sebagai sumber data. Tabel yang menggunakan sumber data ini tidak mendukung pengurutan berdasarkan penomoran halaman atau kolom.
  • Departemen tertentu; ketika tidak ada departemen yang dipilih, semua karyawan (diperagakan di bagian berikutnya)—Gunakan filter kueri pada relasi. Tabel yang menggunakan filter kueri mendukung penomoran halaman. Anda juga bisa mengurutkan tabel berdasarkan kolom.

Dalam aplikasi nyata, pilih satu pendekatan. Kami merekomendasikan pendekatan kedua karena itu memakai nomor halaman, bisa diurutkan, dan hanya kosong ketika departemen tidak memiliki karyawan.

Untuk membuat halaman yang berisi daftar karyawan hanya berdasarkan departemen:

  1. Tambahkan halaman, beri nama RelationDatasource, setel sumber data ke Departemen, dan klik Buat.
  2. Tambahkan menu drop-down agar pengguna aplikasi dapat memilih departemen:

    1. Klik Widget dan tambahkan widget Dropdown ke halaman RelationDatasource.
    2. Klik properti opsi dan pilih Opsi lainnya sumber data item. Klik OK. Ini menetapkan nilai yang mungkin dari dropdown ke kolom tampilan sumber data, dalam hal ini berupa nilai-nilai di kolom Department.
    3. Klik properti nilai dan pilih Opsi lainnya sumber data item. Klik OK. Ini menetapkan nilai widget ke item yang dipilih pengguna.
    4. Klik properti label dan masukkan Pilih departemen.
  3. Tambahkan tabel untuk menampilkan record karyawan:

    1. Tambahkan widget Tabel Widget Tabel ke halaman di bawah widget Dropdown. Sejajarkan sisi kiri tabel dan widget dropdown.
    2. Pilih sumber data Departemen: Karyawan (relation) dan klik Berikutnya. Dengan sumber data ini, tabel menampilkan karyawan yang cocok dengan nilai widget dropdown.
    3. Simpan opsi default untuk tabel. Klik Berikutnya dan Selesai.
  4. Tutup palet Widget.

Membuat halaman untuk membuat daftar karyawan berdasarkan departemen atau membuat daftar semua karyawan

  1. Tambahkan halaman, beri nama QueryFilter, setel sumber data ke Karyawan, dan klik Buat.
  2. Tambahkan menu drop-down agar pengguna dapat memilih departemen:

    1. Klik Widget dan tambahkan Dropdown ke halaman QueryFilter.
    2. Untuk properti nilai, pilih ekspresi binding Opsi lainnya sumber data query filter Departemen _equals. Klik OK.
    3. Untuk properti opsi, pilih ekspresi binding dari panel Aplikasi di samping kiri: sumber data Departemen item. Klik OK.
    4. Klik properti label dan masukkan Pilih departemen.
    5. Buka bagian Peristiwa editor properti, klik onValueEdit dan pilih Muat ulang sumber data untuk memuat ulang sumber data dan jalankan kembali kueri ketika nilai menu drop-down diubah oleh pengguna aplikasi.
  3. Tambahkan tabel untuk menampilkan record karyawan yang cocok dengan pemilihan departemen:

    1. Tambahkan Tabel Widget Tabel ke halaman di bawah dropdown. Sejajarkan sisi kiri tabel dan widget dropdown.
    2. Sumber data Inherited: Karyawan dipilih. Pertahankan opsi default untuk tabel; klik BerikutnyaBerikutnyaSelesai.
  4. Tutup palet Widget.

Melihat pratinjau dan menguji aplikasi Anda

  1. Di sudut kanan atas, klik Pratinjau untuk menjalankan aplikasi Anda di tab browser baru.
  2. Pilih akun Anda dan klik Izinkan untuk mengizinkan aplikasi Anda menggunakan informasi spesifik.
  3. Masukkan data departemen:
    1. Dari pemilih halaman, pilih EditDepartments.
    2. Pada formulir Edit Departemen, masukkan nama dan lokasi beberapa departemen. Klik Buat untuk membuat setiap record baru.
  4. Masukkan data karyawan:
    1. Dari pemilih halaman, pilih EditEmployees.
    2. Pada formulir Edit Karyawan, masukkan informasi untuk beberapa karyawan. Klik Buat untuk membuat setiap record baru. Pilih departemen yang berbeda untuk karyawan.
  5. Lihat karyawan berdasarkan departemen pada halaman yang menggunakan sumber data relasi untuk tabel:

    1. Dari pemilih halaman, pilih RelationDatasource.
    2. Pilih departemen dari menu drop-down. Tabel berisi record karyawan untuk departemen tersebut. Ketika tidak ada departemen yang dipilih, tabel akan kosong.
  6. Lihat karyawan berdasarkan departemen pada halaman yang menggunakan filter kueri untuk memuat data untuk tabel:

    1. Dari pemilih halaman, pilih QueryFilter.
    2. Ketika tidak ada departemen yang dipilih, tabel akan berisi semua record karyawan. Pilih departemen dari dropdown. Sekarang tabel tersebut berisi record karyawan untuk departemen tersebut.

Selamat! Anda membuat aplikasi App Maker yang menggunakan relasi.

Langkah berikutnya

  1. Pelajari lebih lanjut tentang relasi.
  2. Pelajari aplikasi contoh Relasi. Ini mirip dengan aplikasi yang baru saja Anda buat.
  3. Pelajari tentang sumber data kueri dan filter.