> For the complete documentation index, see [llms.txt](https://docs.chamilo.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chamilo.org/2.x/id/panduan-pengembang/developer-guide/frontend/views-and-routing.md).

# Tampilan dan Perutean

Chamilo memiliki sejumlah besar visualisasi Vue (komponen tingkat halaman) yang terhubung melalui Vue Router. File-file aktual terletak di `assets/vue/views/`.

## Arsitektur Router

Router didefinisikan di `assets/vue/router/index.js` menggunakan `createWebHistory` untuk URL yang bersih.

Rute-rute bersifat modular — diorganisir dalam file rute berdasarkan fungsionalitas, diimpor ke router utama:

| Modul Rute          | Halaman                                          |
| ------------------- | ------------------------------------------------ |
| `admin`             | Halaman panel administrasi                       |
| `sessionAdmin`      | Halaman administrasi sesi                        |
| `course`            | Daftar kursus, pembuatan, halaman utama, katalog |
| `account`           | Profil dan pengaturan pengguna                   |
| `personalfile`      | Ruang file pribadi                               |
| `message`           | Pesan / kotak masuk                              |
| `user`              | Halaman manajemen pengguna                       |
| `usergroup`         | Halaman grup pengguna (kelas)                    |
| `userreluser`       | Halaman hubungan antar pengguna (teman/pengikut) |
| `ccalendarevent`    | Kalender dan agenda kursus                       |
| `ctoolintro`        | Halaman pengenalan alat kursus                   |
| `page`              | Halaman statis CMS                               |
| `pageLayout`        | Pembungkus tata letak halaman                    |
| `publicPage`        | Halaman yang dapat diakses secara publik         |
| `social`            | Halaman jejaring sosial                          |
| `filemanager`       | Pengelola file (penjelajah dokumen kursus)       |
| `skill`             | Halaman keterampilan dan kompetensi              |
| `accessurl`         | Halaman manajemen multi-URL (portal)             |
| `branch`            | Halaman cabang / kampus jaringan                 |
| `room`              | Halaman ruang virtual                            |
| `buycourses`        | Halaman pembelian kursus                         |
| `documents`         | Pengelolaan dokumen                              |
| `assignments`       | Alur kerja tugas                                 |
| `links`             | Pengelolaan tautan eksternal                     |
| `glossary`          | Pengelolaan glosarium                            |
| `attendance`        | Pelacakan kehadiran                              |
| `lp`                | Pemutar dan editor jalur pembelajaran            |
| `dropbox`           | Dropbox / pertukaran file                        |
| `blog`              | Halaman blog                                     |
| `blogAdmin`         | Administrasi blog                                |
| `coursemaintenance` | Cadangan dan pemulihan kursus                    |
| `catalogue`         | Katalog kursus dan sesi                          |

## Rute Utama

| Jalur                | Visualisasi                                | Deskripsi                                     |
| -------------------- | ------------------------------------------ | --------------------------------------------- |
| `/`                  | `AppIndex.vue` (atau disesuaikan)          | Titik masuk aplikasi                          |
| `/home`              | `pages/Home.vue`                           | Halaman utama platform                        |
| `/login`             | `pages/Login.vue`                          | Halaman masuk                                 |
| `/courses`           | `views/user/courses/List.vue`              | Kursus yang diikuti pengguna                  |
| `/sessions`          | `views/user/sessions/SessionsCurrent.vue`  | Sesi saat ini                                 |
| `/sessions/past`     | `views/user/sessions/SessionsPast.vue`     | Sesi yang telah lalu                          |
| `/sessions/upcoming` | `views/user/sessions/SessionsUpcoming.vue` | Sesi yang akan datang                         |
| `/course/:id/home`   | `views/course/CourseHome.vue`              | Halaman utama kursus                          |
| `/account/home`      | `views/account/Home.vue`                   | Profil pengguna                               |
| `/admin`             | Visualisasi administrator                  | Panel administrasi                            |
| `/faq`               | `pages/Faq.vue`                            | Halaman pertanyaan yang sering diajukan (FAQ) |

## Penjaga Rute

Router menggunakan penjaga navigasi (dideklarasikan dengan `beforeEach` dan `afterEach`) untuk:

* Memeriksa status autentikasi melalui `useSecurityStore` dan mengarahkan pengguna yang tidak terautentikasi ke `/login`
* Memeriksa konteks kursus melalui `useCidReqStore`
* Menerapkan kelas CSS tipe halaman selama navigasi SPA (menggantikan apa yang akan dilakukan `PageHelper` dari Twig pada pemuatan halaman penuh)
* Mendukung penggantian template Vue yang disesuaikan — komponen masuk di `/` diganti dengan `AppIndex.vue` yang disesuaikan ketika template Vue yang disesuaikan diaktifkan (`var/vue_templates/pages/AppIndex.vue`)

***

## Organisasi Tampilan

Tampilan berada di `assets/vue/views/`, diorganisasi berdasarkan fungsionalitas:

```
views/
├── account/          # Profil dan pengaturan pengguna
├── admin/            # Halaman administrasi
├── assignments/      # Pengiriman dan penilaian tugas
├── attendance/       # Lembar kehadiran
├── blog/             # Postingan dan komentar blog
├── branch/           # Manajemen kampus jaringan
├── buycourses/       # Alur pembelian kursus
├── ccalendarevent/   # Kalender kursus
├── course/           # Daftar kursus, halaman utama, pembuatan, katalog
├── coursecategory/   # Manajemen kategori kursus
├── coursemaintenance/# Cadangan/pemulihan kursus
├── ctoolintro/       # Halaman pengenalan alat
├── documents/        # Daftar dokumen, pembuatan, pembuatan media
├── dropbox/          # Dropbox / pertukaran berkas
├── filemanager/      # Penjelajah berkas
├── glossary/         # Daftar glosarium dan manajemen istilah
├── links/            # Tautan eksternal
├── lp/               # Pemutar dan editor jalur pembelajaran
├── message/          # Kotak masuk dan pesan
├── page/             # Halaman statis CMS
├── pageLayout/       # Pembungkus tata letak halaman
├── personalfile/     # Ruang berkas pribadi
├── room/             # Ruang virtual
├── sessionadmin/     # Administrasi sesi
├── skill/            # Keterampilan dan kompetensi
├── social/           # Jejaring sosial
├── terms/            # Syarat layanan
├── user/             # Manajemen pengguna dan daftar kursus/sesi
├── usergroup/        # Grup pengguna (kelas)
└── userreluser/      # Hubungan antar pengguna (teman/pengikut)
```