Deskripsi Produk

Proyek ini bertujuan untuk membuat sebuah aplikasi pendaftaran berbasis mobile menggunakan MIT App Inventor. Aplikasi ini memiliki satu halaman yang berisi form data diri, termasuk nama, kelas, alamat, tempat lahir, dan tanggal lahir. Form ini dirancang dengan antarmuka yang sederhana namun efektif, agar pengguna dapat dengan mudah mengisi informasi mereka.

Pada halaman tersebut, pengguna akan mengisi setiap kolom yang tersedia, kemudian menekan tombol 'DAFTAR'. Setelah tombol ditekan, aplikasi akan memproses data yang dimasukkan dan menampilkannya sebagai output pada layar yang sama.

Pembuatan aplikasi ini membantu pengguna memahami konsep input dan output pada pengembangan aplikasi mobile. Aplikasi ini digunakan untuk pendaftaran sederhana, seperti untuk pendaftaran acara, formulir keanggotaan, atau penggunaan dalam lingkup sekolah. Selain itu, proyek ini juga memberikan wawasan tentang penggunaan komponen-komponen dasar MIT App Inventor, seperti TextBox, Label, dan Button, serta blok kode yang mengelola alur data antar komponen-komponen tersebut."

Analisis kebutuhan : 

Form pendaftaran ini membutuhkan beberapa input berupa:

• Nama
• Kelas
• Nomer Absen
• Alamat
• Tempat Lahir
• Tanggal Lahir

Keluaran dari aplikasi ini adalah data yang ditampilkan kembali setelah pengguna menekan tombol 'DAFTAR'.

Komponen Program

1. Desain

Pada gambar tersebut beberapa kolom yang menunjukkan data diri yang harus diisi oleh pengguna, yaitu:

• Nama: texbox untuk memasukan nama lengkap.
• No Absen: Texbox untuk memasukkan nomor absen siswa.
• Kelas: Texbox untuk memasukkan kelas pengguna.
• Alamat: Texbox untuk memasukkan alamat lengkap.
• Tempat Lahir: Listpicker atau menu untuk memilih kota kelahiran.
• Tanggal Lahir: Datepicker untuk memasukkan tanggal lahir pengguna.

Tombol "Daftar" berwarna merah yang berfungsi untuk memproses data yang telah diisi dan melanjutkan ke tahap berikutnya.
Di bagian bawah, terdapat area Informasi dan DATA DIRI yang akan menampilkan data diri yang telah dimasukkan oleh pengguna setelah menekan tombol "Daftar".

2. Komponen

• Screen1: Layar utama aplikasi, berisi semua komponen yang akan ditempatkan.
• TableArrangement1: Susunan tabel yang digunakan untuk mengatur posisi komponen dalam bentuk (baris dan kolom). Disini, saya menambahkan beberapa label dan kotak teks.
• Label2, Label3, Label4, Label5, Label6, Label7: Komponen ini saya gunakan untuk teks statis yang saya gunakan untuk deskripsi atau penjelasan kepada pengguna. Label ini saya gunakan untuk menjelaskan apa fungsi dari kotak teks atau komponen di sebelahnya.
• TextBox1, TextBox2, TextBox3, TextBox4: Kotak teks ini saya gunakan untuk pengguna agar dapat memasukkan data atau informasi. Misalnya, input seperti nama, alamat, atau data lainnya yang perlu diisi pengguna sesuai dengan susunan dari label di sebelahnya.
• DatePicker1: Komponen untuk memilih tanggal. Saya gunakan untuk input tanggal dari pengguna.
• ListPicker1: Komponen yang saya gunakan untuk pengguna memilih satu kota dari kota-kota yang sudah saya siapkan. Ketika ListPicker ditekan, daftar pilihan kota akan muncul untuk dipilih pengguna.
• Button2: komponen ini saya gunakan untuk melanjutkan dan mengeluarkan output dari semua yang sudah di isi oleh pengguna.
• ListView1: Komponen yang menampilkan output secara vertikal. Digunakan untuk menampilkan output data atau informasi dalam bentuk daftar yang dapat discrooling.
• HorizontalArrangement1: Susunan horizontal yang digunakan untuk pengaturan komponen dalam satu baris secara horizontal. Berguna untuk mengelompokkan komponen-komponen yang lebih baik ditampilkan secara sejajar.

3. Kode Program

Blok Kode Pertama (DatePicker1-AfterDateSet):

• Fungsi: Kode digunakan saat pengguna memilih tanggal.
  - Setelah pengguna memilih tanggal (hari, bulan, dan tahun), aplikasi akan menampilkan tanggal yang dipilih dalam bentuk teks di area DatePicker1.
  - Tanggal ini dipecah menjadi bagian "Hari", "Bulan", dan "Tahun", lalu digabung menjadi satu kalimat seperti “20/10/2006”.

Blok Kode Kedua (ListPicker1 - AfterPicking):

• Fungsi: Kode ini berjalan saat pengguna memilih sesuatu dari daftar yang tersedia.
  - Setelah pengguna memilih sesuatu dari daftar pilihan (daftar kota), pilihan tersebut ditampilkan di layar, tepatnya di area ListPicker1.

Blok Kode Ketiga (Button2 - Click):

• Fungsi: Kode ini berjalan saat pengguna menekan tombol. - Ketika tombol ditekan, aplikasi akan mengumpulkan semua informasi yang dimasukkan oleh pengguna, seperti nama, nomor absen, kelas, alamat, tempat lahir, dan tanggal lahir. - Semua informasi ini kemudian digabung menjadi satu teks panjang, misalnya: “DATA DIRI: Nama: Ammar Yasir, Absen: 15, Kelas: XII-A, Alamat: -, Tempat Lahir: klaten, Tanggal Lahir: 20/10/2006." - Teks ini akan ditampilkan di layar (Label1), sehingga pengguna bisa melihat informasi yang sudah mereka masukkan.

Blok Kode Keempat (Button2 - Click untuk ListView1):

• Fungsi: Kode ini juga berjalan saat tombol ditekan. - Selain menampilkan informasi di layar, aplikasi juga akan menyimpan informasi tersebut di dalam daftar (ListView1). Jadi, informasi yang dimasukkan akan terlihat dalam bentuk daftar, misalnya: “DATA DIRI: Nama: Ammar Yasir, Absen: 15, Kelas: XII-A, Alamat: -, Tempat Lahir: klaten, Tanggal Lahir: 20/10/2006."

Alur Keseluruhan:
1. Pengguna mengisi data “TEXT BOX”: Seperti nama, absen, kelas, dan lainnya.
2. Pengguna memilih tanggal “DATEPICKER”: Tanggal yang dipilih akan ditampilkan dalam kotak tanggal.
3. Pengguna memilih sesuatu dari daftar “LISTPICKER”: Pilihan pengguna akan ditampilkan dalam kotak pilihan.
4. Pengguna menekan tombol “DAFTAR” : Semua data yang telah diisi akan ditampilkan pada informasi (listview) dan data diri (label).

Hasil dan Uji Coba