Langsung ke konten utama

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. :-)

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 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? :-)

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

Postingan populer dari blog ini

Update dari Composer 1 ke Composer 2 di Ubuntu 20.04

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu sebal ketika menjalankan composer install atau composer update karena kecepatannya sangat lambat? Jika iya, berarti kita mengalami hal yang sama. Saya juga mengalami hal tersebut. Saya selalu mengalaminya saat menggunakan Composer versi 1. Dalam pengumumannya pada 24 Oktober 2020, Composer mengumumkan bahwa mereka telah merilis Composer versi 2. Hal yang paling menarik perhatian saya tentu saja pada peningkatan performanya. Anda bisa melihatnya di sini . Gila. itu cepet banget, sih, menurut saya. Tentu, saya tertarik meng- upgrade versi Composer saya agar bisa menikmati kecepatan tersebut. Ingat, ngoding itu membutuhkan waktu yang lama. Cukup ngoding yang lama, composer install jangan.   Sebenarnya, saya sudah menemukan cara meng- upgrade Composer 1 ke Composer 2 di sistem yang saya gunakan, Ubuntu 20.04 di sini . Namun, saya ingin menuliskannya lagi

Cara Mengatasi "Access denied for user 'root'@'localhost' (mysqli_real_connect(): (HY000/1698))" di Ubuntu 20.04 LTS

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu menjumpai error tersebut ketika melakukan update di Ubuntu Anda? Jika iya, berarti kita mengalami hal yang sama. Saya juga selalu mengalami hal tersebut setiap selesai menjalankan sudo apt upgrade . Well . Sebenarnya tidak selalu. Mungkin lebih tepatnya adalah ketika sistem melakukan update pada MySQL-nya. So , pada artikel kali ini saya menunjukkan cara yang saya lakukan untuk mengatasi error tersebut. Ohiya. Sebenarnya, saya sudah lama menemui error ini dan sudah mengatasinya berulang kali dengan membuka kembali link ke StackOverflow yang pernah saya ceritakan pada artikel terdahulu . Lalu, mengapa saya menulis ini? Agar saya lebih mudah saja melakukannya secara terstruktur tanpa harus klik dan scroll-scroll jawaban di StackOverflow tadi. Baiklah, mari kita mulai saja. Langkah-langkah Mengatasinya Pertama, buka terminal . Buka mysql sebagai root

Download Gratis Modul Konsep Jaringan - 802.11

Bismillahirrohmaaniirrohiim. Alhamdulillahi Robbil ‘Alamiin. Pada artikel sebelumnya, saya telah mengabarkan bahwa saya mendapatkan tugas menerjemahkan modul konsep jaringan . Kegiatan mulia tersebut saya lakukan karena saya meninggalkan satu huruf A pada absensi saya. Selengkapnya, baca di sini . Ternyata, dalam satu malam, saya telah menyelesaikannya. Dengan izin Allah Yang Maha Kuasa tentunya. :-D Besoknya, saya cetak modul tersebut, lalu saya kumpulkan. Saya termasuk orang yang hampir terakhir mengumpulkannya karena hanya ada satu orang setelah saya yang ikut mengumpulkan pada hari itu. Dan alhamdulillah , kerjaan saya langsung diterima hari itu juga. Dan lagi, dengan hampir tanpa revisi.