Interaksi Manusia dan Komputer: Membuat Form Nikah Berbasis Web Bagian 3

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil ‘Alamiin.

Pada bagian pertama seri artikel ini, saya telah memaparkan perencanaan. Pada artikel keduanya, saya telah memaparkan alur dan halaman yang dibutuhkan dalam pembuatan website form pernikahannya.

Jadi, yang akan menjadi bahasan pada artikel ini adalah desain kasar, desain database, serta pembuatan database-nya. Sesuai dengan rencana tugas yang harus saya selesaikan hari ini. :-)

Sketsa Tampilan


Pertama, marilah kita membuat sketsa kasar website ini. Website ini memiliki empat fitur utama: input, menampilkan daftar data, menampilkan rincian data, dan menghapus data.

Coretan yang saya buat adalah seperti ini.

Tidak jelas, ya? Yah. Namanya juga gambaran kasar. :v

Saya akan memecahnya agar terlihat lebih jelas.

Sketsa di atas merupakan halaman yang mewakili fungsi input data. Setiap halaman input yang saya buat memiliki fitur input secara teks maupun secara dropdown ditambah dengan tombol untuk beralih ke langkah selanjutnya.

Maka dari itu, saya merasa bahwa sketsa di atas cukup mewakilinya: Judul halaman, deskripsi singkat halaman, field input teks, field input dropdown, tombol submit, kredit pada footer, serta link ke halaman daftar data pernikahan pada footer-nya.

Sketsa di atas mewakili fitur menampilkan data pernikahan. Data yang ditampilkan hanya nama mempelai pria dan wanita serta tempat pernikahannya. Selain itu, terdapat fitur hapus data beserta link untuk menampilkan rincian data tersebut.

Elemen-elemen pada halaman di atas adalah sebagai berikut: Judul halaman, deskripsi singkat halaman, daftar data pernikahan disertai link untuk menampilkannya secara lengkap dan tombol hapus, serta footer yang mengandung kredit dan link ke halaman input.

Wah. Buram. Tak apa lah.

Sketsa di atas mewakili fitur untuk menampilkan rincian data yang telah di-input-kan. Cara menampilkannya saya atur mirip dengan form pada formulir aslinya.

Beberapa elemen lain yang terdapat sama dengan halaman lainnya: Judul halaman, deskrispsi singkat halaman, serta footer yang berisi kredit.

Sketsa di atas merupakan halaman konfirmasi penghapusan data.

Jelas sekali. Tidak ada elemen lain selain peringatan. Hanya ada dua pilihan di sini: OK atau Batal. Kedua tombol tersebut menuju pada halaman yang sama: list data. Namun, tentu saja, tujuan yang berbeda.

Desain Database


Desain database yang saya buat untuk website ini terdiri dari beberapa tabel sebagai berikut.

- Tabel perikahan – memuat data-data seputar pernikahan seperti tanggal, waktu, dan lain sebagainya.
- Tabel n7 – tentu saja untuk menyimpan data yang hanya ada di formluir n7.
- Tabel calon_pria – berisi biodata calon mempelai pria.
- Tabel calon_wanita – berisi biodata calon mempelai wanita.
- Tabel ibu – berisi biodata ibu dari masing-masing calon mempelai.
- Tabel ayah – berisi biodata ayah dari masing-masing calon mempelai.
- Tabel pencatatan – berisi data yang diperlukan untuk keperluan pencatatan pernikahan.
- Tabel lampiran – menyimpan data-data lampiran yang disertakan.
- Tabel mantan – berisi biodata mantan suami/istri dari masing-masing mempelai yang telah meninggal.

Tabel mantan. Oh, mantan. :’)

Eh. Mengapa pipiku basah?

Pembuatan Database


Langkah terakhir yang saya kerjakan hari ini: mengimplementasikan database yang telah saya rancang sebelumnya.

Yeah.

Langkah yang perlu dilakukan? Mudah saja.

Pertama, saya menyalakan localhost saya. Sebut saja saya menyalakan XAMPP.


Kemudian, saya membuka phpMyAdmin dan membuat database baru. Namanya: catatan_nikah.


Selanjutnya, saya membuat tabel-tabel beserta field-field sesuai dengan yang telah saya rencanakan sebelumnya.

Voila!

Database-nya siap diisi dan digunakan! :-D

Alhamdulillah. Cukup di sini tugas saya pada hari ini. Hari berikutnya merupakan hari yang lumayan berat: implementasi kode.

Semoga saya dan kita semua selalu diberi kekuatan untuk menjalankan tugas-tugas yang diberikan oleh-Nya. Aamiin. -/\-

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

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

Cara Install DBeaver Up-To-Date di Ubuntu 22.04

Cara Mengatasi "Login without a password is forbidden by configuration (see AllowNoPassword)" di Ubuntu 20.04 LTS