📜 Student Information

• Name: Ishaq Adheltyo
• Class: D
• Student Number: 05111940000167

Soal

1. Definisikan fitur dari aplikasi yang akan dibangun
2. Rancang aplikasi menggunakan Figma
3. Implementasikan aplikasi. Boleh dikerjakan secara kelompok, didokumentasikan, dan dibuat video demo/ presentasinya di youtube. Semua hasil pekerjaan disatukan di blognya masing-masing.

Jawaban

1. Definisikan fitur dari aplikasi yang akan dibangun

   • Aktor Admin
     • Login.
     • Membuat, melihat, menyunting, dan menghapus data siswa.
     • Membuat, melihat, menyunting, dan menghapus data orang tua.
     • Membuat, melihat, menyunting, dan menghapus data guru.
     • Membuat, melihat, menyunting, dan menghapus data slip pembayaran.
   • Aktor Guru
     • Login
     • Membuat, melihat, menyunting, dan menghapus data ujian.
     • Membuat, melihat, menyunting, dan menghapus data kehadiran siswa.
     • Membuat, melihat, menyunting, dan menghapus data materi pelajaran.
     • Membuat, melihat, menyunting, dan menghapus data tugas siswa.
     • Membuat, melihat, menyunting dan menghapus data kelas siswa.
   • Aktor Siswa
     • Login.
     • Melihat jadwal kelas / pelajaran.
     • Melihat nilai tugas dari mata pelajaran.
     • Melihat nilai ujian dari mata pelajaran.
     • Membuat, melihat, menyunting, dan menghapus data tugas.
     • Melihat materi pelajaran.
   • Orangtua
     • Login.
     • Melihat Invoice Pembayaran.
     • Melakukan pembayaran (Pembayaran Tagihan).
     • Melihat kredensial anak (siswa).

2. Rancang aplikasi menggunakan Figma

   Untuk Design Aplikasi ada 3 fitur yg saya design menggunakan figma:

   • Login Page

     

   • Manajemen Data Orangtua oleh Aktor Admin

     

   • Melakukan Pembayaran (Pembayaran Tagihan) oleh Orangtua

     

   Berikut untuk link Figma lengkap:

   https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FZFKuTSAyb9kI2a0gzdqdYs%2FWeb-Programming-Final-Exam%3Fnode-id%3D0%253A1

3. Implementasikan aplikasi. Boleh dikerjakan secara kelompok, didokumentasikan, dan dibuat video demo/ presentasinya di youtube. Semua hasil pekerjaan disatukan di blognya masing-masing.

   • Anggota Kelompok:
     • Fais Rafii Akbar Hidiya - 05111940000026
     • M. Farhan Haykal - 05111940000141
     • Ishaq Adheltyo - 05111940000167
     • Rahadian Adjie Mahesa - 05111940000221
   • Link Github:

   https://github.com/ishaqadhel/pweb-final-test

   • Link Youtube:

   - YouTube

   Untuk menyelesaikan EAS nomor 3, kami membuat aplikasi dengan memilih beberapa fitur dari yang disediakan. Untuk jenis fitur yang kami pilih sebagai berikut:

   

   Dari jenis fitur yang ada kami memilih:

   1. Admin - Dapat membuat akun orangtua
   2. Admin - Dapat membuat tagihan sekolah
   3. Admin - Memiliki Dashboard yang lengkap
   4. Parent - Memiliki Portal Login
   5. Parent - Dapat melihat invoice atau tagihan sekolah

   Sebelum beranjak ke pembuatan aplikasi kami merancang database terlebih dahulu sesuai kebutuhan fitur, gambar CDM sebagai berikut:

   

   Setelah Design Database, kami langsung berbagi tugas dengan tim, ada yang membuat tampilan (front-end) dan ada yang membuat backend. Pada aplikasi ini kami tidak menggunakan framework sama sekali semuanya native seperti HTML, CSS, dan PHP. Untuk CSS kami menggunakan pengganti bootstrap seperti TailwindCSS.

   Karena pada aplikasi ini code nya cukup banyak saya disini akan menjelaskan maksud dari file yang ada pada source code, untuk detil code nya dapat dilihat di link github diatas.

   

   Untuk folder aplikasinya sendiri kami memiliki struktur sebagai berikut:

   1. mysql → file mysql dari docker untuk database development
   2. nginx → untuk config webserver memunculkan website
   3. src → berisi main application (selain folder di src berarti halaman)
   4. classes → untuk menaruh class php yang penting seperti model dari database, connect database, dan masalah autentikasi.
   5. components → untuk view yang dipakai berulang kali seperti footer dan header
   6. core → untuk file inti dari aplikasi berguna memanggil semua class yang ada dan menjalankan aplikasi
   7. public → tempat image disimpan
   8. template → dipakai untuk menaruh static html sebelum digunakan pada backend
   9. docker → kami menggunakan docker untuk development environment jadi kami tidak perlu instalasi manual php dan mysql (pengganti xampp)

   👁️ Screenshot Aplikasi

   • Login

     

   • Admin Dashboard

     

   • Admin Parent Account List

     

   • Admin Parent Account Create

     

   • Admin Invoice List

     

   • Admin Invoice Create

   • Parent Dashboard

   • Parent Invoice List

   Jika ingin mencoba pada aplikasi kami dan menggunakan script DML yang ada, berikut adalah autentikasi dari akun admin:

   • email: [email protected]
   • password: password