pg. 1
MEMBANGUN HOMEPAGE – HALAMAN PADA KODULAR Langkah 1: Buat Proyek Baru
1. Masuk ke Kodular dan buat proyek baru.
2. Berikan nama proyek, misalnya "Aplikasi Tiga Halaman".
3. Pada halaman utama proyek (Screen1), atur ukuran dan tata letak sesuai keinginan. Kita akan membuat desain elegan di sini nanti.
Langkah 2: Desain Tampilan Halaman (Screen1) 1. Pada Screen1, tambahkan komponen:
a. Layout – General - Vertical Arrangement untuk layout utama. Pada Bagian Vertical_Arrangement1 Properties ambil Height dan Width dengan mengubahnya ke Fill Parent
b. Label untuk judul aplikasi, misalnya "Halaman 1".
c. Button untuk berpindah ke halaman lain, misalnya "Ke Halaman 2" dan
"Ke Halaman 3".
2. Atur Properti:
a. Vertical Arrangement: Ubah AlignHorizontal dan AlignVertical menjadi center agar elemen berada di tengah.
b. Label: Atur Text menjadi "Selamat Datang di Halaman 1" dengan ukuran font dan warna yang sesuai.
c. Button: Tambahkan dua tombol, Button1 dan Button2, dengan teks "Ke Halaman 2" dan "Ke Halaman 3". Sesuaikan warna dan bentuk tombol agar terlihat elegan.
Gambar 1. Vertical Arrangement pada Kodular
Modul 1. Kodular – Thomson Mary, M.Kom
pg. 2
3. Ulangi langkah ini untuk setiap halaman (Screen2 dan Screen3) dengan judul yang berbeda, yaitu "Halaman 2" dan "Halaman 3".
Langkah 3: Tambahkan Halaman Baru
1. Pada bagian Project, klik ikon "+" untuk menambahkan Screen2 dan Screen3.
2. Setiap halaman baru akan otomatis terbuka. Atur komponen dan tata letak seperti di langkah 2, dengan teks yang berbeda untuk setiap halaman.
Gambar 2. Add Screen pada Kodular Langkah 4: Program Navigasi Antar Halaman
1. Pada Screen1, buka Blocks untuk menambahkan blok kode.
2. Tambahkan blok berikut untuk Button1:
a. Pilih blok when Button1.Click.
b. Tambahkan blok open another screen ScreenName dan isi dengan nama layar tujuan (misalnya, Screen2 untuk menuju Halaman 2).
3. Ulangi untuk Button2 dengan nama layar Screen3.
4. Pada Screen2, tambahkan tombol untuk kembali ke Screen1 dan menuju Screen3:
a. Untuk kembali ke Screen1, tambahkan tombol Button1 di Screen2 dengan open another screen ScreenName menuju Screen1.
b. Untuk menuju Screen3, tambahkan Button2 di Screen2 dengan open another screen ScreenName menuju Screen3.
Modul 1. Kodular – Thomson Mary, M.Kom
pg. 3
5. Pada Screen3, tambahkan tombol untuk kembali ke Screen1 dan Screen2 dengan cara yang sama.
Gambar 3. Blocks pada Kodular (Visual Coding) Langkah 5: Kustomisasi Tampilan Elegan
1. Atur warna latar belakang dan font untuk setiap Label dan Button.
2. Gunakan warna yang harmonis atau tema warna agar aplikasi terlihat lebih profesional.
3. Tambahkan Image atau Icon di setiap halaman jika diperlukan untuk mempercantik tampilan.
Langkah 6: Uji Aplikasi
1. Cari app untuk Kodular namanya : Kodular Companion 2. Link kan dengan QRCode untuk terhubung dengan kodular.io
3. Uji setiap tombol untuk memastikan halaman-halaman dapat dinavigasi dengan benar.
Gambar 4. Test Hasil dengan Koneksi ke Companion Kodular App
Modul 1. Kodular – Thomson Mary, M.Kom
pg. 4
Langkah 7: Build Aplikasi
1. Setelah aplikasi diuji, klik Build > APK untuk mengunduh aplikasi sebagai file APK.
2. Install APK di perangkat Android dan uji aplikasi.
Modul 1. Kodular – Thomson Mary, M.Kom
