Classroom Campus

Classroom Campus Sistem Informasi Akademik / Learning Management System (LMS) berbasis web, dirancang untuk memfasilitasi interaksi dan kegiatan belajar mengajar antara Mahasiswa dan Dosen. Dibangun dengan stack Laravel 12 (Backend) dan Vue.js 3 + Vite (Frontend).

Fitur & Aktor Terlibat

Sistem ini melibatkan 3 aktor utama:

1. Mahasiswa: Mengakses kelas, melakukan presensi, mengikuti forum, mengunduh file materi, dan submit tugas.
2. Dosen: Mengatur silabus materi mingguan, merekap presensi, memberi tugas dan penilaian, serta berdiskusi di forum kelas.
3. Admin: Mengelola Master Data, mengatur plotting kelas (Dosen & Mahasiswa), serta ruangan dan tahun ajaran.

Struktur & Perancangan Sistem

1. Database Entity Relationship Diagram (ERD)

Sistem database ini memiliki integritas dan relasi antar-tabel.

2. Use Case Diagram

Diagram ini memperlihatkan interaksi setiap aktor terhadap fungsionalitas.

3. User Flow

Alur jalannya interaksi user.

Admin Flow:

Dosen Flow:

Mahasiswa Flow:

Tampilan Aplikasi (UI/UX)

Setiap halaman telah dirancang agar mudah digunakan (User Friendly).

Autentikasi

Tampilan Admin (Panel Master Data)

Tampilan Dashboard utama Admin

Kelola Data Mahasiswa dan penambahan Mahasiswa baru

Kelola Data Dosen dan penambahan Dosen

Mengelola Kelas dan Plotting

Kelola Program Studi

Kelola Mata Kuliah

Kelola Ruangan & Tahun Ajaran

Tampilan Dosen

Dashboard Kelas yang diampu oleh Dosen

Daftar Mahasiswa di sebuah Kelas

Kelola Pertemuan & Presensi Mingguan

Pembuatan Silabus Materi

Mengelola & Menilai Tugas

Berdiskusi di Forum Kelas

Profil Dosen

Tampilan Mahasiswa

Dashboard Mahasiswa (List Kelas Aktif)

Masuk ke Dalam Kelas (Class Details)

Melakukan Presensi

Aktivitas Tugas Kelas

Manajemen Profil

Menjalankan Aplikasi

Aplikasi berjalan pada ekosistem lokal PC anda menggunakan stack berikut:

• PHP >= 8.2
• Composer v2+
• Node.js v20+
• Database MySQL / MariaDB (Dianjurkan via Container/Docker)

Menjalankan via Docker (Recommended)

Pada project ini sudah disediakan Native Container Mapping untuk proses development cepat.

docker compose up -d --build

Setelah dijalankan, Anda bisa mengakses url lokal berikut:

• Backend/API: http://localhost:8000
• Frontend App: http://localhost:5173

Menjalankan Tanpa Docker (Manual)

1. Siapkan Database

Buat database MySQL dengan nama classroom_campus, pastikan service MySQL/MariaDB sudah berjalan di komputer Anda (misalnya via XAMPP atau Laragon).

2. Setup Backend

cd backend
composer install
copy .env.example .env

Sesuaikan file .env pada bagian database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=classroom_campus
DB_USERNAME=root
DB_PASSWORD=

Lanjutkan:

php artisan key:generate
php artisan migrate --force
php artisan serve --port=8000

3. Setup Frontend

Buka terminal baru:

cd frontend
npm install
npm run dev

4. Akses Aplikasi

• Backend/API: http://localhost:8000
• Frontend App: http://localhost:5173

Struktur Project

classrom/
|-- backend/                        # Laravel 12 (REST API)
|   |-- app/
|   |   |-- Http/
|   |   |   |-- Controllers/
|   |   |   |   |-- Admin/         # Controller (Master Data CRUD)
|   |   |   |   |-- Auth/          # Login Controller
|   |   |   |   |-- Dosen/         # Controller (Kelas, Presensi, Tugas, dll)
|   |   |   |   |-- Mahasiswa/     # Controller (Dashboard, Kelas, Tugas, dll)
|   |   |   |-- Middleware/
|   |   |-- Models/                 # Model Eloquent
|   |   |-- Providers/
|   |-- config/
|   |-- database/
|   |   |-- migrations/            # file migrasi tabel
|   |   |-- seeders/
|   |-- routes/
|   |   |-- api.php                # Seluruh definisi route REST API
|   |-- storage/
|   |-- Dockerfile
|   |-- .env.example
|   |-- composer.json
|
|-- frontend/                       # Vue.js 3 + Vite
|   |-- src/
|   |   |-- api/                   # Axios instance & interceptor
|   |   |-- assets/
|   |   |-- components/
|   |   |-- layouts/               # AdminLayout, DosenLayout, MahasiswaLayout
|   |   |-- router/                # Vue Router (role-based routing)
|   |   |-- stores/                # Pinia state management
|   |   |-- views/
|   |   |   |-- Login.vue
|   |   |   |-- admin/             # halaman (Dashboard, CRUD Master Data)
|   |   |   |-- dosen/             # halaman (Dashboard, Kelas, Profil)
|   |   |   |-- mahasiswa/         # halaman (Dashboard, Kelas, Tugas, Profil)
|   |   |-- App.vue
|   |   |-- main.js
|   |   |-- style.css
|   |-- Dockerfile
|   |-- package.json
|   |-- vite.config.js
|
|-- preview/                      
|   |-- admin/
|   |-- dosen/
|   |-- mahasiswa/
|   |-- ERD.drawio.svg
|   |-- usecase.svg
|   |-- userflow-dosen.png
|   |-- userflow-mhs.png
|   |-- usersflow-admin.png
|   |-- login.png
|
|-- docker-compose.yml
|-- dev.bat
|-- .gitignore
|-- README.md

Lisensi

Project ini dilisensikan di bawah MIT License.

MIT License

Copyright (c) 2026 Cybha

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.