Mission 4: Enhancing Interactivity with DOM & JS

• Nama: Ikhsan Satriadi
• NIM: 241511080
• Prodi: D3 - Teknik Informatika
• Kelas: 2C

Mata Kuliah Proyek 3: Pengembangan Perangkat Lunak Berbasis Web

Deskripsi Proyek

Aplikasi SIAKAD Mini adalah sebuah sistem informasi akademik sederhana yang dirancang untuk memudahkan pengelolaan data mahasiswa dan mata kuliah di lingkungan perguruan tinggi. Aplikasi ini dibangun menggunakan framework CodeIgniter 4 dan mengimplementasikan fitur autentikasi serta otorisasi pengguna dengan bantuan library CodeIgniter Shield.

🆕 Aplikasi ini telah ditingkatkan interaktivitasnya dengan menambahkan validasi form di sisi frontend menggunakan JavaScript dan DOM manipulation. Beberapa fitur baru juga telah ditambahkan untuk meningkatkan pengalaman pengguna, seperti konfirmasi modal untuk tindakan penting dan kemampuan untuk melakukan aksi secara massal (bulk actions).

Fitur utama dari aplikasi ini meliputi:

Auth

• Login
  • Frontend form validation \w DOM manipulation 🆕
• Authentication with JWT
• Authorization with roles/group (admin, student)

Admin area

• Dashboard
  • Show total number of users
  • Show total number of courses
• Courses management
  • Show course list with pagination and search
  • Show course details
  • Create new course
    • Frontend form validation 🆕
  • Edit course
    • Frontend form validation 🆕
  • Delete course (if no students are enrolled)
    • Bulk delete courses 🆕
    • Delete confirmation modal 🆕
• Users management
  • Stundent + admin
    • Show user list with search
    • Show user details
    • Create new user
      • Frontend form validation 🆕
    • Edit user
      • Frontend form validation 🆕
    • Delete user
      • Bulk delete users 🆕
      • Delete confirmation modal 🆕

Student area

• Dashboard

  • Total enrolled courses
  • Show grades summary
    • Average grade
    • Total credits
    • Total courses completed (Grade is not null)

• Courses management

  • View available courses
  • Enroll in a course
    • Bulk enroll courses 🆕
    • Enroll confirmation modal 🆕
  • Unenroll from a course 🆕
    • Bulk unenroll courses 🆕
    • Unenroll confirmation modal 🆕
  • View course details
  • Search and paginate courses
  • View enrolled courses

---

Teknologi yang Digunakan

• Framework: CodeIgniter 4
• Library: CodeIgniter Shield (untuk autentikasi dan otorisasi)
• Dependency Management: Composer
• Bahasa Pemrograman: PHP & JavaScript
• Database: MySQL/MariaDB
• Frontend: HTML, CSS, Bootstrap 5

---

Screenshot Uji Coba

Login Page with Frontend Validation

Student: Courses Management

Available Courses List with Bulk Enroll, Confirmation Modal and dynamic stats for selected courses

Student: Enrolled Courses

Enrolled Courses List with Bulk Unenroll and Confirmation Modal

Admin: Courses Management

Courses List with Bulk Actions and Delete Confirmation Modal

Frontend Form Validation for Create and Edit Course

Admin: Users Management

Users List with Bulk Actions and Delete Confirmation Modal

Frontend Form Validation for Create and Edit User

---

Cara Menjalankan

1. Clone repository ini ke dalam direktori server lokal Anda.

   git clone https://github.com/ikhsan3adi/siakad-mini.git
   cd siakad-mini
   

2. Jalankan perintah composer untuk menginstal dependensi yang diperlukan.

   composer install
   

3. Buat database baru di MySQL bernama siakad_mini (bisa disesuaikan di .env).

4. Jalankan perintah migrasi untuk membuat tabel yang diperlukan.

   php spark migrate --all
   

5. Jalankan seeder untuk mengisi tabel dengan data awal.

    php spark db:seed AddInitialAdminSeeder     # wajib untuk membuat user admin
    php spark db:seed AddInitialStudentSeeder   # opsional untuk membuat user student
    php spark db:seed AddInitialCourseSeeder    # opsional untuk membuat data course
    php spark db:seed AddEnrolledCourseSeeder   # opsional untuk membuat data enrolled course
   

6. Salin file env dan rename menjadi .env dan sesuaikan konfigurasi database sesuai dengan pengaturan lokal Anda.

7. Jalankan server pengembangan CodeIgniter.

   php spark serve
   

8. Buka browser dan akses http://localhost:8080 untuk melihat aplikasi berjalan.