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

Bismillahirromanirrohiim. Alhamdulillahi Robbil ‘Alamiin.

Oke. Saya telah mengungkapkan bahwa saya memiliki banyak tugas kuliah yang harus dikerjakan. Sebenarnya tidak benar-benar banyak, sih.

Pertama-tama, saya merasa berminat mengerjakan tugas mata kuliah Interaksi Manusia dan Komputer yang diajarkan oleh Pak Nur Rosyid. Beliau memberi tugas kepada kami untuk membuat form nikah berbasis web. Tentunya sesuai dengan kriteria tampilan atau user interface dan user experience yang baik.

Sebenarnya, ada alasan lain mengapa saya memilih untuk mengerjakan tugas ini terlebih dahulu. Deadline tugas ini adalah hari Senin, 17 Oktober 2016. Dengan kata lain: besok lusa.


Berikut adalah form-form nikah yang asli.






Oke. Saya harus merencanakan tampilan form yang bagus dan membuatnya nyaman digunakan.

Bagaimana Saya Menyelesaikannya


Untuk membuat aplikasi berbasis web, saya mengacu pada seri tutorial membuat aplikasi berbasis web yang saya dapatkan dari CSS-Tricks: Creating a Web App from Stracth. Meskipun begitu, saya tidak benar-benar mengikuti langkah-langkah yang ada di situ. Mungkin hanya part 1, part 2, dan part 4 yang saya ikuti.

Beberapa dasar ilmu yang akan saya aplikasikan adalah HTML, CSS, PHP, dan MySQL. Saya juga akan menggunakan W3.CSS serta Material Icons untuk memudahkan saya merapikan tampilannya.

Langkah-langkah Penyelesaian


Berikut adalah timeline pengerjaan tugas ini. Saya sesuaikan dengan deadline.

1. Perencanaan alur (Sabtu)
2. List halaman-halaman yang dibutuhkan (Sabtu)
3. Pembuatan sketsa tampilan (Sabtu)
3. Desain database (Sabtu)
4. Pembuatan database (Sabtu)
5. Implementasi desain (Ahad)
6. Implementasi sistem (Ahad)
7. Ujicoba dan impor (Ahad)
8. Ekspor dan presentasi (Senin)

Oke. Mungkin terlihat agak kompleks. Meskipun begitu, saya harus menyelesaikannya sesuai deadline yang telah ditentukan oleh dosen. :-)

Saya harap, pembaca bisa menikmati atau terinspirasi dari proses pengerjaan yang saya lakukan. Atau mungkin Anda punya saran untuk menjadikannya lebih baik? Silahkan berpendapat. :-)

Semoga bermanfaat bagi kita semua. Aamiin.

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

Postingan populer dari blog ini

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

Gambar
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 ...
Baca selengkapnya

Cara Memilih Database MySQL Aktif via Terminal Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command USE nama_database; . Tapi, saya perlu menambahkan konteks di sini. Berikut konteksnya. Konteks Sebelumnya, saya telah menulis cara membuat dan menampilkan semua database di Terminal Ubuntu 22.04. Tentu saja kita tidak hanya bisa melakukan dua hal tersebut. Kita bisa menambahkan data, memperbarui, dan menghapus data dalam suatu database . Namun, sebelum melakukan hal tersebut, kita perlu memilih dulu database yang akan kita kelola. Mengapa? Karena jika kita langsung coba melakukan suatu operasi dalam database sementara belum ada database yang kita pilih, MySQL akan menolak. Misal, kita ingin menampilkan seluruh tabel yang ada dalam database seperti tampilan di bawah. MySQL akan menolak. Karena itu, kita perlu terlebih dahulu memilih database yang ingin kita kelola. Hal pertama yang perlu kita lakukan tentu saja membuka Comman...
Baca selengkapnya

Cara Install DBeaver Up-To-Date di Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command sudo apt install dbeaver-ce . Tapi, tentu kita perlu melakukan beberapa hal terlebih dahulu. Mengenal DBeaver DBeaver merupakan aplikasi yang bisa kita gunakan untuk mengelola berbagai macam database . Kita bisa melakukan hal-hal yang biasanya bisa kita lakukan di phpMyAdmin, pgSQL, dan lain sebagainya. Hal yang sangat menarik dari aplikasi ini adalah dia bisa kita gunakan untuk berbagai macam jenis DBMS. Misalnya, kita bisa menyambungkannya dengan MySQL , MariaDB , PostgreSQL , SQL Server , SQLite , dan lain sebagainya. Anda bisa membaca selengkapnya pada website resminya di sini . Hal menarik lainnya adalah dia cross-platform . DBeaver bisa kita gunakan di Ubuntu, Windows, bahkan MacOS. Tentu pada artikel kali ini, kita akan fokus membahas instalasi di Ubuntu. Saya Sudah Mencobanya, Tetapi Tidak Berhasil Apabila Anda langsung ...
Baca selengkapnya