search

aryddntaabbss / SI-HMTI

0 stars 0 forks source link

Kontak Pages #5

Closed aryddntaabbss closed 2 weeks ago

aryddntaabbss commented 2 weeks ago

To Do

  1. Setup Proyek

    • Deskripsi: Inisialisasi proyek dengan ReactJS dan Tailwind, serta konfigurasi awal untuk integrasi dengan backend Laravel.
    • Detail: Buat struktur folder, pasang dependensi yang dibutuhkan, dan siapkan konfigurasi dasar untuk Tailwind dan axios (untuk API calls).

  2. Rancangan UI/UX

    • Deskripsi: Buat wireframe dan desain mockup untuk halaman Kontak.
    • Detail: Gunakan alat seperti Figma atau Adobe XD untuk merancang layout dan skema warna yang konsisten dengan brand.

In Progress

  1. Komponen Form Kontak

    • Deskripsi: Kembangkan komponen ReactJS untuk formulir kontak menggunakan TailwindCSS.
    • Detail: Buat form yang mencakup field seperti nama, email, nomor telepon, dan pesan. Tambahkan validasi form di sisi frontend.

  2. Komponen Informasi Kontak

    • Deskripsi: Kembangkan komponen ReactJS untuk menampilkan informasi kontak perusahaan seperti alamat, nomor telepon, dan email.
    • Detail: Gunakan Tailwind untuk membuat tampilan yang responsif dan mudah dibaca.

  3. Peta Lokasi

    • Deskripsi: Integrasikan peta lokasi menggunakan layanan seperti Google Maps API atau Mapbox.
    • Detail: Tampilkan lokasi kantor perusahaan dengan marker yang jelas dan informatif.

Review

  1. Integrasi API dengan Backend Laravel

    • Deskripsi: Hubungkan frontend dengan backend Laravel untuk mengirim data form kontak dan mengambil informasi kontak dinamis.
    • Detail: Gunakan axios untuk melakukan POST request dengan data form ke endpoint Laravel dan tampilkan informasi kontak yang diambil dari backend.

  2. Pengujian dan Debugging

    • Deskripsi: Uji halaman kontak untuk memastikan form berfungsi dengan baik dan semua informasi tampil dengan benar.
    • Detail: Lakukan pengujian manual untuk memastikan validasi form, integrasi API, dan responsivitas halaman.

Done

  1. Deploy dan Dokumentasi
    • Deskripsi: Deploy halaman kontak ke lingkungan staging/produksi dan buat dokumentasi pengguna serta pengembang.
    • Detail: Gunakan layanan hosting yang sesuai, misalnya Vercel untuk frontend dan Heroku atau DigitalOcean untuk backend. Buat dokumentasi cara penggunaan dan panduan pengembang.