Interaksi Manusia dan Komputer: Membuat Form Nikah Berbasis Web Bagian 2
Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil ‘Alamiin.
Pada bagian satu seri artikel ini, saya telah memaparkan rencana saya untuk tugas pembuatan form nikah berbasis web. Saya sudah menentukan timeline pengerjaannya. Pada hari pembuatan rencana tersebut, hari ini (Sabtu, 15 Oktober 2016) saya harus menyelesaikan alur, halaman-halaman yang dibutuhkan, sketsa tampilan, desain database, dan pembuatan database website tersebut.
Tentu saja, artikel ini akan membahas tentang pekerjaan yang telah saya selesaikan pada hari ini. :-)
Seperti yang bisa kita lihat pada gambar-gambar pada artikel sebelumnya, ada banyak field yang isinya sama pada ketujuh formulir tersebut. Tentu hal ini membuat repot pengisi form karena harus mengisikan data yang sama berkali-kali. Membuang cukup banyak waktu menurut saya.
Yah, meskipun saya belum pernah mengisinya. :v
Saya perlu membuat formulir yang tidak terdapat pengulangan field saat diisikan. Namun, sebelumnya saya harus membuat alur jalannya website tersebut. Berikut rancangan alur yang saya buat.
Saya membuat alur tersebut dengan menggunakan Libre Office Draw, program pengolah flowchart maupun diagram yang terdapat dalam paket aplikasi Libre Office. Program powerfull tersebut bisa diunduh secara gratis dari sini.
Oke. Kembali lagi ke pembahasan tentang alur tersebut.
Saya membuat alur tersebut secara garis besar. Aplikasi web tersebut memiliki fitur utama meng-input-kan data pernikahan (yang terangkum dalam kotak Halaman Awal (Input)), menampilkan daftar data pernikahan (yang diwakili oleh kotak List Pernikahan), menampilkan data ketika menjadi form (yang diwakili oleh Rincian Pernikahan), dan menghapus data pernikahan (yang diwakili oleh kotak Hapus).
Tanda panah pada gambar tersebut menunjukkan pada satu fitur kita bisa menuju ke fitur yang mana. Panah dua arah berarti saat user berada pada salah satu fitur tersebut, user bisa beralih ke salah satu halaman sebaliknya.
Em. Sepertinya saya perlu menunjukkan contohnya.
Begini. Ketika user menggunakan fitur input, dia bisa menemukan link yang menghubungkan halaman tersebut ke fitur list pernikahan. User bisa beralih ke fitur list pernikahan.
Begitu pula saat user berada pada fitur list pernikahan, user bisa menemukan link ke halaman input dan bisa beralih ke fitur tersebut. Hal ini karena tanda panah tersebut bersifat dua arah.
Namun, ketika user berada pada fitur input, dia tidak bisa mengakses fitur hapus karena tidak ada tanda panah yang menghubungkan kedua fitur tersebut.
Cukup jelas, bukan? :-)
Setelah mengetahui alurnya, saya kemudian mendaftar halaman apa saja yang saya butuhkan.
Seperti yang telah saya paparkan sebelumnya, fitur input saya bagi menjadi beberapa halaman. Hal ini saya lakukan agar user tidak merasa keberatan mengisi form tersebut.
User tentu merasa santai jika hanya mengisi sedikit isian dalam satu halaman daripada mengisi banyak halaman sekaligus dalam satu halaman. Ini sesuai dengan teori yang pernah saya pelajari pada mata kuliah Interaksi Manusia dan Komputer. Saya juga pernah membaca teori seperti ini, namun entah dari mana. Sepertinya di artikel yang berhubungan dengan user experience (UX).
Untuk fitur input, berikut adalah halaman-halaman yang saya butuhkan.
1. index.php – saya menggunakan input sebagai halaman utama website ini karena fitur utamanya memang ini.
2. calonpria.php – halaman ini digunakan untuk mengisi data calon mempelai pria. Sesuatu yang ingin saya isi di masa depan. :-D
3. ayahcalonpria.php – halaman ini digunakan untuk mengisi data ayah dari calon mempelai pria.
4. ibucalonpria.php – halaman ini digunakan untuk mengisi data ibu dari calon mempelai pria.
5. calonwanita.php – halaman digunakan untuk mengisi data calon mempelai wanita. Saya sudah mempunyai nama yang akan saya isikan di situ. Ehem.
6. ayahcalonwanita.php – halaman ini digunakan untuk mengisi data ayah dari calon mempelai pria.
7. ibucalonwanita.php – halaman ini digunakan untuk mengisi data ibu dari calon mempelai pria.
8. mantan.php – aw. Halaman ini memang untuk mengisi biodata mantan suami/istri dari kedua calon mempelai tersebut. Halaman ini hanya muncul jika salah satu atau keduanya pernah menikah dan sudah bercerai karena pasangannya meninggal tentunya.
9. pelaksanaan.php – halaman ini digunakan untuk mengisikan data tentang pelaksanaan pernikahan kedua calon mempelai tersebut.
10. kelengkapan.php – halaman ini digunakan untuk mengisikan tentang kelengkapan berkas untuk keperluan pernikahan mereka. Kelengkapan berkas yang dimaksud di sini adalah nomor lampiran-lampiran yang dibutuhkan dan lampiran-lampiran lain.
11. n7.php – halaman ini digunakan untuk melengkapi sesuatu yang perlu diisikan pada formulir N-7 yang belum diisikan pada halaman-halaman sebelumnya.
Halaman-halaman tersebut bertujuan untuk memenuhi field-field yang perlu diisikan pada formulir pernikahan KUA.
Untuk fitur lainnya, saya hanya membutuhkan masing-masing satu halaman. Berikut rinciannya.
1. data.php – halaman ini digunakan untuk menampilkan daftar pernikahan yang sudah di-input-kan dalam database. Yang ditampilkan hanya ringkasannya.
2. tampil.php – halaman ini digunakan untuk menampilkan rincian data pernikahan yang telah diisikan. Data yang ditampilkan sebisa mungkin mirip dengan formulir-formulir pada versi cetaknya.
3. hapus.php – halaman ini digunakan untuk menampilkan konfirmasi penghapusan salah satu data pernikahan yang ada di database.
Oke. Rencana dasar dari website ini sudah cukup. Artikel berikutnya adalah tentang desain kasar, desain database, serta pembuatan database-nya.
Semoga lancar dan bermanfaat bagi kita semua. :-)
Bagian 2 – Alur dan Daftar Halaman
Bagian 3 – Sketsa Kasar, Desain Database, dan Pembuatan Database
Pada bagian satu seri artikel ini, saya telah memaparkan rencana saya untuk tugas pembuatan form nikah berbasis web. Saya sudah menentukan timeline pengerjaannya. Pada hari pembuatan rencana tersebut, hari ini (Sabtu, 15 Oktober 2016) saya harus menyelesaikan alur, halaman-halaman yang dibutuhkan, sketsa tampilan, desain database, dan pembuatan database website tersebut.
Tentu saja, artikel ini akan membahas tentang pekerjaan yang telah saya selesaikan pada hari ini. :-)
Alur Website
Seperti yang bisa kita lihat pada gambar-gambar pada artikel sebelumnya, ada banyak field yang isinya sama pada ketujuh formulir tersebut. Tentu hal ini membuat repot pengisi form karena harus mengisikan data yang sama berkali-kali. Membuang cukup banyak waktu menurut saya.
Yah, meskipun saya belum pernah mengisinya. :v
Saya membuat alur tersebut dengan menggunakan Libre Office Draw, program pengolah flowchart maupun diagram yang terdapat dalam paket aplikasi Libre Office. Program powerfull tersebut bisa diunduh secara gratis dari sini.
Oke. Kembali lagi ke pembahasan tentang alur tersebut.
Saya membuat alur tersebut secara garis besar. Aplikasi web tersebut memiliki fitur utama meng-input-kan data pernikahan (yang terangkum dalam kotak Halaman Awal (Input)), menampilkan daftar data pernikahan (yang diwakili oleh kotak List Pernikahan), menampilkan data ketika menjadi form (yang diwakili oleh Rincian Pernikahan), dan menghapus data pernikahan (yang diwakili oleh kotak Hapus).
Tanda panah pada gambar tersebut menunjukkan pada satu fitur kita bisa menuju ke fitur yang mana. Panah dua arah berarti saat user berada pada salah satu fitur tersebut, user bisa beralih ke salah satu halaman sebaliknya.
Em. Sepertinya saya perlu menunjukkan contohnya.
Begini. Ketika user menggunakan fitur input, dia bisa menemukan link yang menghubungkan halaman tersebut ke fitur list pernikahan. User bisa beralih ke fitur list pernikahan.
Begitu pula saat user berada pada fitur list pernikahan, user bisa menemukan link ke halaman input dan bisa beralih ke fitur tersebut. Hal ini karena tanda panah tersebut bersifat dua arah.
Namun, ketika user berada pada fitur input, dia tidak bisa mengakses fitur hapus karena tidak ada tanda panah yang menghubungkan kedua fitur tersebut.
Cukup jelas, bukan? :-)
Daftar Halaman yang Dibutuhkan
Setelah mengetahui alurnya, saya kemudian mendaftar halaman apa saja yang saya butuhkan.
Seperti yang telah saya paparkan sebelumnya, fitur input saya bagi menjadi beberapa halaman. Hal ini saya lakukan agar user tidak merasa keberatan mengisi form tersebut.
User tentu merasa santai jika hanya mengisi sedikit isian dalam satu halaman daripada mengisi banyak halaman sekaligus dalam satu halaman. Ini sesuai dengan teori yang pernah saya pelajari pada mata kuliah Interaksi Manusia dan Komputer. Saya juga pernah membaca teori seperti ini, namun entah dari mana. Sepertinya di artikel yang berhubungan dengan user experience (UX).
Untuk fitur input, berikut adalah halaman-halaman yang saya butuhkan.
1. index.php – saya menggunakan input sebagai halaman utama website ini karena fitur utamanya memang ini.
2. calonpria.php – halaman ini digunakan untuk mengisi data calon mempelai pria. Sesuatu yang ingin saya isi di masa depan. :-D
3. ayahcalonpria.php – halaman ini digunakan untuk mengisi data ayah dari calon mempelai pria.
4. ibucalonpria.php – halaman ini digunakan untuk mengisi data ibu dari calon mempelai pria.
5. calonwanita.php – halaman digunakan untuk mengisi data calon mempelai wanita. Saya sudah mempunyai nama yang akan saya isikan di situ. Ehem.
6. ayahcalonwanita.php – halaman ini digunakan untuk mengisi data ayah dari calon mempelai pria.
7. ibucalonwanita.php – halaman ini digunakan untuk mengisi data ibu dari calon mempelai pria.
8. mantan.php – aw. Halaman ini memang untuk mengisi biodata mantan suami/istri dari kedua calon mempelai tersebut. Halaman ini hanya muncul jika salah satu atau keduanya pernah menikah dan sudah bercerai karena pasangannya meninggal tentunya.
9. pelaksanaan.php – halaman ini digunakan untuk mengisikan data tentang pelaksanaan pernikahan kedua calon mempelai tersebut.
10. kelengkapan.php – halaman ini digunakan untuk mengisikan tentang kelengkapan berkas untuk keperluan pernikahan mereka. Kelengkapan berkas yang dimaksud di sini adalah nomor lampiran-lampiran yang dibutuhkan dan lampiran-lampiran lain.
11. n7.php – halaman ini digunakan untuk melengkapi sesuatu yang perlu diisikan pada formulir N-7 yang belum diisikan pada halaman-halaman sebelumnya.
Halaman-halaman tersebut bertujuan untuk memenuhi field-field yang perlu diisikan pada formulir pernikahan KUA.
Untuk fitur lainnya, saya hanya membutuhkan masing-masing satu halaman. Berikut rinciannya.
1. data.php – halaman ini digunakan untuk menampilkan daftar pernikahan yang sudah di-input-kan dalam database. Yang ditampilkan hanya ringkasannya.
2. tampil.php – halaman ini digunakan untuk menampilkan rincian data pernikahan yang telah diisikan. Data yang ditampilkan sebisa mungkin mirip dengan formulir-formulir pada versi cetaknya.
3. hapus.php – halaman ini digunakan untuk menampilkan konfirmasi penghapusan salah satu data pernikahan yang ada di database.
Oke. Rencana dasar dari website ini sudah cukup. Artikel berikutnya adalah tentang desain kasar, desain database, serta pembuatan database-nya.
Semoga lancar dan bermanfaat bagi kita semua. :-)
Artikel Dalam Seri Ini
Bagian 1 – Perencanaan
Bagian 2 – Alur dan Daftar Halaman
Bagian 3 – Sketsa Kasar, Desain Database, dan Pembuatan Database
Komentar
Posting Komentar